#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 事件的整合