Vue.js2.0基础-vue指令

    v-text='' 设置文本 
    v-html  设置元素的innerHTML
    v-on 为元素绑定事件  v-on:事件名='方法' 等于 @事件名
    v-show  根据表达式的真假 切换元素的隐藏与显示 v-show='表达式'
    v-if   操作dom元素
    v-bind  绑定title class 可省略,直接:方法=''
    v-for  (item,index) in 根据数据生成列表结构
    v-model 双向数据绑定  获取和设置表单元素的值	

<div id='app'>
	<h1>{{message}}</h1>
</div>

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

• v-text

<h2 v-text='message'></h2>

• v-html

<h3 v-html='content'></h3>

 // content: "<a href='http://www.baidu.com'>百度一下</a>",

• v-on

<input type="button" value="v-on指令" v-on:click='dolt'>
<input type="button" value="v-on简写" @click='dolt'>

// dolt: function() {
          alert('dd')
             },

• v-show

// 根据boolean值决定目标元素的css display
<h1 v-show='showCss' />

data:{
	showCss:true 
	//app.showCss = false
}

• v-if

// 操作dom元素 是否生成dom节点

• v-bind

  <img v-bind:src='imgsrc' alt=''>
  <img :title='imgTitle'>   简写方式 省略v-bind
  data:{
  	imgsrc:'https://baidu.com'
  	imgTitle:'vue-baidu'
	}
	
  // 绑定css样式,驼峰命名规则
 <img :style='cssStyles'>  1.绑定行内样式
 data:{
 	cssStyles:{
 		color:'red'
 		backgroundColor:'pink'
 	}
 }


// --------------------------------------------
<style>
	.active{......}
</style>
<img :class='isActive?"active":""' />  三元表达式
<img :class='{active:isActive}' />  根据isActive的值

data:{isActive:true}

• v-for

<li v-for='(item,index) in arr'>
      {{index+1}}:{{item}}
</li>

<li v-for='item in obj' :title='item.name'>
// :title='item.name' 数据的唯一性
    {{item}}
 </li>

data:{
	arr: ['we', 'you', 'he', 'her'],
	obj:[{ name: 'jack',
                    age: 12,
                    sex: 'man'},
                    {
                    name: 'rose',
                    age: 22,
                    sex: 'female'
                }]
}

• v-model

<input type="text" v-model='message' @keyup.enter='getMessage'>

getMessage:function(){
	alert(this.message)
}