vue学习-指令

MVVM模型

M:model 模型
V:view 视图
VM:view-model 相当于控制器

v ---> vm ---> model
                |
v <--- vm <---  |

代码体现：

1.视图 v
<div id="app">{{messega}}</div>

2.控制器 vm
var 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}
            ]
        }
    })