（.NET进阶五十）Vue技能进阶

vue技能进阶

一、v-bind及class与style的绑定

---

在vue中，DOM元素经常会动态地绑定一些class类名或style样式，其实现方式是通过v-bind指令来绑定class与style。

1. v-bind指令的理解

---

v-bind指令的主要用法是动态地去更新HTML上的属性，当数据发生变变化的时候，通过v-bind指令绑定的HTML元素的属性就会发生相应的更改。
在数据绑定中，最常见的绑定：

• 元素的样式名称class
• 内联样式style

在vue中，只需要使用v-bind指令计算出表达式的最终字符串就可以实现，当表达式的逻辑复杂的时候，使用字符串拼接的方式难以维护，vue就对class和style的绑定进行了加强。

2.绑定class

---

class的绑定方式包括多种：

• 对象语法
  给v-bind:class设置一个对象,就可以动态地切换class

<button :class="{'layui-btn':isLayuiBtn,'layui-btn-lg':isLargeBtn}">
 	这是一个按钮 
</button> 

var app = new Vue({ 
		el: '#app', 
		data: { 
			isLayuiBtn: false, 
			isLargeBtn: false, 
			} 
		})

• 数组语法
  当需要应用多个class的时候，可以使用数组语法，给 :class 绑定一个数组，就可以应用一个class列表

<button class="layui-btn" :class="[isDangerBtn?dangerClass:'',layuiSmallClass]">
	 这是一个Layui按钮 
</button> 

var app = new Vue({ 
		el: '#app', 
		data: { 
			dangerClass:'layui-btn-danger',
			layuiSmallClass:'layui-btn-sm', 
			isDangerBtn: true, 
			} 
		})

二、vue中内置指令的使用

---

指令是带有特殊前缀 v- 的HTML特性，可以绑定一个表达式，并将一些特性绑定在DOM上

1.v-if v-else-if v-else

---

vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素

<div id="app"> 
	<p v-if="status==1">当status为1时显示这里</p> 
	<p v-else-if="status==2">当status为2时显示这里</p> 
	<p v-else>否则显示这里</p> 
</div>

var app = new Vue({ 
		el: '#app', 
		data:{
			status:1 
			} 
		})

注意：
v-else-if 要紧跟 v-if , v-else 要紧跟 v-else-if 或 v-if 。表达式的值为真的时候，元素/组件及所有的子节点都会被渲染，为假的时候就移除

当需要一次判断多个元素的时候，可以在vue内置的 template元素上使用条件指令，最终的渲染结果将不会包括该元素

<div id="app"> 
	<template v-if="status==1"> 
		<p>这是一段文本</p> 
		<p>这是一段文本</p> 
		<p>这是一段文本</p> 
	</template> 
</div>

var app = new Vue({ 
		el: '#app', 
		data:{
		status:1 
		} 
	})

vue在渲染元素的时候，为了提升效率。尽可能的去复用已有的元素，而不是重新渲染。

<div id="app"> 
	<template v-if="type === 'name'"> 
		<label>用户名：</label> 
		<input placeholder="请输入用户名"> 
	</template> 
	<template v-else> 
		<label>邮箱：</label> 
		<input placeholder="请输入邮箱"> 
	</template> 
		<button @click="changInputStatus">切换登录方式</button> 
</div>

var app = new Vue({ 
		el: '#app', 
		data: { 
		type: 'name' 
		},
		methods: { 
			changInputStatus: function () { 
				this.type = this.type === 'name' ? 'phoneNumber' : 'name' 
				} 
			} 
		})

在上述示例中，键入内容后，点击切换按钮，虽然DOM变了，但是之前在输入框键入的内容并没有发生改变，只
是替换了placeholder中的内容，这说明 元素被复用了。
为了让每个元素都重新渲染，可以使用key来要求进行重新渲染，key的值必须唯一

<template v-if="type==='name'"> 
	<label>用户名：</label> 
	<input type="text" placeholder="请输入用户名" key="name-input"> 
</template> 
	<template v-else> 
		<label>邮箱：</label>. 
		<input type="text" placeholder="请输入邮箱" key="phone-input"> 
	</template> 
	<button @click="changeLoginType">切换登录方式</button>

• v-show
  v-show 的用法与 v-if 的用法基本一致，与 v-if 不同的是， v-show 只是改变元素的CSS属性display。当v-show 表达式值为false时，元素会被隐藏，查看DOM结构就会看到元素上加载了内联样式

<button class="layui-btn" v-show="isShow">这是一个按钮</button> 

var app = new Vue({ 
		el: '#app', 
		data:{
		isShow:true 
		} 
	})

2.v-for

---

当需要将一个数组遍历时,可以使用列表渲染指令v-for,这个指令需要结合in来进行使用,类似于item in的形式

<div id="app">
    <ul>
        <li v-for="book in bookList">
           书名:{{book.name}}
            价格:{{book.price}}元
        </li>
    </ul>
</div>

var app=new Vue({
    el:'#app',
    data:{
        bookList:[
            {name:'C#从入门到放弃',price:'50'},
            {name:'Java从看懂到看开',price:'40'},
            {name:'MySql从删库到跑路',price:'70'},
            {name:'C#从入门到放弃',price:'50'}

        ]
    }
})

在遍历对象属性的时候,有两个可选参数,分别是键名和索引

<ul>
    <li v-for="(value,key,index) in user">
        {{index}}-{{key}}:{{value}}
    </li>
</ul>

var app=new Vue({
    el:'#app',
    data:{
        user:{
            name:'苍老师',
            gender:'女',
            age:27
        }
    }
})

注意:
当vue使用v-for时正在更新已经渲染过的元素列表时,就会使用"就地复用"
如果数据项的顺序发生了改变,vue不会移动DOM元素来匹配数据的顺序,而是简单的复用元素.为了解决这个问题,需要为每个循环的项添加一个key进行识别

3.vue中的方法与事件

---

在vue 中,使用v-on指令绑定DOM的事件,可以在触发的时候执行对应的js

<div id="app">
    点击的次数:{{counter}}
    <button @click="handleClick()">+1</button>
    <button @click="handleClick(10)">+10</button>
</div>

var app=new Vue({
    el:'#app',
    data:{
        counter:0
    },
    methods:{
        handleClick:function (count) {
            count=count||1;
            this.counter+=count;
        }
    }
})

注意:
@click调用方法名后面可以不跟(),如果该方法有参数,默认把原生事件对象event传递过去,在大部分的应用场景中,如果方法不需要传递参数的话,一般不加括号

<div id="app">
    点击的次数:{{counter}}
    <button @click="handleClick()">+1</button>
    <button @click="handleClick(10)">+10</button>
    <a href="heep://www.baidu.com" @click="handleLinkClick('禁止跳转',$event)">
        跳转?
    </a>
</div>

var app=new Vue({
    el:'#app',
    data:{
        counter:0
    },
    methods:{
        handleClick:function (count) {
            count=count||1;
            this.counter+=count;
        },
        handleLinkClick:function(message,$event){
            event.preventDefault();
            window.alert(message);
        }
    }
})

三.vue中的表单与v-model

---

在web开发中,表单类控件承载了一个网页数据的录入与交互,在vue中,将使用v-model来完成表单的数据双向绑定。

1.基础用法

• 输入框的绑定

<div id="app">
    <input type="text" v-model="message" placeholder="请输入...">
    <p>输入内容是:{{message}}</p>
</div>

var app=new Vue({
    el:'#app',
    data:{
        message:''
    }
})

注意:
使用v-model指令后,表单控件显示的值只依赖与所绑定的数据,不在关心初始化时的vue属性

• 单选框

<div id="app">
    <input type="radio" value="html" v-model="picked" id="html">
    <label for="html">HTML</label>

    <input type="radio" value="js" v-model="picked" id="js">
    <label for="js">JS</label>

    <input type="radio" value="css" v-model="picked" id="css">
    <label for="css">CSS</label>
    <p>选择的项目为:{{picked}}</p>

</div>

var app=new Vue({
    el:'#app',
    data:{
        picked:'js'
    }
})

• 多选框

<div id="app">
    <input type="checkbox" value="html" v-model="checked" id="html">
    <label for="html">HTML</label>

    <input type="checkbox" value="js" v-model="checked" id="js">
    <label for="js">JS</label>

    <input type="checkbox" value="css" v-model="checked" id="css">
    <label for="css">CSS</label>
    <p>选择的项目是:{{checked}}</p>
</div>

var app=new Vue({
    el:'#app',
    data:{
        checked:[]
    }
})

• 下拉选

<div id="app">
    <select v-model="selected" id="">
        <option v-for="(option,index) in options"
                :value="option.value"
                :key="index">
            {{option.text}}
        </option>
    </select>
    <p>选中的值:{{selected}}</p>
</div>

var app=new Vue({
    el:'#app',
    data:{
        selected:'01',
        options:[
            {text:'HTML',value:'01'},
            {text:'JS',value:'02'},
            {text:'CSS',value:'03'}
        ]
    }
})