我的个人博客

<div id="root">
        姓：<input type="text" v-model:value="firstName"><br />
        名：<input type="text" v-model:value="lastName"><br />
        姓名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        //创建Vue实例
        const vm = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                firstName: "张",
                lastName: "三"
            },
            //data用于存放数据，数据供el所指定容器服务

            //计算属性
            //底层借助了Object.defineProperty实现get和set
            computed: {
                fullName: {
                    //只要有人读取fullName,get函数就会被调用
                    //计算属性最终会出现在vm上，直接使用就可以
                    //什么时候被调用？1、初次读取fullName时2、所依赖的数据发生改变时
                    get() {
                        console.log('被调用了');
                        return this.firstName + "-" + this.lastName;
                    },
                    //当fullName被修改时调用
                    //fullName没有真正属于自己的值，它的值每次都是通过计算得出来的
                    set(value) {
                        console.log(value);
                        const arr = value.split('-');
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        })
    </script>

//计算属性简写
//如果确定只考虑读取，不考虑修改，可以省略set，把计算属性简写成函数形式，但他本质还是属性
            computed: {
                fullName() {
                    console.log('被调用了');
                    return this.firstName + "-" + this.lastName;
                }
            }

<div id="root">
        <!-- 视图view -->
        <h1>欢迎来到{{name}}学习</h1>
        <!-- <button v-on:click="showInfo">点我提示信息</button> -->
        <button @click="showInfo">点我{{name}}信息(不传参)</button>
        <button @click="showInfo2(66,$event)">点我{{address}}信息66(传参)</button>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false;
        //创建Vue实例
        //Vue的实例对象视图模型VM
        const vm = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            //模型model
            data: {
                name: '西南大学',
                address: '重庆'
            },
            //data用于存放数据，数据供el所指定容器服务
            methods: {
                showInfo(event) {
                    alert('我是谁谁是');
                    console.log(this);//这里的this是vm
                }
                ,
                showInfo2(number, $event) {
                    console.log(number);
                }
            }

        })
        console.log(vm);

<script>
        let obj = {
            x: 100
        }
        let obj2 = {
            y: 200
        }

        //当obj2.x的值被修改时，obj.x的值也会被修改
        Object.defineProperty(obj2, 'x', {
            get() {
                return obj.x
            },
            set(value) {
                obj.x = value
            }
        })
    </script>

1、data先会把数据赋值给_data（下划线），vm就可以通过vm._data（下划线）访问到数据。

2、vm身上被添加name,address属性，只要有人读取name和address，就会通过Object.defineProperty里面的getter读取，只要有人修改vm.name，就会调用Object.defineProperty里面的setter使得vm._data.name也被修改。

<script>
        let num = 18;
        let person = {
            name: '张三',
            sex: '男'
        }

        //通过Object.defineProperty使得num和person.age绑定
        Object.defineProperty(person, 'age', {
            // value: 18,
            // enumerable: true,//控制属性是否可以被遍历，默认值为false
            // writable: true,//控制属性是否可以被修改，默认值为false
            // configurable: true,//控制属性是否可以被删除，默认值为false


            //当有人读取person中的age属性时,函数就会被调用,返回值就是age属性值
            get() {
                return num;
            },

            //当有人修改person中的age属性时,函数就会被调用,会收到修改的值
            //实际改了值，但由于get方法调用，num的值并没有被修改，所以要把value赋值给num
            set(value) {
                num = value
            }
        })

        console.log(Object.keys(person));
        console.log(person);
    </script>

<div id="root">
        <!-- 视图View -->
        <h1>Hello,{{name}}</h1>
        <h1>Hello,{{adress}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //创建Vue实例
        //Vue的实例对象视图模型ViewModel
        const vm = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            //模型Model
            data: {
                name: '西南大学',
                adress: '重庆'
            }
            //data用于存放数据，数据供el所指定容器服务
        })
    </script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../Vue导入文件/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>


    <script type="text/javascript">

        //创建Vue实例
        const x = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                name: '西南大学'
            }
            //data用于存放数据，数据供el所指定容器服务

        })


    </script>
</body>

</html>

<div id="root">
        <!-- v-bing只可以使得数据流向页面 -->
        单项数据绑定：<input type="text" v-bind:value="name"><br />

        <!-- v-model只适用于表单元素 如input,select等元素-->
        <!-- v-model:value可以简写成v-model,因为v-model默认收集value值 -->
        <!-- v-model既可以使得数据流向页面，也可以使页面流向数据 -->
        双项数据绑定：<input type="text" v-model:value="name">
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false;
        //创建Vue实例
        new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                name: '西南大学',
                school: {
                    name: '卢航我儿',
                    url: 'https://www.baidu.com'
                }
            }
            //data用于存放数据，数据供el所指定容器服务
        })
    </script>

<div id="root">
        <!-- 插值语法:用于解析标签体内容,可以是js表达式 -->
        <h1>Hello,{{name}}</h1>
        <h1>Hello,{{i+5}}</h1>
        <!-- 指令语法:用于解析标签,也可以写js表达式 -->
        <a v-bind:href="school.url">我的名字叫{{school.name}}</a>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false;
        //创建Vue实例
        new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                i: 5,
                name: '西南大学',
                school: {
                    name: '卢航我儿',
                    url: 'https://lzkpersonal.com.cn'
                }
            }
            //data用于存放数据，数据供el所指定容器服务
        })
    </script>

// push()方法
        // 该方法是在数组后面添加元素（一个或多个），并且返回了数组的最新长度
        console.log('push方法添加了467三个元素,并返回了最新数组长度为' + arr.push(4, 6, 7));//1,2,5,4,6,7
        console.log(arr);

        // pop()方法
        // 删除数组最后一个元素，并且将删除的元素返回
        console.log("pop方法删除的数组最后一个元素为" + arr.pop());//1,2,5,4,6

        // unshift()方法
        // 在数组开头添加一个或多个元素，并且返回数组的最新长度
        console.log('unshift方法在开头添加了0这个元素,并返回了最新数组长度为' + arr.unshift(0, 2));//0,2,1,2,5,4,6
        console.log(arr);

        // shift()方法
        // 删除数组中第一个元素，并且将该元素返回
        console.log("shift方法删除的数组第一个元素为" + arr.shift());//2,1,2,5,4,6

        // sort:按升序排列数组项
        // 在排序时，sort()方法会调用每个数组项的toString()转型方法,将数组里面的数值转换为字符串
        arr.sort();
        console.log("sort方法按照升序排列后的数组为" + arr);//1,2,2,4,5,6

        // reverse（）
        // 反转数组项的顺序
        arr.reverse();
        console.log("reverse方法翻转后的数组为" + arr);//6,5,4,2,2,1


        /**
         * 1,join（）方法：将数组的元素组起一个字符串，以separator为分隔符，省略的话则默认用逗号为
         * 分隔符，该方法只接收一个参数：即分隔符
         * */
        console.log("join()将数组转换为字符串为" + arr.join());    // 1,2,3
        console.log("join('-')用-将数组分割转换为字符串为" + arr.join('-')); // 1-2-3


        // indexOf():接收两个参数:要查找的项和（可选的）表示查找起点位置的索引，其中，从数组的开头（位置0）开始向后查找(从前往后找)
        // lastindexOf():接收两个参数:要查找的项个(可选的)表示查找起点位置的索引，其中，从数组的末尾开始向前查找（从后往前找）
        // 此两种方法都返回要查找的项在数组中的位置，或者再没有找到的情况下返回-1
        array = [1, 2, 8, 3, 5, 6, 9, 8, 4];
        console.log("indexof()从前往后找8的索引值为" + array.indexOf(8));//2
        console.log("lastindexof()从后往前找8的索引值为" + array.lastIndexOf(8));//7


        //splice() 在指定位置删除指定个数元素再增加任意个数元素 （实现数组任意位置的增删改) 返回删除的数据 
        //index 必需。整数，规定添加/删除项目的位置（元素下标），使用负数可从数组结尾处规定位置。
        //howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
        //item1, …, itemX 可选。向数组添加的新项目
        arrSplice = [0, 1, 2, 3, 4, 5];
        arrSplice.splice(0, 1, 'a', 'b', 'c')//删除索引号为一的位置1个元素添加'a','b','c'
        console.log('被splice方法修改后的数组为' + arrSplice);//a,b,c,1,2,3,4,5


        // concat() 方法用于连接两个或多个数组。
        // 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
        // concat() 方法不会改变原始数组
        console.log("concat()将arr数组和[1,2,5]数组连接在一起后的数组为" + arr.concat([1, 2, 5]));//6,5,4,2,2,1,1,2,5


        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // filter() 不会对空数组进行检测。
        // filter() 不会改变原始数组。
        array = [1, 2, 8, 3, 5, 6, 9, 8, 4];
        const newArray = array.filter(item => item >= 2);
        console.log('filter()大于等于二的新数组为' + newArray);//2, 8, 3, 5, 6, 9, 8, 4


        // slice() 裁切指定位置的数组 被裁切的元素形成的新数组
        // slice() 不会改变原始数组。
        var result = array.slice(1, 3)//区间为[1,3)
        console.log('用slice方法裁切后的结果为' + result);//2,8

类：泛指某一类事物（明星）。

对象：指的是类中的某一具体的事物（周星驰）。

对象由属性和方法组成。

属性：事物的特征，在对象中用属性来表示。

方法：事物的行为，在对象中用方法来表示。

构造函数：将对象里面一些相同的属性和方法封装到函数里面。

1、构造函数名字的首字母要大写，属性和方法前面必须加this。

2、构造函数不需要return返回值就可以返回结果。

3、调用构造函数必须要用new.

function Hero(name, xinghao, xue) {
            this.name = name;
            this.xinghao = xinghao;
            this.xue = xue;
            this.attack = function (sang) {
                console.log(sang);
            }
        }

var lianpo = new Hero('LianPo', 'liliang', 500);
var houyi = new Hero('HouYi', 'sheshou', 100,);

lianpo.attack('山崩地裂');//山崩地裂
console.log(houyi.name);//HouYi

遍历对象

var obj = new Object();
        obj.age = 18;
        obj.sex = '男';
        }
//两种调用对象属性的方法
console.log(obj.age);
console.log(obj['age']);
obj.fn();
console.log('------------');
for (var k in obj) {
   console.log(k);//输出的是属性名
   console.log(obj[k]);//输出的是属性值
   }