vue.js常用的基本指令特性及其用法

基本指令

绑定数据 v-bind

• 绑定数据（表达式）到指定的属性上，<div v-bind:参数="值/表达式"></div>，这里的参数就是指定的属性名称。
• 缩写：:
• 用法

<div :id="myId"></div>

• 也可绑定样式
  css

.red {
    color: red;
}

.size {
    font-size: 50px;
}

html

<div :class="classes">
      color
</div>

js

classes:{
    red:true,
    size:false
}
//或者
classes:[
    "red","size"
],

• 也可以这样
  html

 <div :style="styleInfo">
      style
</div>

js

styleInfo: [{
                color: "red",
            },
            {
                fontSize: "50px"
            }]

事件绑定v-on

• 事件监听
• 缩写：@
• 用法：
• 第一种用法，data里声明变量，可直接改变变量值

{{num}}
<button @click="num++">click</button>

• 第二用法，事件传参，可以传event以外的参数

<button @click="handleClick('1',$event)">click</button>

• 1

methods:{
     handleClick(n,e){
        console.log(n);
        console.log(e);
        console.log("click");
    }
}

• 修饰符
  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - 只当点击鼠标左键时触发。
    .right - 只当点击鼠标右键时触发。
  • .middle -只当点击鼠标中键时触发。
  • .passive - 以 { passive: true } 模式添加侦听器

<button @click.once="num++">click</button>

双向绑定v-model

• 双向数据流，表单或者data值发生改变，都会变
• 用法：

 <input type="text" v-model="msg">

• 修饰符
  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为有效的数字
  • .trim - 输入首尾空格过滤

<input type="text" v-model.number="msg" />

条件渲染

• v-if
  • v-else-if
  • v-else
• v-show

  <div v-if="age === 18">花一样的年龄</div>
  <div v-else-if="age < 18">未成年</div>
  <div v-else>成年人</div>
  <div v-show="false">show</div>  // 不显示

• v-if与v-show的区别
  • v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
  • v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
  • 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

循环v-for

• 遍历数组
• 遍历对象
  • 2个参数 (Val,key)
  • 3个参数(val,key,index)
• 带有 v-for 的 <template>
  • 循环渲染一段包含多个元素的内容
• 用法：

<ul>
    <li v-for="(val,key,index) in list">
        {{index}}--{{val.name}}--{{val.age}}
    </li>
</ul>

带有key

 <ul>
       <li v-for="(item,index) in list" :key="index">
           {{index}}--{{item.name}}--{{item.age}}
       </li>
</ul>

key 属性，diff算法优化。默认情况下，在渲染 DOM 过程中使用 原地复用 ，这样一般情况下会比较高效，但是对于循环列表，特别是依赖某种状态的列表，会有一些问题，我们可以通过 :key 属性，来给每个循环节点添加一个标识，建立索引，快速遍历。

• v-for和v-if一起使用

<li v-for="(item,index) in list" :key="index" v-if="item.age > 30">
    {{index}}--{{item.name}}--{{item.age}}
</li>

只会显示符合条件的

渲染普通文本v-text

• 相当于插值
• 绑定的数据(更新)啥什么就渲染什么
• <span v-text="msg"></span>等价于<span>{{message}}</span>

解析数据v-html

• 用法：

<p v-html="message"></p>
......
var app = new Vue({
   el: '#app', 
   data: {
      message: '<strong>Hello</strong> Vue!',
   }
})
......