第一章 初识Vue

一 前提

引入vue.js:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

二 数据渲染方式

• {{}}
• v-text
• v-bind
• v-model

1 {{}}

简洁的模板语法，即“Mustache” 语法（双大括号）来声明式的将数据渲染进 DOM：

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

var app = new Vue({
    el:'#app',
    data: {
        msg:'resume vue'
    }
})

2 v-text

v-text也是可以做数据渲染优于{{}}，因为在网络较慢时不会像{{}}那样原样显示在页面上。应用如下：

<div id="app6">
	<p v-text="message"></p>
</div>

var app6 = new Vue({
	el : "#app6",
	data : {
		message : 'v-text demo'
	}
})

3 v-bind

v-bind称为指令，主要用于绑定DOM元素属性，指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性，可以使用其简写方式:。以下是v-bind的应用：

<div id="app2">
    <span v-bind:title="msg">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>

　　<span :title="msg">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
   </span>

</div> var app2 = new Vue({ el:'#app2', data: { msg:'页面加载于 ' + new Date() } })

4 v-model

v-model指令，能轻松实现表单输入和应用状态之间的双向绑定：

<div id="app7">
	<p>{{msg}}</p>
	<input v-model="msg">
</div>

var app7 = new Vue({
	el : "#app7",
	data : {
		msg : "hello qcxiao"
	}
})

　　

三 条件与循环

v-if、v-for分别用于条件与循环。

1 v-if

<div id="app3">
	<p v-if="seen">你可以看到我了</p>
</div>


var app3 = new Vue({
	el : "#app3",
	data : {
		seen : false
	}
})

　　此时当我们在浏览器console里输入app-3.seen=true，就可以发现在页面上的“你现在可以看到我了”。

2 v-for

<div id="app4">
	<ol>
		<li v-for="todo in todos">
			{{todo.text}}
		</li>
	</ol>
</div>

var app4 = new Vue({
	el : "#app4",
	data : {
		todos:[
			{text : 'javascript'},
			{text : 'vue'},
			{text : 'angular'},
			{text : 'react'}
		]
	}		
})

　　在控制台里，输入 app4.todos.push({ text: 'java' })，添加了一个java新项。

四 数据交互

通过v-on指令绑定一个事件监听器可以满足用户与程序的交互需求。

<div id="app5">
	<p>{{message}}</p>
	<button v-on:click="reverseMessage">倒序</button>
</div>

var app5 = new Vue({
	el : "#app5",
	data : {
		message :　'hello qcxiao'
	},
	methods : {
		reverseMessage : function(){
			this.message = this.message.split('').reverse().join('');
		}
	}
})

　　注意在 reverseMessage 方法中，更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注底层逻辑。