Vue知识点总结

表单输入绑定

1. 使用v-model在表单<input> <textarea> <select>元素上创建双向数据绑定。v-model负责监听用户的输入事件以更新数据。
2. v-model会忽略表单元素的value checked selected特性的初始值而总是将vue实例的数据作为数据来源。要通过js在组件的data选项中声明初始值。
3. v-model在内部为不同的输入元素使用不同的属性并且抛出不同的事件。
   （１）text和textarea元素使用value属性和input事件。
   （２）checkbox和radio使用checked属性和change事件
   （３）select字段使用value作为prop并且change作为事件。
   实例如下

//input元素，单行文本
<input v-model="message" placeholder="edit me">
<p>Message is:{{message}}</p>

//多行文本 textarea元素
<span>Multiline message is:</span>
//white-space:pre-line表示合并空格，识别换行符
<p style="white-space:pre-line">{{message}}</p>
//换行
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

//单个复选框，绑定到布尔值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
//实现点击选中方框的复选框，对应的值变成true布尔值，若点击取消选中复选框，则值变为false布尔值
//要注意的是label标签的for值要与input标签中的id值一致。

//多个复选框，绑定到同一个数组
//实现选中的复选框对应的值就进入到数组中，可以选０个、１个或者多个。
<div id="example">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="may" value="May" v-model="checkedNames">
<lable for="may">May</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>

new Vue({
	el:'#example',//与id值一致
	data:{
		checkedNames:[]
	}
})

//圆形单选框，实现多选一
<div id="example">
	<input type="radio" id="one" value="One" v-model="picked">
	<label for="one">One</label>
	<input type="radio" id="two" value="Two" v-model="picked">
	<label for="two">Two</label>
	<input type="radio" id="three" value="Three" v-model="picked">
	<label for="three">Three</label>
	<br>
	<span>Picked:{{picked}}</span>
</div>

new Vue({
	el:"#example",
	data:{
		picked:''
	}
})

//下三角箭头的选择框
<div id="example">
	<select v-model="selected">
	//点击选择框的下三角图标，出现几个待选项：请选择，A B C这四个，其中请选择这个选项是disabled，是不能选择的。
		<option disabled value="">请选择</option>
		<option>A</option>
		<option>B</opyion>
		<option>C</option>
	</select>
	<span>Selected:{{selected}}</span>
</div>

new Vue({
	el:"#example",
	data:{
		selected:''
	}
})

//类似上面的选择框，区别在于上面哪个只能选择一个选项，而这里是可以选择多个选项。多选的情况，和上面出现的多选情况一样的处理，绑定到数组上。
<div id="example">
	<select v-model="selected" multiple style="width:50px;">
		<option>A</option>
		<option>B</option>
		<option>C</option>
	</select>
	<br>
	<span>Selected:{{selected}}</pan>
</div>

new Vue({
	el:"#example",
	data:{
		selected:[]
	}
})

//用v-for渲染的动态选项
//实现在含有下三角的选择框选择某个选项后，那么就对应显示出与这个选择对应的值。是单选的情况。
<div id="example">
	<select v-model="selected">
		//{{option.text}}则选择框里面的选项就是option.text即one two three三个。而对应着text的value值会显示在选择框的右边，即文本内容显示出来，selected
		<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
	</select>
	<span>Selected:{{selected}}</span>
</div>

new Vue({
	el:"#example",
	data:{
		selected:'A',//初始值为A,后面就是在option.value里面切换选值
		options:[
			{text:'one',value:'A'},
			{text:'two',value:'B'},
			{text:'three',value:'C'}
		]
	}
})

值绑定

对于单选按钮、复选框、选择框的选项，v-model绑定的值通常是静态字符串，对于复选框也可以是布尔值。

<input type="radio" v-model="picked" value="a">
//当选中时“picked"为"字符串"a"

//复选框，toggle值为true或false
<input type="checkbox" v-model="toggle">

<select v-model="selected">
	<option value="abc">ABC</option>
</select>
//当选中第一个选项时，selected值为字符串'abc'

若把值绑定到vue实例的动态属性上，用v-bind实现，且这个属性的值可以不是字符串。

//单选按钮
<input type="radio" v-model="pick" v-bind:value="a">
//当选中时，vm.pick===vm.a

//选择框的选项
<select v-model="selected">
	<option v-bind:value="{number:123}">123</option>
</select>
//当选中时，typeof vm.selected=>'object',vm.selected.number=>123

Element UI

Element UI是一套采用vue2.0作为基础框架实现的组件库，帮助网站快速成型。

Element UI/组件/Radio单选框

要设置radio组件，只需要设置v-model绑定变量，选中意味着变量的值为相应的Radio label属性的值，label可以是string boolean number。格式如下：

<template>
	<el-radio v-model="radio" label="1">备选项</el-radio>
	<el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
	export default{
		data(){
			return{
				radio:'1"
			};
		}
	}
</script>

滑块组件

主要分为滑块轨道部分和滑块按钮这两部分，滑块轨道已经滑过的蓝色部分包括在滑块轨道内，滑块上方的数字是element的tooltip组件。滑块组件，鼠标按住滑块按钮拖动就可以滑动，点击滑块轨道也可以将滑块移动到指定位置。已经滑过的部分变成蓝色背景，这个div是绝对定位。滑块按钮也是绝对定位。滑块轨道是相对定位。改变蓝色部分的width来改变其长度。滑块按钮的位置由left确定，是百分比值。

v-bind指令

可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class表示v-bind指令作用于元素的class特性上。

v-on指令

用于给监听DOM事件，它的语法和v-bind是类似的，例如监听元素的点击事件：

<a v-on:click="doSomething">

有两种形式的调用方法，如下：

//第一种，click单击事件直接绑定到一个方法greet()
buton v-on:click="greet">Greet</button>

//第二种，click事件使用内联语句，Hi按钮调用Say()方法
<button v-on:click="Say('Hi')>Hi</button>

指令缩写

vue为最常用的指令v-bind和v-on提供了缩写。v-bind缩写为冒号，v-on缩写为＠。