Vue模板指令

mvvm

vm是什么？

viewmodel 的简写 用来连接同步view试图层和model层 监听model层数据的变化 从而改变view页面展示出来的数据

插值表达式的作用是什么

渲染data数据

v-text作用？

v-开头的都是命令 添加在属性栏 v-text同样可以对内容进行修改 数据展示

v-text 和 v-html区别？

两个的使用场景 都是 在标签属性里面写
v-text 不可以解析标签 v-html 可以解析标签 但是表达式不安全 不建议使用

        <p v-text='name'></p>
       <p v-html='html'></p> 

v-bind 是绑定给谁的？

绑定标签的属性

        <img v-bind:src="imgsrc" alt="" width="100px">
 **bind可省略**   <img :src="imgsrc" alt="" width="100px">
   
        <a :href="'del.php?id='+id">删除</a>

        <p :class="{'red':true}">测试属性绑定</p>

v-for 循环数组 对象的 几种写法？

        <h1>v-for='item in arr'</h1>
        <p v-for='item in arr'  :key='item.name'>{{item.name}}:{{item.age}}</p>
       
        <h1>v-for='(vlue,index) in arr'</h1>
        <p v-for='(item,index) in arr ' :key='index'>{{item.name}}:{{item.age}}:'索引'{{index}}</p>
       
        <h1>v-for='vlue in obj'</h1>
        <p v-for='vlue in obj' :key='vlue'>{{vlue}}</p>

        <h1>v-for='(vlue,key,index) in obj'</h1>
        <p v-for='(vlue,key,index) in obj' :key='vlue'>{{vlue}}:{{key}}:+'索引'{{index}}</p>

在v-for=''后面 添加：key的作用？

只刷新被改变的那一部分 提高性能优化

：key的用法？

在v-for=''后面添加:key='一个唯一的标识符一般是item.name//index'

修改/添加数组的内容的方法

// Vue.set 修改arr的属性
Vue.set(vm.items, indexOfItem, newValue)/vm.$set(vm.items, indexOfItem, newValue)
Vue.set(vm.arr, 0, {name:'小混混',age:28})

// Array.prototype.splice 修改数组的长度
vm.items.splice(indexOfItem, 1, newValue)
vm.arr.splice(0, 1)
增加vm.arr.push('newarr')

v-model：实现双向数据绑定

作用 视图层和数据层是绑定在一起的 不管改变哪一个 数据都是同步改变的 仅限使用于input textarea select这三种标签中

<input type="text" v-model='name'>{{name}}
        <!-- textarea/input/selsect使用 -->

v-on：用来监听 绑定dom事件

在methods属性中定义函数
如果想要获取data中的属性 需要加上this 表示的是vue实例

• 1.绑定事件 两种写法(可以简写)
• 2.stop阻止冒泡 prevent阻止默认跳转
• 3.@keyup:enter按键事件

        <button v-on:click='changeMsg'>点击改变事件</button>
        <button @click="changeMsgBy('小傻瓜')">可以传参</button>
        <button @click='getEvent($event)'>事件对象</button>
        <a href="http://www.baidu.com" @click.prevent='changeMsg'>百度</a>
        <input @keyup.13='submit'>
        <input @keyup.enter='getEvent($event)'>

   var vm = new Vue({
       el:'#vm',
       data:{
           name:'zs',
           age:18,
           html:"<h3>哈哈哈哈</h3>",
           imgsrc:'../img/shui.jpg',
           arr:[ ],
           obj:{ }
       },
       methods:{
            changeMsg() {//点击改变data里面的name的值 固定是‘小可爱’
                   this.name='小可爱',
               },
               changeMsgBy(arg){//直接传参  改变data里面的name的值  想传什么都可以
                   this.name=arg
               },
               getEvent(e){//打印出来的是点击对象  可以用来获取e.keyCode键码，或者位置等信息
                   console.log(e)
               },
               submit(){//按键按下的时候触发该事件  
                   console.log('enter')
               }
           }
   })

v-if --- v-show

用来控制元素的显示和隐藏 v-if='布尔值true/false'
区别：

• v-if通过控制dom (标签隐藏)
• v-show是通过控制样式（display:none）涉及大量操作DOM的时候 用v-show 涉及到异步数据渲染的时候就要使用v-if

        <p v-if='true'>v-if</p>
        <p v-show='isvisible'>v-show</p>

        <p v-if='type==="A"'>A</p>
        <p v-else-if='type==="B"'>B</p>
        <p v-else>not A/B/C/D</p>

使用vue和jquery控制dom的不同之处？

vue直接使用指令去进行操作页面上的 DOM元素

解决页面加载{{}}闪烁问题

写一个style样式
[v-click]{
display:none
}
然后给标签添加v-click指令就可以了