vue知识点

v-if是一个指令 条件渲染 控制元素的渲染不渲染
<目标元素 v-if=“变量或者表达式”></目标元素>
指令后面是变量或者表达式
v-show 可以控制元素的显示隐藏display none
不管显示还是隐藏元素都是存在
v-if 控制元素的渲染 v-if为假 该元素不会创建 直接控制div元素有还是没有（v-else v-elseif）
两个指令都可以控制一个元素的显示或者隐藏
事件绑定
使用vue中的事件
v-on+事件名=‘事件处理函数’ 事件名和原生js一样
onclick v-on：click
onblur v-on:blur
事件处理函数一定要写在实例 methods内部
默认参数（啥参数都不传参数）是事件对象
如果有其他参数 事件对象需要通过 $event手动传递简写方式v-onclick==@click@事件名：事件处理函数写在实例的配置项methods处理函数的默认参数是事件对象如果需要传递其他参数事件对象需要通过$event 手动传递
属性绑定
v-bind
元素的属性都是跟的固定的值
属性绑定可以实现 属性的后方跟变量或者表达式
v-bind：要绑定的属性名

src width height class id ....都叫属性 属性后面跟的是固定字符串 属性绑定让属性后面跟变量或者表达式 列表渲染 v-for 绑定一个标签 循环一个数据源 循环数组

<li v-if = 'item(循环数据的一项) in/of  要循环的数据' ></li>
<li v-for="(item（循环数据的每一项）,index（每一项的下标）) in lists">{{item}}{{index}}></li>

<li v-for="(value（对象的value值）,key（对象里的key），index（对象的下标）) in obj">{{key}}:{{value}}--{{index}}</li>

item就是数据当中的每一项

<div id="app">
<ul>
<li v-for="item in lists">{{item}}></li> 
</ul>
</div>

<script type="text/javascript">
let vm = new Vue({
el:'#app',
data:{
lists:['请回答1988','举重妖精','爱情公寓']
},
})
</script>

双向数据绑定
相当于 事件绑定v-on 和属性v-bind 集合体
将表单元素和data里的数据进行绑定 任何一方发生改变 另一方都会跟着变
v-model：是将input框的value 和 data里的数据进行绑定 相当于事件绑定和属性绑定的综合
叫双向数据绑定 可以绑定一个表单元素的value 修改表单元素的时候 data里的数据也会发生改变
v-model：是所有的表单元素都能用
自动聚焦指令
Vue.directive(‘指令名’，配置项)
使用自定义指令的时候 v-指令名
inserted 被指令绑定的元素 插入到真是dom的时候自动执行
1.通过Vue.directive 创建的指令就叫自定义指令
2.在所有的实例里都可以用
3.指令的创建要放到实例化的前方