Vue.js核心指令详解-优快云博客

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>

        <!--这是我们的View-->

        <div id="app">
            {{ message }}
        </div>

    </body>
    <script src="js/vue.js"></script>

    <script>

        // 这是我们的Model
        var exampleData = {
            message: 'Hello World!'
        }

        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model
        new Vue({
            el: '#app',
            data: exampleData
        })
    </script>
</html>

v-model  指令在表单元素上创建双向数据绑定。将message绑定到文本框，当更改文本框的值时，{{ message }}中的内容也会被更新。
        <div id="app">
            <p>{{ message }}</p>
            <input type="text" v-model="message"/>
        </div>

v-if    是条件渲染指令，它根据表达式的真假来删除和插入元素，v-if="expression"
        expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。
        <p v-if="yes">Yes</p>   
        <script>
            var vm = new Vue({
                 el: '#app',
                 data: {
                     yes: true
                     }
                 })
        </script>

v-show   也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
<a v-show="no">no</a>
no:false 输出 <a style="display:none">no</a>

v-else  指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

v-for   指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：

        v-for="item in items"
        items是一个数组，item是当前被遍历的数组元素。

         <tr v-for="person in people">
                        <td>{{ person.name  }}</td>
                        <td>{{ person.age  }}</td>
                        <td>{{ person.sex  }}</td>
                 </tr>  
         data: {
                    people: [{
                      name: 'Jack',
                          age: 30,
                      sex: 'Male'
                    }]
             }

v-bind   指令可以缩写为一个冒号    
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>    

v-bind   指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>

v-bind:class 来动态地切换 class

上述语法意味着，active 这个 class 的存在与否，取决于 isActive 这个 data 属性的 truthy 值

    v-bind:class 传入一个数组，来与 class 列表对应

        <div v-bind:class="[activeClass, errorClass]"></div>

        data: {
          activeClass: 'active',
          errorClass: 'text-danger'
        }
        会被渲染为：<div class="active text-danger"></div>

v-bind:style 的对象语法是非常简单直接的 - 看起来非常像 CSS，其实它是一个 JavaScript 对象。
CSS 属性名称可以使用驼峰式(camelCase)或串联式(kebab-case)（使用串联式需要加引号）

        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>    
        data: {                                         
            activeColor: 'red',                             
            fontSize: 30                                            
        }                                                

        <div v-bind:style="styleObject"></div>
        data: {
               styleObject: {
                    color: 'red',
                    fontSize: '13px'
                    }   
        }

所以 Vue 为如下所述的情况提供了一种方式：“这两个元素是完全独立的 - 请不要复用它们”。那就是为它们添加一个具有不同值的 key 属性

<template v-if="loginType === 'username'">
  <label>用户名</label>
  <input placeholder="请输入用户名" key="username-input">
</template>
<template v-else>
  <label>邮箱</label>
  <input placeholder="请输入邮箱" key="email-input">
</template>

<label> 元素仍然被有效地复用，因为它们没有 key 属性。

v-on指令可以缩写为@符号
    <button @click="deletePerson($index)">Delete</button>

v-on    指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：

        <a v-on:click="doSomething">

        有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。

        Greet按钮将它的单击事件直接绑定到greet()方法，而Hi按钮则是调用say()方法。

        <!--click事件直接绑定一个方法-->
                <button v-on:click="greet">Greet</button>   

         <!--click事件使用内联语句-->
                <button v-on:click="say('Hi')">Hi</button>

        // 在 `methods` 对象中定义方法
             methods: {
                   greet: function() {
                     // // 方法内 `this` 指向 vm
                      alert(this.message)
                    },
                   say: function(msg) {
                     alert(msg)
                    }
             }