指令
Vue
指令
组件
- 作用: 是用来操作DOM的,指令就是绑定在DOM身上的一个属性,这个属性具备一定的功能,这个功能用来操作DOM
- 以后我们不在像以前一样,先获取DOM,在操作了,我们现在可以直接使用指令来操作DOM
- 这个指令需要模板语法的支持,所以我们采用jsx语法糖
指令
-
格式:
v-xxx = “mustache语法”
v-xxx = “msg”
v-xxx = “{{msg}}” × -
v-html 将一个数据展示在一个DOM内容中, innerHTML( html属性 )
- 防止脚本攻击 xss CSRF
- v-bind 单项数据绑定
- 使用技巧: 凡是 DOM 的属性要和数据进行绑定,那么我们就可以使用 v-bind
- 格式: v-bind:DOMattr = “data”
- 简写: :DOMattr = “data”
-
v-text 非转义输出
-
条件渲染 v-if && v-show
条件渲染有两个指令, 一个是 v-if , 另外一个是 v-show
-
v-if 有三种使用形式
- 单路分支
- 双路分支
- 多路分支
-
v-show
-
- v-if 和 v-show 的区别
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
- 列表渲染
v-for 是用来做列表渲染的
- 格式
v-for = " xxx in(of) data "
<ul>
<li v-for = " item in arr "> {{ item }} </li>
</ul>
- 带参数的格式
<ul>
<li v-for = " (item,key,index) in obj ">
<p> item -- {{ item }} </p>
<p> key -- {{ key }} </p>
<p> index -- {{ index }} </p>
</li>
</ul>
8.事件
- 指令v-on
- 格式
v-on:eventType = “事件处理程序名称”
普通事件
3. 简写
@eventType = '事件处理程序名称'
```html
<button @click = 'normalHandler'> 普通事件-简写 </button>
- 事件
- 如果需要事件对象,在方法调用的时候,使用一个叫做 $event的作为实际参数
<button @click = "eventHandler"> 事件对象 </button> <button @click = "arguHandler( 10,20 )"> 事件传参 </button> <button @click = "arguHandler( a,b )"> 事件传参 </button> <button @click = "argu_event_handler( a,b,$event )"> 事件传参 - 事件对象 </button>
后续会持续更新methods: { normalHandler () { alert('普通事件') }, eventHandler ( e ) { console.log( e ) }, arguHandler ( a, b ) { alert( a + b ) }, argu_event_handler ( a,b,e) { console.log( e ) console.log( a + b ) } }