Vue入门：常用的指令

Vue本身是一款非常优秀的前端框架,通过简洁的API提供高效的数据绑定和灵活的组件系统,其核心思想是 “数据驱动的组件系统”。Vue在进行进行插值处理和 绑定表达式时使用了一种叫Mustache模版引擎。Mustache是常见的Web模板引擎中的一种

Vue的常用指令

1、v-once：元素或组件只渲染该一次

mustache插值不会根据data的变化而变化,告诉浏览器的Vue编译器，只渲染该元素或组件一次

 

2、v-html：mustache输出真正的 HTML

<div v-html="url"></div>
data:{
     url:'<a href="www.baidu.com">百度</a>'
}

 

3、v-text：渲染普通文本

用于渲染普通文本，无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新

<span v-text="message"></span>
const app=new Vue({
        el:"#app",
        data:{
            message: "这里可以包含html标签"
        }
})

如果只是单独展示Vue对象里的数据，建议使用“v-text”指令，v-text解决差值表达式闪烁问题

 

4、v-pre：原封不动的输出data的msg数据，不做任何解析

<span v-pre>{{msg}}</span>

 

5、v-cloak：解决屏幕闪动的问题

HTML：
<div id="app" v-cloak>
    {{context}}
</div>

CSS：
[v-cloak]{
    display: none;
}

 

6、v-bind：动态绑定属性

<a v-bind:href="url"></a>     <!-- 完整语法 -->
<a :href="url"></a>     <!-- 缩写 -->

如果是绑定函数必须要加上()

<li :class="listData()">绑定函数</li>

 

7、v-on：点击事件

<a v-on:click="doSomething"></a>     <!-- 完整语法 -->
<a @click="doSomething"></a>     <!-- 缩写 -->

如果不需要传参数，绑定函数可以不加上()

<button @click="add">+</button>

 

8、v-if

（1）v-if 指令用于条件性地渲染一块内容，你可以使用 v-else 指令来表示 v-if 的“else 块”。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

注：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

（2）用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。

<div id="app">
    <span v-if="isUser">
        用户：<input type="text" id="name" placeholder="用户" key="name">
    </span>
    <span v-else>
        密码：<input type="text" id="pew" placeholder="密码" key="pew">
    </span>
    <button @click="isUser = !isUser">提交</button>
</div>

const app = new Vue({
    el:"#app",
    data:{
        isUser:true,
    },
});

input添加了 key 属性区分，使这两个元素是完全独立的，不要复用它们；即每次切换时，input都将被重新渲染，其他元素仍然会被高效地复用

（3）我们不推荐在同一元素上使用 v-if 和 v-for

<li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo }}
</li>

 

9、v-show

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

注意：v-show 不支持 <template> 元素，也不支持 v-else。

v-if 和v-show区别：

（1）v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

（2）一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 

10、v-for

 （1）v-for 指令基于一个数组来渲染一个列表

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

（2）在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

（3）v-for还可以有第三个参数作为索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }

注：value:值，name:键，index:下标

（4）你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

（5）为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：

<div v-for="item in items" v-bind:key="item">
  {{item}}
</div>

data: {
    items: ['a','b','c']
  }

注： key值是唯一，不可重复 ；推荐v-for都加上 key，不推荐key="index"

 

11、过滤器

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在 双花括号 中 -->
<h3>{{price | createPrice}}</h3>
<!-- 在 `v-bind` 中 -->
<div v-bind:id="price | createPrice"></div>

data:{
    price:12,
},
filters:{
    createPrice(value){
        return value.toFixed(2);
    }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('createPrice', function (value) {
    return value.toFixed(2);
})
const app = new Vue({})

注：全局过滤器要在app前面才有效

 

12、计算属性

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

示例：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})

vm.aPlus   //输出：2
vm.aPlus = 3//执行set函数
vm.a       //输出：2
vm.aDouble //输出：4

methods和computed（计算属性）区别

（1）计算属性只能当作属性用，不能带参数，有缓存，效率高

（2）方法可以直接调用，可带参数，没有缓存，每次调用都会执行，效率不如计算属性高。

 

13、v-model：双向数据绑定

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

1、v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

（1）text 和 textarea 元素使用 value 属性和 input 事件；例如：

<div id="app">
    <label for="name">
        <!--input事件：这里只要改动，就触发newValue-->
        用户：<input type="text" id="name" v-model="user" @input="newValue">
        <!--value属性-->
        <input type="text" :value="user" @input="newValue">
    </label>
    <h3>{{user}}</h3>
</div>

data:{
    user:"",
},
methods:{
    newValue(event){
        //动态input获取的值
        console.log(event.target.value);
    }
}

（2）checkbox 和 radio 使用 checked 属性和 change 事件；

（3）select 字段将 value 作为 prop 并将 change 作为事件。

2、修饰符

（1）lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

（2）number

用户输入的值默认是String，如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

（3）trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

3、v-model和v-bind

　　3.1、vue绑定数据有三种方式：

　　（1）插值，也就是{{name}}的形式，以文本的形式和实例data中对应的属性进行绑定

　　（2）v-bind：

　　（3）v-model：

　　3.2、区别：

　　（1）v-bind和“{{}}”（mustache插值）只是单向变动，v-model是双向绑定

　　（2）绑定的类型不同：

　　　　v-model： <input>、<textarea> 及 <select> <input>、<textarea> 及 <select>

　　　　v-bind支持的类型：html中的属性、css的样式、对象、数组、number 类型、bool类型

 

 

vue官网：https://cn.vuejs.org/v2/guide/forms.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model