Vue.js常用指令总结

一、v-html

转义输出，也就是可以解析 xml 数据

  1 <body>
  2     <div id="app">
  3         <p v-html="xml"></p>
  4         <p v-html="info"></p>
  5     </div>
  6 </body>
  7 <script src="../../lib/vue.js"></script>
  8 <script>
  9     new Vue({
 10         el: '#app',
 11         data: {
 12             info: 'NBA事件',
 13             xml: '<font style = "color: red;"> xml数据 <font>',
 14         }
 15     })
 16 </script>

效果：

二、v-text

非转义输出，也就是无法解析 xml 类型数据，v-text可以简写为{{}},并且支持逻辑运算

  1 <body>
  2     <div id="app">
  3         <p v-text="info"></p>
  4         <p v-text="xml"></p>
  5     </div>
  6 </body>
  7 <script src="../../lib/vue.js"></script>
  8 <script>
  9     new Vue({
 10         el: '#app',
 11         data: {
 12             info: 'NBA事件',
 13             xml: '<font style = "color: red;"> xml数据 <font>',
 14         }
 15     })
 16 </script>
 17

效果：

三、v-bind

v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。

格式： v-bind:attr = 数据

简写形式 :attr = 数据

  1 <body>
  2   <div id="app">
  3     <img v-bind:src="img" alt="">
  4     <img :src="img" alt="">
  5 
  6     <h3> 类名的绑定 - 对象形式 </h3>
  7       <p :class = "{size: true,red: redFlag,blue: blueFlag}"></p>
  8       <p class = "font" :class = "{size: true,red: redFlag,blue: blueFlag}"> Wset </p>
  9     <h3> 类名的绑定 - 数组形式 </h3>
 10       <p :class = "['size','red']"></p>
 11       <p :class = "[class1,class3]"></p>
 12 
 13     <h3> 样式的绑定 - 对象形式 </h3>
 14       <p :style = "{
 15         width: '100px',
 16         height: '100px',
 17         background: 'yellow'
 18       }"></p>
 19       <p :style = "styleObj1"></p>
 20     <h3> 样式的绑定 - 数组形式 </h3>
 21       <p :style = "[{
 22         width: '200px',
 23         height: '200px'
 24       },{
 25         background: 'purple'
 26       }]"></p>
 27       <p :style = 'styleObj2'></p>
 28       <a :href=" url "> 百度 </a>
 29     </div>
 30 </body>

四、v-model

双向数据绑定model和view中的值进行同步变化

  1 <body>
  2     <div id="app">
  3         <input type="text" v-model="msg">
  4         <p> {{ msg }} </p>
  5     </div>
  6 </body>
  7 <script src="../../../lib/vue.js"></script>
  8 <script>
  9     new Vue({
 10         el: '#app',
 11         data: {
 12             msg: 'Hello Vue'
 13         }
 14     })
 15 </script>

五、条件渲染

v-if

v-if指令。其作用就是根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）

v-else-if

v-else-if是在vue.js2.1.0中新增的，用作v-if的else-if块，可以链式的多次使用

v-else

使用 v-else 指令来表示 v-if 的“else 块”,但是必须紧跟在v-if或者v-else-if后面搭配一起使用

v-show（条件展示）

v-show指令是用来控制dom元素显示和隐藏的

v-if 和 v-show  
1. 效果看起来一样
2. 区别：
  v-if控制的是元素的存在与否
  v-show控制的是元素的display:none属性

频繁切换用  v-show，如果不是很频繁的切换，用 v-if

  1 <body>
  2     <div id="app">
  3         <h3> v-show </h3>
  4         <p v-show="f"> 昨天很累 </p>
  5         <h3> v-if - 单路分支 </h3>
  6         <p v-if="f"> 今天很嗨 - 放假了 </p>
  7         <h3> v-if - 双路分支 </h3>
  8         <p v-if="f"> A </p>
  9         <p v-else> B </p>
 10         <h3> v-if - 多路分支 </h3>
 11         <input type="text" v-model="type">
 12         <p v-if=" type == 'A' "> A </p>
 13         <p v-else-if=" type == 'B' "> B </p>
 14         <p v-else> C </p>
 15     </div>
 16 </body>
 17 <script src="../../lib/vue.js"></script>
 18 <script>
 19     new Vue({
 20         el: '#app',
 21         data: {
 22             f: true,
 23             type: 'A'
 24         }
 25     })
 26 </script>

六、v-for

用于渲染列表

列表渲染参数可以写三个，分别为 item key index列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识原因：key是唯一标识，删除列表某一项时，下一项不会继承被删项的样式。循环嵌套式，参数名称是可以一致的in / of 都可以使用

  1 <body>
  2   <div id="app">
  3     <ul>
  4       <li v-for = "(item,index) of arr" :key = "index">
  5         {{ item }} -- {{ index }}
  6       </li>
  7     </ul>
  8 
  9     <ul>
 10       <li v-for = " item in 10" > {{ item }} </li>
 11     </ul>
 12 
 13     <ul>
 14       <li v-for = "(item,key,index ) in obj" :key = "item.card">
 15         <p> item -- {{ item }} --  key -- {{ key }} -- index -- {{ index }}</p>
 16       </li>
 17     </ul>
 18 
 19     <ul>
 20       <li v-for = 'item in json' :key = "item.id">
 21         <h3> {{ item.type }} </h3>
 22         <ul>
 23           <li v-for = "brand in item.brands" :key = 'brand.id'>
 24             <p> {{ brand.type }} </p>
 25           </li>
 26         </ul>
 27       </li>
 28     </ul>
 29 
 30   </div>
 31 </body>
 32 <script src="../../lib/vue.js"></script>
 33 <script>
 34   /* movies 全局变量 */
 35   new Vue({
 36     el: '#app',
 37     data: {
 38       arr: [1,2,3,4],
 39       obj: {
 40         card: 1,
 41         name: 'huangfengfeng',
 42         age: 16,
 43         sex: 'man'
 44       },
 45       json: [
 46         {
 47           id: 1,
 48           type: '笔记本',
 49           brands: [
 50             {
 51               id: 1,
 52               type: '苹果'
 53             },
 54             {
 55               id: 2,
 56               type: '戴尔'
 57             },
 58             {
 59               id: 3,
 60               type: '联想'
 61             },
 62             {
 63               id: 4,
 64               type: '雷蛇'
 65             }
 66           ]
 67         },
 68         {
 69           id: 2,
 70           type: '手机',
 71           brands: [
 72             {
 73               id: 1,
 74               type: '华为'
 75             },
 76             {
 77               id: 2,
 78               type: '小米'
 79             },
 80             {
 81               id: 3,
 82               type: '联想'
 83             },
 84             {
 85               id: 4,
 86               type: 'vivo'
 87             }
 88           ]
 89         }
 90       ]
 91     }
 92   })
 93 </script>

七、v-on

v-on 指令用于绑定HTML事件

v-on:click = "方法名称" 简写为 @click = "方法名称"

事件处理程序我们都放在了methods选项中

  1 <body>
  2   <div id="app">
  3     <button v-on:click = "incremnt"> 点击 </button>
  4     <button @click = "incremnt"> 点击 </button>
  5     <p> {{ count }} </p>
  6   </div>
  7 </body>
  8 <script src="../../lib/vue.js"></script>
  9 <script>
 10   new Vue({
 11     data: {
 12       count: 0
 13     },
 14     el: '#app',
 15     methods: {
 16       incremnt () {
 17         this.count ++
 18       }
 19     }
 20   })
 21 </script>

  1  <button @click = "arguEventHandler( n,$event )"> 事件参数里面有事件对象 </button>

事件参数里有事件对象要用$event

发布自定义事件：

  1 var vm = new Vue({

定义事件：vm.$on( 事件名称，事件处理程序 )

触发事件：vm.$emit(事件名称，事件参数)

发布：

  1    vm.$on('aa',function ( val ) {
  2       console.log( 'aa' + val )
  3     })

Vue中：

  1  methods: {
  2       myEvent () {
  3         vm.$emit('aa',20000)
  4       },

触发：

  1 <button @click = "myEvent"> 自定义事件 </button>

或者：

  1 vm.$emit('aa', 100)

vm是一个全局变量，任何位置都能访问到，推荐使用

事件修饰符：

事件修饰符是用来修饰事件的，它的作用是更加便捷的来使用一些重复的代码,比如时间冒泡的阻止

.self：只能自己触发

  1  <div class="small" @click.self="smallHandler"></div>

按键修饰符：

用来修饰键盘事件

.enter（.13）:键盘回车

  1         <input type="text" @keyup.enter="getInputVal">
  2         <input type="text" @keyup.13="getInputVal">

八、v-pre

把标签内部的元素保留原格式输出

九、v-cloak

防闪烁

十、v-once

只加载一次，如果用到事件中就是事件只执行一次

十一、自定义指令

全局定义

Vue.directive( 指令名称, 指令的配置选项 )

每个选项中都有四个参数

bind: function (a,b,c,d){}当指令一写到dom元素中就触发了

inserted: function（elm,b,c,d）{}当指令绑定的dom元素插入到页面时就触发了

el就是插入到页面的元素

b为钩子函数

b里有修饰符

b.modifiers.stop（true或false）

通过修饰符控制触发某些事件

b里还有value值

b.value=’

c为vNode

d为oldVNode

  1     Vue.directive(指令名称, 指令的配置选项)
  2         /*  v-focus  */
  3     Vue.directive('focus', {
  4         /* 每一个选项中都有四个参数 */
  5         bind: function() { //当指令绑定到dom元素时触发
  6             console.log('bind')
  7         },
  8         inserted: function(el, b, c, d) { // 当指令绑定的dom元素插入页面时触发
  9             console.log("兵哥: el", el) //这个就是指令绑定的dom
 10             el.focus()
 11                 // el.style.background = 'red'
 12             console.log("兵哥: b", b)
 13             if (b.modifiers.stop) {
 14                 //true 
 15                 el.style.background = 'green'
 16             } else {
 17                 //false 
 18                 el.style.background = 'red'
 19             }
 20 
 21             el.value = b.expression
 22             console.log("兵哥: c  -  vNode", c)
 23             console.log("兵哥: d  - oldVNode", d)
 24         }
 25     })
 26

局部定义

  1 new Vue({
  2     el: '#app',
  3     data: {
  4       info: '焦点'
  5     },
  6     directives: {
  7       // 指令名称：选项
  8       'my-focus': {
  9         inserted: function ( el ) {
 10           el.focus()
 11         }
 12       }
 13     }
 14   })

posted @ 2019-10-21 20:42 大把小米阅读(444) 评论(2) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Vue.js常用指令总结

公告