vue入门 vue基础之简单使用3--指令集2

指令集：指令集是指指令的集合 ，而指令:凡是v-开头的都是vue指令
详细代码看最后

v-bind(属性绑定)

作用：动态绑定标签上的属性，当标签上的属性是变量，动态的，需要即时改变的，即可使用v-bind 。例如某个标签id名，类名是动态的，会进行变化，则可以使用这个

使用:
使用v-bind:xxx=“vue对象中data的key值”
也可以简写成:xxx=key值xxx是值

1.基本使用

------------------------html
        <!-- 此处绑定了data中key为pTest的值，即变成了ppppp-->     
         <p v-bind:id="pTest">sss</p> 
         <!-- 简写 -->
        <!-- <p :id="pTest">jjjj</p> -->
        <!-- 此处虽然也是绑定，但是在页面上会发现，id还是pTest,相当于未绑定-->
        <p v-bind:id="'pTest'">sss</p>
------------------------js
var vm= new Vue({
        el:"#app", 
        data:{
           pTest:"ppppp",
        }
        })

结果如图

2.表达式进行样式判断
例如通过三元运算

        <!-- 表达式进行样式判断 -->
        <p :class="showStyle?'p-style':''">jjjjjj</p>
        <!-- 简写 -->
        <p :class="{'p-style':showStyle}">jjjjjj</p>
------------------------js        
        var vm= new Vue({
        el:"#app", 
        data:{
           pTest:"ppppp",
        }
        })
-----------------------style
        .p-style{
            background-color:aquamarine;
            color:red;
        }

根据showStyle的值，来指定当前标签的类名
当showStyle为true时，当前标签的类名为p-style ，否则为空
showStyle为true时(此时绑定的类名为p-style)：

showStyle为false时(无指定类名):

3.多样式结合
可以通过v-bind绑定多个样式，用数组来包括

        <p :class="['p-style','bolder']">jjjjjj</p>
        <!-- 多样式判断并表达式结合版 -->
        <p :class="['bolder',showStyle?'p-style':'p-style2']">jjjjjj</p>
        <!-- 多样式判断并表达式结合,简写版 -->
        <p :class="['bolder',{'p-style':showStyle}]">jjjjjj</p>

其实与2的一致，只是多了数组来包含多个标签而已

4.样式绑定
这个时候，可以发现，所有的v-bind的简写，都是用键值对的方式来进行绑定。例如：

        <!-- <p :style="{color:'red'}">pppp</p> -->

5.综合实现

5.1 通过点击事件，变更标签颜色

        <p :style="{color:colorStyle}">我的颜色</p>
        <button @click="changeColor">我变色</button>
-------------js
 var vm= new Vue({
        el:"#app", 
        data:{
           colorStyle:"red"
        },
        methods:{
            changeColor(){
                this.colorStyle="blue"
            }
        }

5.2 更负责一点的变更

        <!-- 注意 v-bind中不识别横线"-",尤其是style中的横线，一般可以将其使用双引号括起来，或者将横线取消并下一个字母大写 -->
        <p :style="{color:colorStyle,'border-width':'1px',borderColor:'blue'}">我色色</p>
        <button @click="changeColor">我也来变色</button>
----------------js
 var vm= new Vue({
        el:"#app", 
        data:{
           colorStyle:"red"
        },
        methods:{
            changeColor(){
                this.colorStyle="blue"
            }
        }

v-model(数据绑定)

所谓数据绑定，其实就是完成双向绑定的效果
v-model可以处理input，textarea，select，radio，checkbox，button 该属性只能用在表单标签，或有valule属性的标签
1.不用v-model的双向数据绑定

<div id="app">
        <!-- 数据绑定的简单实现 -->
        {{msg}}
        <input type="text" :value="msg" @input="changeInput($event)">

        <!-- 使用v-model进行实现  只能修饰表单元素 -->
    </div>
 --------------------js
    <script>
        var vm= new Vue({
            el:"#app",
            data:{
                msg:"别理我"
            },
            methods:{
                changeInput(e){
                    this.msg=e.target.value;
                }
            }
        });
    </script>

以上代码中，在输入框中输入对应的数据时，普通标签上的数据会随时变更。这里的:value就是实时的与msg进行绑定
2. 使用v-model进行双向数据绑定
使用v-model即可完成1的操作

        {{msg}}
        <!-- 使用v-model进行双向绑定 v-bind无法进行双向绑定 -->
        <input type="text" v-model="msg"><br>
 --------------------js
            var vm = new Vue({
            el:"#app",
            data:{
                msg:"yyy",
            },

3.v-model进行联动变化
不管是输入,还是拖动，都会连带其他两个进行变化

        {{msg}}<br>
        <input type="text" v-model="range"><br>
        <input type="range" v-model="range">
  --------------------js       
                var vm = new Vue({
            el:"#app",
            data:{
                msg:"yyy",
                range:100
            },
            methods:{
                inputChange(e){
                    this.msg=e.target.value;
                }
            }
        })

至于v-model，还有其他深层次的使用
v-model指令后面跟的参数（number、lazy、debounce

v-once 单次渲染

v-once的意思就是，你可以渲染我，但是只能渲我一次

 <div id="app">
        <!-- v-once表示只渲染一次 -->
        <p v-once>{{msg}}</p><br>
        <input type="text" :value="msg" @input="changeEvent($event)">
        <input type="text" v-model="msg">
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{msg:"zengyu"
            },
            methods:{

            }
        });
    </script>

v-for 遍历

v-for的作用就是对数据(数组，对象，数组对象)进行遍历，提取出里面的值，

<!--item index 只是名称 ，可以根据自己的定义进行更改 例如obj,i 之类的 -->
            <li v-for="item in array">{{item}}</li>
            <！--v-for迭代数组时，第一个参数为对象，第二个为索引 -->
            <li v-for="(item,index) in objArray">{{item.name}}{{item.id}}--{{index}}</li> 
            
			<!-- v-for迭代对象时，第一个参数为对象属性的value，第二个为属性的key，第三个才是索引 -->
            <!-- <li v-for="(value,key,index) in obj">{{value}}-{{key}}--{{index}}</li>  有的时候会简写成k，v,i -->

			<!--指定次数循环-->
            <li v-for="item in 10">{{item}}</li>
-------------------js
   var vm= new Vue({
            el:"#app", 
            data:{
                count:1,
                msg:"zengyu",
                array:[1,1,3,4,5,78,9],
                objArray:[{
                    id:1,age:5,name:"jjj"
                },{
                    id:1,age:5,name:"ddd"
                },{
                    id:1,age:5,name:"ddd"
                },{
                    id:1,age:5,name:"jdddjj"
                },
                ],
                obj:{
                    name:"ZengYu",
                    age:10,
                    height:500
                }
            }
        });

源代码

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>v-bind</title>
    <style>
        .p-style{
            background-color:aquamarine;
            color:red;
        }
        .p-style2{
            background-color:rgb(229, 127, 255);
            color:blue;
        }
        .bolder{
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind的作用是绑定标签上的所有属性 -->
        <!-- 当标签上的属性是变量，动态的，需要改变的，即可使用v-bind -->
        <!-- 此处绑定了data中key为pTest的值，在页面中会发现，id变成了key所对应的value -->
        <!-- <p v-bind:id="pTest">sss</p> -->
        <!-- 此处虽然也是绑定，但是在页面上会发现，id还是pTest 其实就是相当于指定了一样-->
        <!-- <p v-bind:id="'pTest'">sss</p> -->
        <!-- 简写 -->
        <!-- <p :id="pTest">jjjj</p> -->

        <!-- 表达式进行样式判断 -->
        <p :class="showStyle?'p-style':''">jjjjjj</p>
        <!-- 简写 -->
        <p :class="{'p-style':showStyle}">jjjjjj</p>


        <!-- 多样式结合 -->
        <!-- <p :class="['p-style','bolder']">jjjjjj</p> -->
        <!-- 多样式判断并表达式结合版 -->
        <!-- <p :class="['bolder',showStyle?'p-style':'p-style2']">jjjjjj</p> -->
        <!-- 多样式判断并表达式结合,简写版 -->
        <!-- <p :class="['bolder',{'p-style':showStyle}]">jjjjjj</p> -->


        <!-- 样式绑定 -->
        <!-- 其实综合下来发现，不管是class还是style的绑定，都是以键值对的方式 -->
        <!-- <p :style="{color:'red'}">pppp</p> -->


        <!-- 简单实现 -->
        <p :style="{color:colorStyle}">我的颜色</p>
        <button @click="changeColor">我变色</button>

        <!-- 复杂点实现 -->
        <!-- 注意 v-bind中不识别横线"-",尤其是style中的横线，一般可以将其使用双引号括起来，或者将横线取消并下一个字母大写 -->
        <p :style="{color:colorStyle,'border-width':'1px',borderColor:'blue'}">我色色</p>
        <button @click="changeColor">我也来变色</button>
    </div>
    <script>
            var vm= new Vue({
        el:"#app", 
        data:{
           pTest:"ppppp",
           showStyle:false,
           colorStyle:"red"
        },
        mounted(){

        }
        ,
        methods:{
            changeColor(){
                this.colorStyle="blue"
            }
        }
    });
    </script>
</body>
</html>

v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model  v-cloak</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        [v-cloak]{
            display:none
        }
    </style>
</head>
<body>
    <!-- 在最外层加上v-cloak时，可以解决页面在未完全加载时{{msg}}会展示丑数据的问题
    v-cloak cloak披风，遮盖物 ，表示在延迟加载时，可以做出一些动作，掩盖一些行为 -->
    <div id="app" v-cloak>
        
        {{msg}}<br>
        
        <!-- 数据绑定的基本实现 event是固定写法 -->
        <input type="text" :value="msg" @input="inputChange($event)"><br>

        <!-- 使用v-model进行双向绑定 v-bind无法进行双向绑定 -->
        <input type="text" v-model="msg"><br>

        {{range}}<br>
        <!-- 使用v-model进行联动的变化 -->
        <input type="text" v-model="range"><br>
        <input type="range" v-model="range">

        <!-- 总结：v-model可以处理input，textarea，select，radio，checkbox，button 该属性只能用在表单标签，或有valule属性的标签-->
    </div>
    <script>
        // setInterval(() => {
        //     var vm = new Vue({
        //     el:"#app",
        //     data:{
        //         msg:"yyy",
        //         range:100
        //     },
        //     methods:{
        //         inputChange(e){
        //             this.msg=e.target.value;
        //         }
        //     }
        // });
        // }, 2000);
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"yyy",
                range:100
            },
            methods:{
                inputChange(e){
                    this.msg=e.target.value;
                }
            }
        })
    </script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>v-for</title>
</head>
<body>
    <div id="app">
        <ul>
            <!-- item index 只是名称 ，可以根据自己的定义进行更改 例如obj,i 之类的 -->
            <!-- <li v-for="item in array">{{item}}</li>
            <li v-for="item in objArray">{{item.name}}</li> -->
            <!-- v-for迭代数组时，第一个参数为对象，第二个为索引 -->
            <!-- <li v-for="(item,index) in objArray">{{item.name}}--{{item.id}}--{{index}}</li> -->

            <!-- v-for迭代对象时，第一个参数为对象属性的value，第二个为属性的key，第三个才是索引 -->
            <!-- <li v-for="(value,key,index) in obj">{{value}}-{{key}}--{{index}}</li>  有的时候会简写成k，v,i -->

            <!-- 指定循环 -->
            <li v-for="item in 10">{{item}}</li>

        </ul>
    </div>
    <script>
        var vm= new Vue({
            el:"#app", 
            data:{
                count:1,
                msg:"zengyu",
                array:[1,1,3,4,5,78,9],
                objArray:[{
                    id:1,age:5,name:"jjj"
                },{
                    id:1,age:5,name:"ddd"
                },{
                    id:1,age:5,name:"ddd"
                },{
                    id:1,age:5,name:"jdddjj"
                },
                ],
                obj:{
                    name:"ZengYu",
                    age:10,
                    height:500
                }
            },
            mounted(){

            }
            ,
            methods:{

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