Vue--指令系统

十、Vue起步引用和双大括号插值

十一、小结（略）

十二、指令系统之v-text和v-html

十三、指令系统之v-if和v-show

十四、指令系统之v-for

十五、指令系统之v-bind

十六、指令系统v-if和v-on结合

十七、指令系统v-bind和v-on结合

十八、指令系统之轮播图的实现

十九、v-model的双向数据绑定

二十、双向数据绑定的实现

二十一、v-bind和v-on简写以及指令系统总结

vue中的$mount和el两者在使用中没有什么区别，都是将实例化后的vue挂载到指定的DOM元素中

用法：

如果在实例化vue时指定el，则该vue将会渲染在el对应的DOM中

反之没有指定el，则vue实例会处于一种“未挂载”的状态，此时通过$mount来手动执行挂载

new vue时候$mount和el并没有什么本质上的不同

new Vue({}). $mount("#app") 等价于 new Vue({{ el:"#app" })

十、Vue起步引用和双大括号插值

先进入项目的目录
执行`npm init` 或 `npm init --yes`
执行`npm install vue --save` //下载Vue到当前目录 // 或指定版本`npm install vue@1.0.1 --save`

<body>
<div id="app">
    <h3>{{ msg }}</h3>
    <h3>{{ msg + '哈哈' }}</h3>
    <h3>{{ 1>1? 'true':'false' }}</h3>
</div>
<!--1.引包-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 2.创建vue实例化对象,构造函数Vue，传参是一个对象
    var app = new Vue({
        el: '#app',//目的地
        //data也是一个对象
        // 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。
        // 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
        // 数据驱动视图
        data: {
            msg: 'Hello Vue!'
        }
    });
    console.log(app);
    //在vue实例化对象之后，这个对象中属性前面默认有$符号，
    // 主要是跟我们自己定义的属性进行区分
    // app.$el === document.getElementById('app') 为真
</script>
</body>

输出结果：

十一、小结（略）

十二、指令系统之v-text和v-html

指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，
根据不同的值，框架会进行相应的DOM操作的绑定

指令系统用的值必须是data中的

<body>
<div id="app">{{msg}}
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            msg: '测试msg',
            msg2: '<a href="#">测试msg2</a>'
        },
        template:'<div>' +
            '<h3>{{ msg }}</h3> ' +
            '<h2 v-text="msg2"></h2> ' +
            '<p v-html="msg2"></p> ' +
            '</div>'
    });
</script>
</body>

输出结果：

结论：

1、template的优先级比el高

2、v-text等价于{{ }} 实现原理：innerText

3、v-html实现原理：innerHTML

十三、指令系统之v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            isShow:false,  //为true时展示box和box1，略
        },
        template:'<div>' +
            '<div class="box" v-if="isShow"></div> ' +
            '<div class="box1" v-show="isShow"></div> ' +
            '</div>'
    });
</script>
</body>
</html>

展示结果：

isShow=true时，红、蓝盒子都可见。前端代码略

isShow=false时，红、蓝盒子都不可见

前端代码：

<div>

</div>

结论：

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

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

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

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

补充：还可以使用v-if + v-else

<body>
<div id="app">
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {

        },
        template:'<div>' +
            '<div class="box" v-if="Math.random()>0.5">大于0.5</div> ' +
            '<div class="box1" v-else>小于等于0.5</div> ' +
            '</div>'
    });
</script>
</body>

十四、指令系统之v-for

后台返回的数据比较多
会保存数组或对象形式，如何遍历？

<li v-for="(item,index) in menuList"> 必须item在前，index在后

注意：在组件prop传值后遍历的时候要加key：<li v-for="item in list" :key="item.id">

<body>
<div id="app">
    <ul>
<!--        不要索引就是：v-for="item in menuList"-->
        <li v-for="(item,index) in menuList">
            <h3>车型{{index}}：{{item.name}}</h3>
            <p>价格：{{item.price}}</p>
        </li>
    </ul>

    <ul>
        <li v-for="(value,key) in object">
            {{key}}--{{value}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            menuList:[
                {id:1,name:'Q7',price:80000},
                {id:2,name:'卡宴',price:100000},
                {id:3,name:'途观',price:50000},
            ],
            object:{
            name:'alex',
            age:'19',
            fav:'喜欢av'
            },
        },

    });
</script>
</body>
</html>

输出结果：

十五、指令系统之v-bind

v-bind进行标签的属性绑定，所有的属性都可以进行绑定
注意，只要使用了v-bind后面的字符串一定是数据属性中的值

语法：v-bind:属性名="变量名||对象{}||数组[]" 。也可以省略v-bind,直接 :属性名...

为对象的时候：只是c1,c3生效：class="{c1:true, c2:false, c3:true}"

为数组的时候：class="c1 c2 c3"

<body>
<div id="app">
    <a v-bind:href="href">谷歌</a>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            href:"www.google.com.cn"
        },

    });
</script>
</body>

十六、指令系统v-if和v-on结合

v-on可以为对象，给dom元素绑定多个事件

v-if 和 v-on 结合可以实现 “点击按钮显示隐藏效果”

vue中使用v-on:click对当前DOM绑定click事件
注意：所有原生js的事件使用v-on都可以绑定

v-on:click 可以简写为@click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>{{msg}}</h3>
<!--    <div class="box" v-on:click="count+=1">{{count}}</div>-->
<!--    <div class="box" v-on:click="isShow=false" v-if="isShow"></div>-->
<!--    <div class="box" v-on:click="showHandler" v-if="isShow"></div>-->
    <button v-on:click="showHandler">{{btnText}}</button>
    <div class="box" v-if="isShow"></div>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        //data可以是对象，也可以是一个函数
        //但在组件中，data必须是一个函数，内部一定返回一个对象
        data() {
            return{
                msg:'事件处理',
                count:0,
                isShow:true,
                btnText:'隐藏'
            }
        },
        //在vue中所有的事件都声明在methods
        methods:{
            showHandler(){
                //this就是vue实例化对象 app
                // this.isShow = false;

                // if(this.isShow){
                //     this.isShow = false;
                //     this.btnText = '显示';
                // }else {
                //     this.isShow = true;
                //     this.btnText = '隐藏';
                // }

                this.isShow = !this.isShow;
            }
        }
    });
</script>
</body>
</html>

十七、指令系统v-bind和v-on结合

v-bind:class和v-on对页面中DOM的样式切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .isGreen{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .active{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="app">
    <button v-on:click="changeColor">切换颜色</button>
    <div class="isGreen" v-bind:class="{active:isYellow}"></div>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return{
                isYellow:false
            }
        },
        methods:{
            changeColor(){
                this.isYellow = !this.isYellow;
            }
        }
    });
</script>
</body>
</html>

十八、指令系统之轮播图的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
<div id="slider">
    <img v-bind:src="currentSrc">
    <ul>
        <li v-for="(item,index) in imgArr"
            v-on:click="clickHandler(index)"
            v-bind:class="{active:currentIndex==index}">
            {{index+1}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var imgArr=[
        {id:1,imgSrc:'./image/1.jpg'},
        {id:2,imgSrc:'./image/2.jpg'},
        {id:3,imgSrc:'./image/3.jpg'},
        {id:4,imgSrc:'./image/4.jpg'},
    ];

    var app = new Vue({
        el: '#slider',
        template:'',
        data() {
            return{
                imgArr:imgArr,
                currentIndex:0,
                currentSrc:"./image/1.jpg",
            }
        },
        methods:{
            clickHandler(index){
                this.currentIndex = index;
                this.currentSrc = this.imgArr[index].imgSrc;
            }
        }
    });
</script>
</body>
</html>

效果：

十九、v-model的双向数据绑定

双向数据绑定的不用v-model的实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <input @input="inputHandler" />
            <div>{{value}}</div>
        </div>
    </body>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var app =  new Vue({
            el: '#app',
            data:{
                value:null
            },
            methods:{
                inputHandler:function(event){
                    this.value = event.target.value
                }
            }
        });
    </script>
</html>

双向数据绑定实现-不用v-model

v-model只允许在表单控件中使用
input textarea select标签等（因为这些标签都有value属性）

<body>
<div id="app">
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        template:'',
        data() {
            return{
                msg:'',
            }
        },
    });
</script>
</body>

二十、双向数据绑定的实现

<body>
<div id="app">
    <input type="text" :value="msg" @input="inputHandler">
    <p>{{msg}}</p>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        template:'',
        data() {
            return{
                msg:'alex',
            }
        },
        methods:{
            inputHandler(event){
                this.msg = event.target.value;
            }
        }
    });
</script>
</body>

二十一、v-bind和v-on简写以及指令系统总结

简写：

v-bind:src 等价于 :src

v-on:click 等价于 @click

-------------------------------

v-text / v-html / {{}}：对页面的DOM进行赋值运算，innerText innerHTML

v-if: document.createElement appendChild removeChild

v-show: dom.style.display='block'/'none'

v-bind: dom.setAttribute('type', 'variable') 使用v-bind后使用变量，不使用v-bind用的是常量

v-on: dom.click=function(){}