Vue学习【1】

Vue官网代码（Vue官网）

<div id="app">
  {{ message }}
</div>

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

el：挂载点

• 选择器类型：id、class、标签选择器
• 作用范围为命中的元素内部
• 不能挂载到body、html上，挂载到其他双标签

data：数据对象

• 可以写复杂类型对象

Vue指令（v-开头特殊语法）

1. 内容绑定，事件绑定
2. 显示切换，属性绑定
3. 列表循环，表单元素绑定

• v-text 设置文本
  会覆盖内部全部内容

<div id="#app">
	<h2 v-text="message"></h2>
</div>

可以使用字符串拼接增加内容

<div id="#app">
	<h2 v-text="message+'!'"></h2>
	<h2>{{ message + '!' }}</h2>
</div>

• v-html 设置标签的innerHTML
  普通文本与v-text无差别，可以解析html结构

<div>
	<p v-html="content"></p>
</div>

var app = new Vue({
	al:"#app"
	data:{
		content:"<a href="...">...</a>"
	}
})

• v-on 绑定事件
  可以使用v-on也可以使用@表示
  vue着重更改数据，不用修改DOM元素

<div>
	<input type="button" value="事件绑定" v-on:click="dolt">
	<input type="button" value="事件绑定" v-on:monseenter="dolt">
	<input type="button" value="事件绑定" v-on:dbclick="dolt">
	<input type="button" value="事件绑定" @dbclick="dolt">
	<h2 @click="change">{{ msg }}</h2>
</div>

var app = new Vue({
	el:"#app"
	data:{
		msg:'柿子炒鸡蛋'
	}
	method:{
		dolt:function(){
			//逻辑

		}
		change:function()
		  this.msg+="好好吃!"
		}
	}
})

• v-show 根据表达式的真假，切换元素的显示和隐藏。
  标签一直都在，只是布尔值为false时增加了display:none属性，操作的是样式。
• v-if 根据表达式的真假，切换元素的显示和隐藏（操纵DOM元素）。
  布尔值为false时，标签消失，操作的是DOM元素。
• v-bind 设置元素的属性（比如：src，title，class）

<div id="app">
	<img v-bind:src="imgSrc">
	<img v-bind:title="imgTitle+'!!!'">
	<img v-bind:class="isActive?'active':''">
</div>

var app= new Vue({
	el:"#app",
	data:{
		imgSrc:"图片地址",
		imgTitle:"图片标题",
		isActive:false,
	}
})

实际开发中可以使用简化写法，省略v-bind写做：

<div id="app">
	<img :src="imgSrc">
	<img :title="imgTitle+'!!!'">
	<img :class="isActive?'active':''">
	<img :class="{active:isActive}">
</div>

PS

本人有微信小程序开发的基础，目前感觉Vue.js与微信小程序的开发流程十分类似，双向绑定。