1 创建Vue实例¶
每一个Vue应用都要通过Vue实例实现，实例化Vue语法格式如下：
var vm = new Vue({
// 选项
})
接下来，通过一个代码段说明Vue构造器有哪些基本内容：
<!--第一步：创建文件夹及html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之Helloworld</title>
<!--第二步：引入Vue库，此处引入的是本地的vue.js文件-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--第三步:创建一个Div-->
<div id="app">
<!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
<h1>{{message}}</h1>
</div>
<!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
<script type="text/javascript">
var app=new Vue({ // 创建Vue对象，Vue的核心对象。
el:'#app', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ // data: 是Vue对象中绑定的数据
message:'Hello Vue!' // message 自定义的数据
}
})
</script>
</body>
</html>
上述示例中是在创建Vue实例时与div容器进行挂载，这是一种方法，还有一种方法是在完成实例化之后，通过Vue实例的“$mount()”内置方法挂载到容器。
<script type="text/javascript">
var app=new Vue({ // 创建Vue对象，Vue的核心对象。
data:{ // data: 是Vue对象中绑定的数据
message:'Hello Vue!' // message 自定义的数据
}
});
app.$mount('#app'); // 挂载到容器
</script>
在上述代码实例汇总，我们创建了一个Vue实例（app），并将其挂载到div的id属性将其挂载到对应的div上，这里需要注意，Vue实例与容器时一一对应的关系，即一个Vue实例只能挂载到一个容器，一个容器也只能挂载一个Vue实例。
2 模板语法¶
Vue模板语法分为两大类：插值语法和指令语法。
2.1 插值语法¶
插值语法在上文中已经见过了，在第1章节中使用的形如“{{ message }}”，使用双花括号将内容进行包裹的方式就是插值语法，这里所说的内容可以是js变量、常量、表达式和js代码（数值运算、方法调用、三目运算符，甚至是条件判断和for循环）。通过这种插值的方式，Vue中数据将可以在页面中进行显示，且当Vue属性被修改时，页面中显示内容也将随之变化。
<div id="app">
<h2>插值语法实例1——显示Vue属性：{{ message }}</h2>
<h2>插值语法实例2——调用js方法：{{ new Date() }}</h2>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'Hello Vue!'
}
})
</script>
2.2 指令语法¶
Vue中指令语法有很多，都是以“v-”开头，例如v-bind、v-model，这类语法多用于解析标签（包括标签属性、标签体内容、绑定事件等），以v-bind绑定a标签href属性为例，绑定方法为：v-bind:href="xxx"，或简写为：:href="xxx"，这里的xxx与上文插值语法中的message一样，可以是Vue实例data中所有属性，也可以是js表达式。
<div id="app">
<!-- v-bind 绑定标签属性 -->
<a v-bind:href="school.url.toUpperCase()">点我跳转到{{school.name}}</a><br>
<!-- 简写形式-->
<a :href="school.url" >点我跳转到{{school.name}}</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
school:{
name:'百度',
url:'http://www.baidu.com',
}
}
})
</script>
3 数据绑定¶
Vue中，数据绑定分为单相绑定和双向绑定。
3.1 单向绑定：v-bind¶
单向绑定是指数据只能从data流向页面，用v-bind实现，大多用来绑定不可直接从页面上进行更改的标签属性上，当Vue中data内属性值发现变化，页面也将发生变化，但是页面对应内容发生变化时，data内对应的属性不会发生修改。v-bind在上文讲解指令语法时已经通过示例说明，这里不再举例。
3.2 双向绑定：v-model¶
双向绑定一般用v-model实现，数据不仅能够从data流向页面，也能从页面流向data，也就是说，当页面中对应的内容发生改变是，vue中该属性值将发生改变，当Vue中属性值发生改变是，页面内容也将随之变化。双向绑定一般都用在表单类元素上，例如input、textarea、select、checkbox、radio等。v-model以v-model:value="xxx"的形式，将标签的value属性与data的xxx属性进行双向绑定，也可以简写成v-model="name"的形式。
（1）input
<div id="app">
单向数据绑定v-bind：<input type="text" v-bind:value="name"><br/>
单向数据绑定v-bind简写：<input type="text" :value="name"><br/>
双向数据绑定v-model：<input type="text" v-model:value="name"><br/>
双向数据绑定v-model简写：<input type="text" v-model="name"><br/>
<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
name:'学习内容Vue'
}
})
</script>
（2）textarea texttarea标签的绑定方式和input中text的绑定方式一样：
<textarea cols="30" rows="10" v-model="message"></textarea>
（3）checkbox
对于checkbox，由于可以多选，所以Vue中绑定的属性需以列表形式存在，所有在前段页面勾选的值，将保存到列表中。
<body>
<div id="app">
<input type="checkbox" id="first" value="1" v-model="status">
<label>Python</label><br>
<input type="checkbox" id="second" value="2" v-model="status">
<label>Java</label><br>
<input type="checkbox" id="second" value="3" v-model="status">
<label>C</label><br>
<div>熟悉的编程语言：{{status}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
status:[]
}
})
</script>
（4）radio
<body>
<div id="app">
<input type="radio" value="男" v-model="gender">
<label >男</label><br>
<input type="radio" value="女" v-model="gender">
<label >女</label>
<div>性别：{{gender}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
gender:'男'
}
})
</script>
（5）select 对于select，Vue绑定的是selected属性，可以再每个option中指定value，那么选中option的value将赋值给Vue实例对应属性，如果option没有设置value值，那么，option的text值将赋值给Vue实例对应属性。
<body>
<div id="app">
<select v-model="selected">
<option disabled value="">最熟悉的编程语言</option>
<option>Python</option>
<option>Java</option>
<option>C</option>
</select>
<div>最熟悉的编程语言: {{ selected }}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
selected:''
}
})
</script>
4 其他内部指令¶
4.1 v-if 、v-else、 v-show、v-else-if¶
（1）v-if
<body>
<h1 id="app" v-if="isVue">Hello Vue!</h1> <!-- 当isVue为false时，此div盒子不会显示 -->
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
isVue: false
}
})
</script>
（2）v-else
<body>
<h1 id="app" v-if="isVue">Hello Vue!</h1>
<h1 v-else>Not Vue!</h1> <!-- 当isVue为false时，此div盒子将会显示 -->
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
isVue: false
}
})
</script>
（3）v-else-if
<body>
<div id="app">
<h1 v-if="lang=== 'Python'">Hello Python!</h1>
<h1 v-else-if="lang=== 'Java'">Hello Java!</h1>
<h1 v-else-if="lang=== 'C'">Hello C!</h1> <!-- lang值为‘C’，此div盒子将会显示 -->
<h1 v-else>Other language!</h1>
<h1 v-else>Not Vue!</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
lang: 'C'
}
})
</script>
（4）v-show
<body>
<div id="app">
<h1 v-show="isVue">Hello Vue!</h1> <!-- 当isVue为true时，此div盒子才会显示 -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
isVue: false
}
})
</script>
v-if与v-show的区别:
-
v-if： 在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，开销较高，在运行时条件很少改变时使用。 -
v-show：调整css dispaly属性，开销较小，在常频繁地切换时使用。
4.2 v-for¶
（1）基本用法
<body>
<div id="app">
<ul>
<li v-for="lang in languages">
Hello, {{lang}}!
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
languages: ['Python', 'Java', 'PHP', 'C']
}
})
</script>
（2）对象遍历
参数： 第一个为值，第二个为键名，第三个为索引
<body>
<div id="app">
<ul>
<li v-for="(value, key, index) in person">
{{index}}. {{key}} : {{value}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
person: {
name: '张三',
age: 18,
gender: '男'
}
}
})
</script>
4.3 v-text 、v-html¶
（1）v-text {{xxx}}取值有个弊端，当网速很慢或javascript出错时，会在页面显示{{xxx}}，Vue提供的v-text可以解决这个问题.
<div>{{ message }}</div>
<!-- 和下面的一样 -->
<div v-text="message"></div>
（2）v-html 用于输出html代码：
<span v-html="msgHtml"></span>
4.4 v-once¶
只显示DOM第一次渲染的值，以后不改变了.
<div v-once>第一次绑定的值：{{message}}</div>
