VUE的系统指令

1. -text原样渲染,渲染文本

2.-html HTML渲染页面

举例:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<div id="content">

    {{ msg }}<!--一般渲染的时候,原渲染-->

    <div v-text = 'msg'></div><!--v-text还是原样渲染-->

    <div v-html = 'msg'></div><!--v-html  HTML渲染-->

</div>

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

<script>

    new  Vue({

        el:"#content",

        data () {

            return{

                msg:"<h2>alex</h2>"

            }

        }

    })

</script>

</body>

</html>

渲染结果:

<h2>alex</h2>

<h2>alex</h2>

alex

3.v-if 和 v-show

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box{

            width: 200px;

            height: 200px;

            background-color:red;

        }

        .box2 {

            width: 200px;

            height: 200px;

            background-color: green;

        }

    </style>

</head>

<body>

    <div id="content">

        {{ add(2,2) }}

        <button v-on:click='handlerClick'>隐藏</button><!--控制点击事件v-on:click-->

        <div class="box" v-show="is_show"></div>

        <div class="box2" v-if="is_show"></div>

        <div v-if="Math.random() > 0.5">

            有了

        </div>

        <div v-else>

            没了

        </div>

    </div>

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

<script>

    new Vue({

        el:"#content",

        data () {

            return{

                msg:"<h2>alex</h2>",

                num:1,

                is_show:true

            }

        },

        methods:{

            add(x,y){

                console.log(this.num);

                return x+y

            },

            handlerClick(){

                console.log(this);

                this.is_show = !this.is_show

        },

      }

    })

</script>

</body>

</html>

v-if 和 v-shoe

v-if 和 v-show的区别:

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

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

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

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

4.v-bind

v-bind

缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
修饰符：
- .prop - 被用于绑定 DOM 属性 (property)。
- .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
- .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
用法：

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

5.v-on

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

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。

从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box{

            width: 200px;

            height: 200px;

            background-color:red;

        }

        .active{

            background-color: green;

        }

    </style>

</head>

<body>

   <div id="app">

       <button @mouseenter = "handlerChange" @mouseleave = "handlerLeave">切换颜色</button>

       <img :src="imgSrc" :alt="msg">

       <div class="box" :class ='{active:isActive}'></div>

   </div>

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

<script>

    new Vue({

        el:"#app",

        data(){

            return{

                imgSrc:'1.jpg',

                isActive:true,

                msg:'美女',

            }

        },

        methods:{

            handlerChange(){

                // this.isActive =!this.isActive;

                this.isActive=false;

            },

            handlerLeave(){

                this.isActive=true;

            }

        }

    })

</script>

</body>

</html>

v-bind和v-on

6.v-for: v-for的优先级是最高的, diff算法

用法:基于元数据进行,渲染模板块或者元素,必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：

<div v-for="item in items">

  {{ item.text }}

</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>

<div v-for="(val, key) in object"></div>

<div v-for="(val, key, index) in object"></div>

v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：

<div v-for="item in items" :key="item.id">

  {{ item.text }}

</div>