vue学习-指令

MVVM模型

M:model 模型V:view 视图VM:view-model 相当于控制器v ---> vm ---> model                |v <--- vm <---  |代码体现：1.视图 v<div id="app">{{messega}}</div>2.控制器 vmvar vm =new Vue({  el:"#app",  //el:控制对应的视图  data:{     message : 'Hello World' // 3.M 数据模板Model  }})

指令

{{}} 插值表达式指令:    拓展html的标签，先在html占位，在利用真实的数据替换    让我们程序员只操作数据，即可更新视图    注意:        Vue中的指令是以v-开头的  1.v-text & v-html    给我们页面中的span p标签设置值    v-text 纯文本    v-html 解析带有html标签的字符串    <div v-text="message"></div>    var vm =new Vue({        el:"#app",  //el:控制对应的视图        data:{            message : 'Hello World'//3.M 数据模板Model        }    })2.v-bind    在html中，比如img标签为例，src的值不写死，而是src的值来自model，这个时候就要使用v-bind了    注意:以后我们视图中（img）需要的数据，必须来自model的时候，这个时候你就要想到v-bind    `v-bind:` 可以简写成 `:`    <div id="app">        <img src="img_url">    </div>    //这样写就是写死的，是一个字符串    <img v-bind:src="img_url">  //数据的绑定，不写死    var vm =new Vue({        el:"#app",  //el:控制对应的视图        data:{            img_url : 'img.jpg'//3.M 数据模板Model        }    })3.v-on 绑定事件    ng-click Angular中给某个元素绑定一个点击事件，一般都是给button绑定    注意点：    1、当要执行的函数没有参数的时候，可以写`()`也可以不写，如果有参数必须加上`()`    2、v-on:可以缩写成 `@`        <div v-on:click="click()"></div>        <div @click="click()"></div>        var vm =new Vue({            el:"#app",  //el:控制对应的视图            methods:{ //方法                click:function(){                    console.log(111)                 }            }        })  4.v-model    双向数据绑定(数据的动态变化)    特别注意:         1.当vm的数据发生改变,视图的数据就发生改变        2.当视图的数据发生改变,vm的数据就发生改变        3.视图的数据为字符串,vm的数据为数字类型,进行parseInt()转化    <div id="app">        <input type="text" v-model="v1">+<input type="text" v-model="v2">        <button @click="add">=</button>        <input type="text" v-model="result">    </div>    var vm = new Vue({        el:"#app",        data:{            v1:1,            v2:2,            result:0        },        methods:{            add:function(){                /**                * 把v1和v2的值，加起来赋值给result                */                //this代表vm  this.v1 就能访问到v1的值       this.result=parseInt(this.v1)+parseInt(this.v2)            }        }    })    5.v-if/v-show        v-if&v-show 接收的是boolean值        区别:            true的时候没啥区别            false的时候有区别                 if 不会创建元素                show 会创建元素，但是隐藏起来,只是设置了一个display=none                 开发中如何抉择?            如果需要频繁切换（显示） show            如果不需要频繁切换(显示) if                    注意点:            v-if 后面接的v-else-if v-else必须紧跟v-if的后面，中间不要有任何其它元素，否则有问题        <div id="app">            <span v-if="isShow">if---我在哪里?</span>        </div>         var vm = new Vue({            el:"#app",            data:{                isShow:false            }        })6.v-for    作用:        遍历        你要遍历什么，就作用于哪个元素上面    注意：        1、如果要获取我们遍历的每一行的索引        2、在使用v-for遍历元素的时候，最好给每一行设置一个唯一的标识符，通过给遍历的每个元素设置一个唯一的key值即可    <div id="app">        <ul>            <li :key="item.no" v-for="(item,index) in persons">                {{index}}---{{item.name}}---{{item.age}}            </li>        </ul>    </div>    //index为索引值，item为数组的每一项元素    var vm = new Vue({        el:'#app',        data:{            persons:[                {no:10001,name:"刘德华",age:50},                {no:10002,name:"张学友",age:48},                {no:10003,name:"黎明",age:46},                {no:10004,name:"郭富城",age:47}            ]        }    })