5.Vue数据双向绑定

5.1.什么是双向数据绑定

Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。

5.2 怎么实现双向数据绑定

v-model
v-model 指令可以在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

注意:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

测试案例:

用非v-model方式的时候,是不能双向绑定的

		
	<div id="app">     
        <input type="text"  :value="msg"  />
        <div>{{msg}}</div>
    </div>
    
	 <script>
	     var app = new Vue({
	         el:'#app',
	         data:{
	            msg:"hello"
	         }
	     });
	 </script>
VUE数据双向绑定-小白菜博客

改为v-model方式绑定:

<div id="app">     
        <input type="text"  v-model="msg"  />
        <div>{{msg}}</div>
    </div>
    
	 <script>
	     var app = new Vue({
	         el:'#app',
	         data:{
	            msg:"hello"
	         }
	     });
	 </script>
VUE数据双向绑定-小白菜博客

案例2:

   <div id="app">
        <select v-model="selected">
            <option value="">--请选择--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="武汉">武汉</option>
        </select>
        <p>{{selected}}</p>
    </div>
     <script>
         var v= new Vue({
             el:"#app",
             data:{selected:'' }
         });
     </script>
VUE数据双向绑定-小白菜博客

案例3:

   <div id="app">
        <input type="checkbox" id="jack" value="吃饭" v-model="checkedValues">
        <label for="jack">吃饭</label>
        <input type="checkbox" id="john" value="睡觉" v-model="checkedValues">
        <label for="john">睡觉</label>
        <input type="checkbox" id="mike" value="打豆豆" v-model="checkedValues">
        <label for="mike">打豆豆</label>

        <div>选中的值: </div>
        <ul>
          <li v-for="item in checkedValues" >{{item}}</li>
        </ul>    
    </div>
    
    <script type="text/javascript">
    var v = new Vue({
        el: '#app',
        data: {
            checkedValues:[]
        }
    });
    </script>
VUE数据双向绑定-小白菜博客

6.Vue事件绑定

v-on
  v-on:事件名 = “方法名”
  简写方式: @事件名 = “方法名”
  事件名有哪些: click|keydown|keyup|mouseover|mouseout|自定义事件名

测试案例1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<div id="app">
			
			<input type="button" value="-"  v-on:click="sub" />
			<input type="text" v-model="num" />
			<input type="button" value="+" @click="plus" />
			
			
		</div>
		
		<script>
			
			var v=new Vue({
				
				el:"#app",
				data:{
					num:1
				},
				methods:{
					sub:function(){
						if(this.num>0)
						  this.num-=1;
					},
					plus:function(){
						this.num=parseInt(this.num)+1; 
					}
				}
				
			})
			
		</script>
		
	</body>
</html>

VUE数据双向绑定-小白菜博客
VUE数据双向绑定-小白菜博客

v-on: 可以简化为@

<div id="app">
	<input type="button" value="-" @click="sub" />
	<input type="text"  v-model="count" />
	<input type="button" value="+" @click="plus" />
</div>

测试案例2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		输入分数,按回车,显示等级
		
		<div id="app">
			
			<div>等级:{{level}}</div>
			
			<input type="text"  v-on:keyup.enter="show" v-model="score" />
			
		</div>
		
		
		 <script type="text/javascript">
	        var app = new Vue({
	            el: '#app',
	            data: {
	                level: '',
	                score:''
	            },
	            methods: {
	               
	                show: function () {
	                  if(this.score>=0 && this.score<60)
	                      this.level="D";
	                  else if(this.score<80)
	                      this.level="C";   
	                  else if(this.score<90)
	                      this.level="B";
	                  else
	                      this.level="A";
	                }
	            }
	
	        })
        </script>
		
		
	</body>
</html>

测试结果:

VUE数据双向绑定-小白菜博客

7.综合案例

根据前面学习的vue的基础语法和事件绑定,实现一下商品的查询,添加,删除功能。

测试案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div style="text-align: center;" >
            <div >
                <h3 >商品操作页面</h3>
            </div>
		 <div  style="text-align:center">
		                 序号:<input type="text"  v-model="id"/>
		                 名称:<input type="text"  v-model="name"/>
		                 价格:<input type="text"  v-model="price"/>
		      <input type="button" value="添加" @click="add()"/><br/>
		                   搜索:<input type="text" v-model="searchKey"/>
                
            </div>
        </div>
        <table style="width: 800px; margin-left: auto; margin-right: auto;" border="1">
            <header>
                <tr>
                    <td>序号</td>
                    <td>名称</td>
                    <td>价格</td>
                    <td>操作</td>
                </tr>
            </header>
        <tbody>
            <tr v-for="item in search(searchKey)" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <!-- .prevent阻止事件的默认行为,这里是阻止超链接默认的跳转功能-->
                <td><a href="" @click.prevent="del(item.id)">删除</a></td>
            </tr>
        </tbody>
      </table>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data:{
                id:'',
                name:'',
                searchKey:'',
                list:[
                    {id:1,name:'T恤',price:100},
                    {id:2,name:'西装',price:500},
                    {id:3,name:'连衣裙',price:200},
                    {id:4,name:'衬衫',price:150}
                ]
            },
            methods:{
                add(){
                	//将表单中的数据组装为一个商品对象
                    var good = {
                            id:this.id,
                            name:this.name,
                            price:this.price
                        };
                    //存入list中
                    this.list.push(good);
                    //将表单数据清空
                    this.id = this.name = this.price='';
                },
                del(id){
                	//遍历查询
                    var index = this.list.findIndex( item => {
                        if(id == item.id){
                            return true;
                        }
                    });
                    this.list.splice(index,1);//JavaScript中的splice(index,i)方法:从已知数组的index下标开始,删除i个元素
                },
                search(searchKey){
                	//filter() 方法创建一个新的数组,新数组中的元素是数组中符合条件的所有元素组合而成
                    return this.list.filter(item => {
                        if(item.name.includes(searchKey)){
                            return item;
                        }
                    });
                }
            }
        })
    </script>
</body>
</html>

测试结果:

VUE数据双向绑定-小白菜博客
VUE数据双向绑定-小白菜博客
VUE数据双向绑定-小白菜博客
VUE数据双向绑定-小白菜博客

8.Template 标签

template的作用是模板占位符,可帮助我们包裹元素,但在循环过程当中,template不会被渲染到页面上

比如:

<div v-for="value in user">{{value}}</div>

这个循环是做在div上面的,如果需要循环的内容很多,比如span标签也要做这个循环

<div v-for="value in user">{{value}}</div>
<span v-for="value in user">{{value}}</span>

则需要把循环提出来,但这样会多一个div标签

<div v-for="value in user">
    <div>{{value}}</div>
    <span>{{value}}</span>
</div>

如果不想多一个标签,可以用template,template不会渲染到页面上

<template v-for="value in user">
    <div>{{value}}</div>
    <span>{{value}}</span>
</template>

另外,template可以用到制作模板。

方法1:直接在vue对象中定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
   <!--这里会显示template里的内容-->
	<div id="app">
	   
	</div>
	
	<script>
	    var  v = new Vue({
	        el:"#app",
	        data:{
	            msg:"daimenglaoshi"
	        },
	        template:"<div>{{msg}}</div>"//模板中只能有一个根元素
	    });
	</script>
	</body>
</html>

方法2:写在template标签里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		
	<!--这里会显示template标签里的内容-->
	<div id="app"></div>
	
	<!--此处template标签必须在vue绑定的元素外面定义,并且在页面中不显示下面的template标签中的内容-->
	<template id="temp">
	    <div>{{msg}}<div>	  
	</template>
	
	<script>
	    let vm = new Vue({
	        el:"#app",
	        data:{
	            msg:"daimenglaoshi"
	        },
	        //通过该属性可以将自定义的template属性中的内容全部替换app的内容,并且会覆盖里面原有的内容,并且在查看dom结构时没有template标签
	        template:"#temp"
	      
	    });
	</script>		
	</body>
</html>

方法3:写在script标签里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>

	<div id="app"></div>
	
	<script type="x-template" id="temp">
       <div>{{msg}}</div>
   </script>
	
	<script>
	    var  v = new Vue({
	        el:"#app",
	        data:{
	            msg:"daimenglaoshi"
	        },
	        template:"#temp"//模板中只能有一个根元素
	    });
	</script>
	</body>
</html>