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指令就可以了
