vue指令

#vue指令

显示和隐藏    DOM创建和  销毁( v-if ) ||   基于css样式的切换(display) v- show(适用于频繁性的切换)

布尔值 true

v-else判断条件

<h3 v-if='1!==1'>隐藏</h3><h3 v-if='1===1'>显示</h3>

判断插入<h3  v-if='isShow'> 在return  声明isShow  false

<button v- on:click='isShow = !isShow'>切换</button>

// v-html  v-if    v-else  v-else-if      v-on:click  简写@click

#vue响应式

模板  简洁渲染 

vue响应式 : 数据驱动视图 =>  vue响应式的原理

观察者 DOM节点 当变量发生变化的时候 我们去更更改变量数据就可以了 响应式驱动视图 页面             标签 数据 响应数据 data(){  } 的说明的里面那些  驱动当响应发生变化之后它会自动更改我们的视图 当我们点击页面按钮 更改响应数据的时候 就会变换

#vue指令

• 在vue 中提供了一些对于也面+数据的更为方便的输出.这些操作就叫做指令,以  v-xxx  表示

• 比如   htm   页面中的属性  <div v-xxx></div>

• 比如   angular  中 以  ng--xxx   开头的就叫做指令

• 在   vue   中 以 v-xxx   开头的就叫做指令

• 指令中封装了一些  DOM   行为,结合属性作为一个暗号,暗号有对应的值,根据不同的值,框架会进行相关 DOM  操作绑定

#vue指令演示

v-text :元素的textContent属性,必须是双标签跟{{ }} 效果是一样的 使用较少

v-html:元素的 innerHTML

v-if $ v-else-if $ v-else:判断时候插入这个元素,相当于对元素的销毁和创建

v-show 隐藏元素 如果确定要隐藏,给元素style加上display:none;是基于css样式的切换

v-bind:class 绑定元素属性 可以简写为:

v-for  循环 遍历 数组 或者 对象,注意 key  是惟一的

v-on:  原生事件名字,例如  v-on:click, v-on:mouseenter 等

v-model  双向数据绑定,只适应于表单控件,比如   input,textarea 等;

   相当于   v-bind:value  以及  v-on:change 事件的整合