Vue知识点总结

表单输入绑定

1. 使用v-model在表单 <select></code>元素上创建双向数据绑定。v-model负责监听用户的输入事件以更新数据。</li> <li>v-model会忽略表单元素的value checked selected特性的初始值而总是将vue实例的数据作为数据来源。要通过js在组件的data选项中声明初始值。</li> <li>v-model在内部为不同的输入元素使用不同的属性并且抛出不同的事件。<br> （１）text和textarea元素使用value属性和input事件。<br> （２）checkbox和radio使用checked属性和change事件<br> （３）select字段使用value作为prop并且change作为事件。<br> 实例如下</li> </ol> <pre><code>//input元素，单行文本 <input v-model="message" placeholder="edit me"> <p>Message is:{{message}}</p> </code></pre> <pre><code>//多行文本 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">

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

   //多个复选框，绑定到同一个数组
   //实现选中的复选框对应的值就进入到数组中，可以选０个、１个或者多个。
   
   
   Jack
   
   John
   
   May
   
   
   Checked names:{{checkedNames}}
   
   
   new Vue({
   	el:'#example',//与id值一致
   	data:{
   		checkedNames:[]
   	}
   })
   

   //圆形单选框，实现多选一
   
   	
   	One
   	
   	Two
   	
   	Three
   	
   
   	Picked:{{picked}}
   
   
   new Vue({
   	el:"#example",
   	data:{
   		picked:''
   	}
   })
   

   //下三角箭头的选择框
   
   	
   	//点击选择框的下三角图标，出现几个待选项：请选择，A B C这四个，其中请选择这个选项是disabled，是不能选择的。
   		请选择
   		A
   		B
   		C
   	
   	Selected:{{selected}}
   
   
   new Vue({
   	el:"#example",
   	data:{
   		selected:''
   	}
   })
   

   //类似上面的选择框，区别在于上面哪个只能选择一个选项，而这里是可以选择多个选项。多选的情况，和上面出现的多选情况一样的处理，绑定到数组上。
   
   	
   		A
   		B
   		C
   	
   	
   
   	Selected:{{selected}}
   
   
   new Vue({
   	el:"#example",
   	data:{
   		selected:[]
   	}
   })
   

   //用v-for渲染的动态选项
   //实现在含有下三角的选择框选择某个选项后，那么就对应显示出与这个选择对应的值。是单选的情况。
   
   	
   		//{{option.text}}则选择框里面的选项就是option.text即one two three三个。而对应着text的value值会显示在选择框的右边，即文本内容显示出来，selected
   		{{option.text}}
   	
   	Selected:{{selected}}
   
   
   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绑定的值通常是静态字符串，对于复选框也可以是布尔值。

   
   //当选中时“picked"为"字符串"a"
   

   //复选框，toggle值为true或false
   
   

   
   	ABC
   
   //当选中第一个选项时，selected值为字符串'abc'
   

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

   //单选按钮
   
   //当选中时，vm.pick===vm.a
   

   //选择框的选项
   
   	123
   
   //当选中时，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。格式如下：

   滑块组件

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

   v-bind指令

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

   v-on指令

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

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

   //第一种，click单击事件直接绑定到一个方法greet()
   buton v-on:click="greet">Greet
   
   //第二种，click事件使用内联语句，Hi按钮调用Say()方法