Vue.js指令-优快云博客

1. v-bind ！！！！动态地绑定一个或多个特性，或一个组件 prop 到表达式。

用法：v-bind:属性 = “变量或表达式”

简写： :属性 = “变量或表达式”

  <!-- 鼠标悬停几秒钟查看此处动态绑定的提示信息！ -->
    <div id="box">
        <!-- <span v-bind:title="message">
            动态绑定
        </span> -->
        <!-- 简写： -->
        <span :title="message">
            动态绑定
        </span>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                message:'页面加载于'+ new Date().toLocaleString()
            }
        })
    </script>

2. v-for

循环要绑定v-bind:key 区分列表里的每一项，标识组件的唯一性。

说明：https://www.jianshu.com/p/4bd5e745ce95

a：遍历数组

<div id="box">
        <ol>
            <todo-item
            v-for = "item in groceryList"
            v-bind:todo="item"
            V-bind:key="item.id"
            ></todo-item>
        </ol>
    </div>
    <script>
        Vue.component('todo-item', {
            props:['todo'],
            template:'<li>{{ todo.text }}</li>'
        })
        var vm = new Vue({
            el:"#box",
            data:{
                groceryList:[
                    {id:0, text:'yi'},
                    {id:1, text:'er'},
                    {id:2, text:'san'},
                ]
            }
        })
    </script>

b：遍历字符串

<ul>
    <li v-for="n in a">{{n}}</li>
</ul>

c：遍历数字

<ul>
    <li v-for="n in 20">{{n}}</li>
</ul>

d：遍历对象

在这里插入图片描述

3. v-if 条件是假值就直接消失，是真就渲染

v-show 条件是假值就display:none

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

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

4. v-on:事件的名字 = “事件处理函数”

事件处理函数放在methos里面，可以简写为@

v-on: === @

5. v-model 双向绑定指令数据变了视图会变，视图变了数据也变

想当与v-bind和v-on的结合

修饰符：

.lazy - 取代 input 监听 change 事件失去焦点时触发
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤

v-model修饰符,input的type="text"默认是字符串连接 
    <div id="box">
        <input type="text" v-model.number.lazy="a">
        <input type="text" v-model.number.lazy="b">
        {{a+b}}
        <input type="number" v-model.number.lazy="a">
        <input type="number" v-model.number.lazy="b">
        {{a+b}}
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                a:0,
                b:0
            }
        })
    </script>

6.绑定class：v-bind:style="{‘key’: '值或表达式 '}"

<span v-bind:style="{'color':visible?'red' : 'green'}">{{str}}</span>
<span v-bind:class="{'change':visible}">{{str}}</span>

语法一：v-bind:class="{类名1:布尔表达式,类名2:布尔表达式....}"
语法二： :class=“['类名1','类名2'....]”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .change{
            color: red
        }
    </style>
</head>
<body>
    <div id="box">
        v-bind绑定style和class<br> 
        <input type="checkbox" v-model="visible">
        <!-- <span v-bind:style="{'color':visible?'red' : 'green'}">{{str}}</span> -->
        <!-- <span v-bind:class="{'change':visible}">{{str}}</span> -->
        <span v-bind:class="[{'change':visible}]">{{str}}</span>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                str:"里面变化的字",
                visible:true
            }
        })
    </script>
</body>
</html>