v-for遍历、v-model、v-on简单易理解，vue的遍历循环（二）

Vue模板语法

声明式渲染：先在HTML中声明一条数据message，用vue特殊的模块语法（mustachar）将其渲染进dom中
在浏览器可以通过vm.vue = “你好”，改变浏览器中该条数据的内容，内部的MVVM模式
js中声明的变量不能一样，浏览器调试器中写法：js声明的变量名.HTML声明的数据 = “改的数据”

<div id = "app">
        {{message}}
    </div>

var vma = new Vue({
    el:"#app",
    data:{
        message:"hello world"
    }
})

基本的数据类型

<div id="app">
        <p>{{str}}</p>      你好
        <p>{{num}}</p>      132
        <p>{{bol}}</p>      true
        <p>{{arr}}</p>      [1,2,3,4]
        <p>{{nud}}</p>      空
        <p>{{null}}</p>     空
        <p>{{arr.length > 2 ? "大于" : "小于"}}</p>     大于
        <p>{{arr.slice(0,3)}}</p>       [1,2,3]
        <p>{{fn()}}</p>     弹出框（123）
    </div>

<script>
    //undefined和null不会渲染出来
    //可以在{{}}填写简单的表达式
    let vm = new Vue({
        el:"#app",
        data:{
            str:"你好",
            num:132,
            bol:true,
            arr:[1,2,3,4],
            nud:undefined,
            null:null,
            fn:function(){alert("123")}
        }
    })
</script>

v-for遍历

//通过v-for进行遍历
    //第一个参数：遍历的值
    //第二个参数：遍历的下标
    let vm = new Vue({
        el:"#app",
        data:{
            arr:["贼了巴子","扑棱蛾子","马猴"]
        }
    })

v-for-arr数组遍历

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

            push()         数组的后面插入元素
            pop()          从数组的后面删除一个元素
            shift()        从数组的前面删除一个元素
            unshift()      从数组的前面插入一个元素
            splice()       数组的剪贴、插入、删除等操作
            sort()         数组的排序
            reverse()      数组的反转
    
        面试题：
            下面这些方法会不会触发视图更新变异？答：不会
            slice  concat 
        1. vm.arr[0] = 10 发现数据改变了，但是视图却没有发生变化！
            给指定的下标更改值：
            1）vm.arr.splice(0,1,10)
            2) Vue.set(vm.arr,0,10)
        2. vm.arr.length = 2
            截取长度：
            vm.arr.splice(2)

        3. vm.user.age = 18  发现视图没有任何改变
            Vue.set(vm.user,"age",18)

之前的name被vue实例进行挂载了，所以会动态的为其添加get与set方法， 数据劫持。数据改变 ==> set ==> watcher ==> 视图更新，但是后续vm.user.age = 18 这个属性，只是简单的数据改变，没有进行内部的数据劫持，去进行动态的添加get与set，数据改变了，但是视图不会更新。怎么让其变成响应式的呢？ vue当中提供了一个全局的api方法 Vue.set() ，就可以为动态添加的数据也会被vue管理，双向数据绑定了。

V-for-json遍历

<div id="app">
        <ul>
            <li v-for="(value,key,index) in animal">{{index+1}}、{{key}}:{{value}}</li>
        </ul>
    </div>

    //v-for不仅可以给数组遍历，也可以给json遍历
    // v-for = "(value,key,index) in object"  
    //第一个参数：遍历的值
    //第二个参数：遍历的键
    //第三个参数：遍历的下标
    let vm = new Vue({
        el:"#app",
        data:{
            animal:{
                name:"贼了巴子",
                age:5,
                sex:"雌"
            }
        }
    })

v-for-template多标签循环、表单循环

<div id="app">
        <table>
            <thead>
                <tr>
                    <th>学名：</th>
                    <th>年龄：</th>
                    <th>性别：</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in students">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.sex}}</td>
                </tr>
            </tbody>
        </table>
        

        <template v-for="i of 3">
            <div>啊实打实</div>
            <p>阿萨德群</p>
        </template>
    </div>

//在body里写的都是假的！！！！
    //如果要进行多标签的循环，(不想额外形成新的标签 )外面套上template
    let vm = new Vue({
        el:"#app",
        data:{
            students:[
                {id:1,name:"贼了巴子",age:5,sex:"雌"},
                {id:2,name:"马猴",age:2,sex:"雄"},
                {id:3,name:"扑棱蛾子",age:3,sex:"雌"}
            ]
        }
    })

v-model

面试题：
请你说一下 v-model底层原理实现？
绑定了value属性与监听了input事件

v-model修饰符有哪些？
1.v-model.lazy 默认是实时更新，如果加了lazy修饰符，只有失去焦点的时候，内部才会更新
2.v-model.number 这个值无法被parseFloat解析的时候原样输出，否则转换
3.v-model.trim 去掉前后空格

下面方法可以实现实时监听input内的内容并输出

<div id="app">
        <p>{{num}}</p>
        <p><input type="text" v-model="num"></p>
</div>    

let vm = new Vue({
        el:"#app",
        data:{
            num:"hello world"
        }
    })

v-on

vue中，可以通过 v-on指令来去绑定相关事件
v-on:click v-on:dblclick v-on:keyup
v-on:click ===> @click
vue提供了事件修饰符：
.stop 阻止事件冒泡
.prevent 取消事件默认行为
.once 触发一次
.self 只能在自身上面触发
.enter 提供了键盘修饰符

<div id="app">  
        <p>{{num}}</p>
        <p><button v-on:click.once="num++">点击num</button></p>
        <p><button v-on:dblclick="num++">双击num</button></p>
        <ul  @click.self="clickUl">
            <li @click.stop="clickLi">我是li元素</li>
        </ul>
        <p><a href="http://www.baidu.com" @click.prevent>哈哈</a></p>
        <p><input type="text" @keyup.enter="up"></p>
    </div>

let vm = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            clickLi(e){
                alert("点击li了...")
            },
            clickUl(e){
                alert("点击ul了...")
            },
            up(e){
                e.target.value=""
            }
        }
    })