Vue.js基础知识点笔记

1、引入：<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
2、数据绑定：通过ID和{{变量名}}绑定数据和界面元素。
    HTML中：  

<div id='myapp'>
    {{ message }}
</div>

    js中绑定数据：

var myapp = new Vue({
     el: '#myapp',
     data: {
     message: 'hello vue.js'
     }
});

3、使用vue框架，需要先new Vue()对象，在vue对象中用‘el’选择器选择界面元素，用data给界面中的变量名赋值
4、v-if:vue的条件语句。为组件添加v-if属性，如果v-if=表达式为true，则渲染并显示该组件，否则不渲染该组件，即DOM树中没有该组件，即页面中没有该组件。表达式中如果有Vue的data属性作为变量，也可以被解析出来填入对应值。这个过程是在服务端进行页面组装时完成的。
        v-else-if,v-else:配合v-if使用，语法和v-if相同。如果if条件不满足，可以进入v-else-if的条件判断，或v-else判断。v-else不需要加判断表达式。
5、v-for：vue的循环语句。为组建添加v-for='iter in obj'属性，在JSON数据中绑定一个可迭代的obj，obj用数组表示，每次迭代返回一个iter代表obj中的一个元素。v-for也可以返回索引，语法：v-for='(iter, index) in obj'
6、v-model:为页面输入框进行双向数据绑定，例如：input,select,textarea,components(vue的组件)。为组件添加v-model='变量名'属性，当输入框中的值改变时，网页中定义的变量名会同步发生变化。
7、v-on:为页面的控件绑定事件。比如：keydown，keyup，click，dbclick，load等等。为组件添加v-on属性，属性的子属性是消息名称，值是响应函数和入参，如v-on:click='btnclick("魔兽世界"),'v-on:'也可以缩写为@，即@click='btnclick("魔兽世界")。在Vue的参数中定义响应函数：
new Vue({
        el: '#myapp',//这里选择要响应的组件
        data: {//这里绑定变量
            game_name: '请选择游戏名称'
        },
        methods: {//这里定义自定义函数，包括响应函数
            btnclick: function(gn) {
                this.game_name = gn;
            },
        }
    });
8、filters:过滤器，可以在数据显示之前对数据进行操作，比如格式化、计算、大小写变换等，filters是Vue对象的属性之一，定义类似于事件绑定：
    new Vue({
        ......
        filters: {
            toUpper: function(value) {
                return value.toUpperCase();
            }
        }
    });
    使用时，通过管道，把变量值传入过滤函数：<p>{{message | toUpper}}</p>
9、computed:计算属性，通过计算原始数据得到新的数据，而不改变原数据;当源数据发生变化时，计算属性同步发生变化。主要用于可计算并且需要多次计算多个值的情况。计算属性也是数据属性的一部分，通过计算函数返回，在控件中用变量名直接引用。也是Vue对象的属性之一，定义如下：
    new Vue({
        el: '#myapp',
        data: {
            price: 100//假设是数据库中存储的数据
        },
        computed: {//假设需要多种计算结果的数据
            priceup: function() {
                return this.pricedown * 1.08;
            },
            pricedown: function() {
                return this.price * 0.9;
            }
        }
    });
10、watch：监视属性，可以监视控件的变量的变化，然后做出相应的处理。把上面的例子改下如下：当price发生变化时，调用watch中的函数，这里是修改up和down的值，实现了同步变化。
    new Vue({
        el: '#myapp',
        data: {
            price: 0,
            priceup: 0,
            pricedown: 0
        },
        watch: {
            price: function(nv, ov) {
                this.priceup = this.price * 1.08;
                this.pricedown = this.price * 0.9;
            }
        }
    });
11、修改源数据：计算属性可以获取（get），可以设置（set），可以在设置时修改源数据属性。举例如下：
        new Vue({
        el: '#myapp',
        data: {
            price: 100,
        },
        computed: {
            priceup: {
                get: function() {
                    return Math.round(this.price * 1.08);
                },
                set: function(v) {//2。然后调用priceup的set方法，在该方法中修改源数据属性price的值
                    this.price = Math.round(v / 1.08);
                }
            },
            pricedown: function() {
                return Math.round(this.price * 0.9);
            }
        },
        methods: {
            btnclick: function() {
                this.priceup = 200;//1。按钮按下时修改了计算属性priceup的值
            }
        }
    });
12、为组件绑定class：class可以是某个css样式，因此可以通过是否绑定来动态修改组件的class即样式。为组件添加v-bind:class='{样式名:触发条件}'，"v-bind"可以省略缩写，即:class='{样式名:触发条件}'，其中样式名是某个class的css样式，触发条件是Vue对象的data属性之一。举例如下：
    .active {//定义class名active的css样式
        color: red;
    }
    <p v-bind:class='{active:isActive}'>文本变色</p> //是否给组件绑定active类，条件是isActive
    new Vue({
        el: '#myapp',
        data: {
            isActive: false,//该属性值的变化会同步影响组件是否绑定active类
        },
        methods: {
            btnclick: function() {//通过响应函数修改isActive的值
                this.isActive = !this.isActive;
            },
        },
    });
13、为组件添加class对象属性：和上例类似，但是上例只能控制一个class属性，而通过属性对象，可以控制多个属性，语法如下：
    .active {
        color: red;
    }
    .big {  //两个class样式
        font-size: 64px;
    }
    <p v-bind:class='myclass'>文本变色</p>//为组件绑定class属性对象
    new Vue({
        el: '#myapp',
        data: {
            myclass: {//具体的class属性对象
                active: true,//class名称的css样式，为true就为组件添加该class，反正去掉
                big: true,//class名称的css样式
            },
        },
        methods: {
            btnclick: function() {
                this.myclass.active = !this.myclass.active;
                this.myclass.big = !this.myclass.big;
            },
        },
    });
14、v-show=条件判断：如果是true，则显示该组件，否则不显示。其实是控制css中的display:none的有无。所以即使不显示，也只是隐藏了，节点还在DOM树中，和v-if不同。
15、v-for迭代JS对象的属性：为组件添加属性v-for='(value, key) in obj'，可以输出obj的属性名和属性值，注意返回的value和key的顺序。举例如下：
    <li v-for='(value, key) in myinfo'>{{key}} : {{value}}</li>//迭代出myinfo的key和value
    new Vue({
        el: '#myapp',
        data: {
            myinfo: {//定义myinfo的key和value
                name: 'bl',
                age: '33',
                address: 'huilongguan',
                tel: '18610598303'
            }
        },
    });
    v-for循环数组：<li v-for='(game, index) in games'>{{index+1}}:{{game.title}}售价是{{game.price}}</li>
    js文件中：
    new Vue({
        el: '#myapp2',
        data: {
            games: [{
                title: 'csgo',
                price: 100
            }, {
                title: '传奇世界',
                price: 100
            }, {
                title: '魔兽争霸',
                price: 100
            }],
        }
    });
16、为响应函数传入event：在控件中传入event：<p @click='btnclick($event)'></p>
    在methods中响应：
     methods: {
            btnclick: function(event) {
                console.log(event);
            },
        },
17、v-model：双向绑定js变量和控件元素，将js变量的值设定到控件上，或者把用户输入的内容更新到js变量
18、v-model的三个属性：为控件绑定js对象。1、v-model.lazy='属性名'：用户输入内容时不做绑定数据的更新操作，在光标离开控件时，控件的onchange事件触发，更新绑定的变量，可以加快网页显示
    2、v-model.number='属性名'：用户输入的内容转换为数值类型，非数值返回NaN，即控件只能输入数字
    3、v-model.trim='属性名'：去掉用户输入两端的空格
    这三个属性可以用链式语法组合使用。
19、v-model和复选框的结合：html中：
    <div id='myapp'>
            <input type="checkbox" id="生化危机" value="生化危机" v-model="checkGame">
            <label for="生化危机">生化危机</label>
            <input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkGame">
            <label for="模拟飞行">模拟飞行</label>
            <input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkGame">
            <label for="塞尔达传说">塞尔达传说</label>
            <br>
            <p>您选择的游戏是：{{checkGame}}</p>
    </div>
    js中：
    new Vue({
        el: '#myapp',
        data: {
            checkGame: [],
        },
    });
    效果：当选中或不选多个复选框时，checkGame中也会添加或删除复选框的value
20、v-model和单选框的结合：html中：
        <h2>选择性别</h2>
        <input type="radio" id="male" value="男" v-model="sex">
        <label for="male">男</label>
        <input type="radio" id="female" value="女" v-model="sex">
        <label for="female">女</label>
        <br>
        <h2>选择爱好</h2>
        <input type="radio" id="movie" value="看电影" v-model="hobby">
        <label for="movie">看电影</label>
        <input type="radio" id="read" value="读书" v-model="hobby">
        <label for="read">读书</label>
        <br>
        <p>您的性别是：{{sex}}</p>
        <p>您的爱好是：{{hobby}}</p>
    js中：
    new Vue({
        el: '#myapp',
        data: {
            sex: '',
            hobby: '',
        },
    });
    效果：当选中某个单选框时，变量只会获得一个值，即使变量类型是列表等，也只有一个值
21、v-model和下拉列表框结合：html中：
        <h2>你最喜欢的选项是？</h2>
        <select v-model="item" style="width:100px">
            <option>item1</option>
            <option>item2</option>
            <option>item3</option>
            <option>item4</option>
            <option>item5</option>
        </select>
        <h2>你可以多选：</h2>
        <select v-model="items" multiple style="width:100px">
                <option>item1</option>
                <option>item2</option>
                <option>item3</option>
                <option>item4</option>
                <option>item5</option>
                <option>item6</option>
                <option>item7</option>
                <option>item8</option>
                <option>item9</option>
        </select>
        <p>你的单选是：{{item}}</p>
        <p>你的多选是：{{items}}</p>
    js中：
    new Vue({
        el: '#myapp',
        data: {
            item: null,
            items: []
        },
    });
    效果：js变量会获得单选列表框和多选列表框的值
22、全局vue组件：component，在页面中添加组件，完成一个小功能。组件是通过vue自定义的一个可以实现小功能的控件模板。
    定义组件：
     Vue.component('game-item', {//自定义标签名，
        props: ['game'],    //组件的属性
        template: '<li>{{game.name}}</li>'  //组件的模板，vue.js会用该模板还原该组件
    });
    使用组件：
    <game-item v-for='item in games' v-bind:game='item'></game-item>//v-for和前面内容相同，v-bind把v-for中的迭代变量item绑定到组件的属性上
23、局部vue组件：之前定义的组件是全局组件，也可以给Vue对象的属性增加局部组件，语法如下：定义一个vue组件变量，并把组件给Vue.components属性，当实现myapp这个控件时，内部就会增加一个com-item类型且解释后可显示的html标签
    var com-item={//定义一个自定义vue组件对象
        template:'<p>hello world</p>'
    }
    new Vue({
        el: '#myapp',
        data: {
        },
        components:{//添加自定义组件
            'mycom':'com-item',
        }
    });
24、表行组件：如果自定义了组件，直接放在列表<table>内部，实际渲染时不会在表内显示，需要用如下语法：
    Vue.component('my_item', {//js中自定义组件，一个单元格
        template:'<tr><td>我的单元格</td></tr>'
    })
    HTML中：
    <table><tr is='my_item'></tr></table>//用is语法就可以把自定义表格加入到表内
25、自定义组件的数据函数：自定义组件内的数据也可以是动态的，来源是data属性，但该属性必须是函数，而不是普通的值属性，如下：
    Vue.component('weather',{
        template:'<p>今天的天气是{{weather}}</p>'//模板使用动态数据
        data: function(){//为动态数据绑定数据函数
            return {weather: '雨夹雪'};//返回动态数据变量的值
        }
    })
26、自定义组件的计算属性：自定义组件的父组件，必须添加到Vue对象中，否则不会被Vue解析
    Vue.component('score-result', {
        props: ['score'],
        template: "<div><strong>{{score}}分，评价：{{result}}</strong></div>",
        computed: {
            result: function() {
                if (this.score < 60)
                    return "不及格";
                else if (this.score < 90)
                    return "良";
                else if (this.score <= 100)
                    return "优";
            },
        },
    });
    new Vue({
        el: '#myapp',
    });
    HTML中：这里的‘：’是‘v-bind：’的缩写
    <score-result :score='50'></score-result>
    效果：结合props属性和computed属性，可以对自定义组件中的数据进行动态修改
27、自定义组件传递变量数据：可以把自定义组件的父Vue组件的变量值传递到组件中
    Vue.component('say-hi', {
        props: ['pname'],//自定义组件的属性
        template: "<div><strong>{{pname}}</strong></div>",
    });
    new Vue({
        el: '#myapp',
        data: {
            'name': '',//父组件的变量
        }
    });
    HTML中：
    <div id='myapp'>
        <h1>您的姓名是：</h1><input v-model='name'>//当父组件的变量值改变时同步修改绑定的自定义组件
        <say-hi :pname='name'></say-hi>//把父组件的变量绑定到自定义组件
    </div>
28、自定义组件使用js对象作为属性：
    Vue.component('say-hi', {
        props: {
            name: {
                type: String,
                required: true,
                validator: function(value) {
                    return value.length < 10;
                }
            },
            age: {
                type: Number,
                validator: function(value) {
                    return value > 0 && value < 130;
                }
            },
            detail: {
                type: Object,
                default: function() {
                    return {
                        "address": "回龙观",
                        "tel": "18610598303"
                    };
                }
            }
        },
        template: "<div>姓名：{{this.name}}<br>" +
            "年龄：{{this.age}}<br>" +
            "地址：{{detail.address}}<br>" +
            "电话：{{detail.tel}}</div>",
    });
    new Vue({
        el: '#myapp',
    });
    HTML中：如果属性是字符串，则不能用‘：’绑定语法，其他类型时必须用绑定语法，否则HTML会解析成纯字符串
    <say-hi name="fsdfefghi" :age="35" :detail="{'address':'北京', 'tel':'15901038755'}"></say-hi>
    效果：可以对自定义的组件进行验证、设置默认值（通过函数）、是否必须等设置。
29、自定义组件通过发出消息来更新父组件：通过$emit(msg,{key:value...})的方式来触发msg，父组件绑定msg的响应函数，从而响应自定义组件发出的msg
    Vue.component('add-comp', {
        props: ['a', 'b'],
        template: `<button v-on:click="add">加和</button>`,
        methods: {
            add: function() {//自定义组件定义响应模板中button的onclick方法
                this.$emit('add-num', {//处理该事件时，发出名为’add-num‘的事件，并传递参数
                    result: this.a + this.b
                });
            }
        },
    });
    var myVue = new Vue({
        el: '#myapp',
        data: {
            result: 0,
        },
        methods: {
            getAddResult: function(r) {//在html中绑定该函数响应名为‘add-num’的事件
                this.result = r.result;
            }
        }
    });
    HTML中：这里v-on绑定的事件由父组件响应，自定义组件模板内定义的事件由自定义组件响应
    html文本不区分大小写，所以在html中不推荐用驼峰命名法，推荐使用‘-’命名法
    <add-comp :a=12 :b=17 v-on:add-num='getAddResult'> </add-comp>
30、自定义组件的slot插槽：可以将自定义组件的文本内容显示在模板中
    1、单一插槽：直接饮用自定义组件的文本内容
    Vue.component('nice-game', {
        template: `<p>你喜欢玩<slot></slot><p>`,//使用插槽
    });
    HTML中：
    <nice-game>CSGO</nice-game>
    效果：渲染后，模板就可以显示“你喜欢玩CSGO”，否则“CSGO”不显示
    2、命名插槽：可以实现多个插槽的使用
    注意：自定义组件只能有一个根节点，即如果有多个同级元素，则必须再定义一个根元素，如下面的<div>就是用来做唯一的根节点
    Vue.component('nice-game', {
        props: ['item4', 'item5'],
        template: "<div>item3是：<slot name='item3'></slot><br>" +
            "item2是：<slot name='item2'></slot><br>" +
            "item1是：<slot name='item1'></slot><br>" +
            "item4是：{{item4}}<br>" +
            "item5是：{{item5}}</div>"
    });
    HTML中：模板中按名称引用slot时，顺序可以和html中定义的顺序不通，最后渲染效果以模板中引用顺序为准
    <nice-game item4='千里不留名' item5='捏花笑春风'>
            <span slot='item1'>仙剑奇侠传<span>好好好</span></span>
            <span slot='item2'>书剑恩仇录</span>
            <span slot='item3'>十步杀一人</span>
    </nice-game>
    效果：在模板中按属性引用的值会直接输出，按slot引用的内容会在DOM中添加slot所在节点及其子节点，即如果定义命名slot的元素还有多级子元素，那么在引用slot后，会一起渲染在DOM中，同时，slot所在节点必须是自定义节点的一级子元素，否则vue无法找到slot，从而无法渲染该节点内容。