今天开始啃VUE（二）

今天开始啃VUE（二）

隔几天码一点

8、指令的缩写

v-bind的缩写

v-bind:arrtName='data'  => :attrName='data'

v-on的缩写

v-on:click='onClick'  => @click='onClick'

缩写不影响使用，采用都是规范符号，且看起来更加具有框架特点

9、vue属性

目前看到的几个属性：

var vue9 = new Vue({
	//对象属性,获取数据绑定的对象，绑定用css选择器
	el:'#vue9',
	//计算属性，集中声明计算方法
	computed:{
		sum:function(){
	        //函数体
	        }
		},
	//数据属性，数据内容的储存处
	data:{
		num:'numValue'，
		},
	//事件属性，事件对象的集合，一般都是采用函数作为事件对象内容来调用
	methods:{
		onClick:function(){
	        //函数体
	    },
	//监听器
	match:{
		qusetion:function(){
			//函数体
	    },
})

10、语法

（一）对象语法

数据是传入对象，可以是一个值，也可以是多值，多值时用数组。
当绑定对象是class属性的时候，对象值可以和原class值共存。

<div v-bind:class='[cla1,cla2]' class='oldClass'></div>

（二）数组语法

对象内容可以传入数组，数组的内容也可以是对象、方法，还可以传入表达式，最终获得的值为表达式结果，当然，也可以传入三元表达式

<div v-bind:class='[isActive?active:errorClass]' class='oldClass'></div>

（三）内联语法

可以通过绑定对象数据传值来获取元素属性内容，不过也可以直接在元素标签内部直接为元素提供样式数据（虽然不太推荐）
用对象来写CSS样式的时候，样式名采用驼峰法或下划线法
内联语法可以直接写入属性值，也可以把属性绑定到vue数据中

<div v-bind:style='{color:activeColor,fontSize:fontSize+'px'}  class='oldClass'></div>

（四）兼容语法

一些不同浏览器需要添加前缀的属性，在vue语法中可以省略前缀。这些特定的属性在vue中可以兼容

11、条件渲染（控制流）

vue的控制流指令

v-if指令

指令表达式返回truthy值时执行渲染

v-else指令和v-else-if指令

可添加更多条件指令块，但必须跟在v-if后使用
还可以结合template进行指令的切换交替使用。