Vue学习笔记（二）：Vue实例与指令
1 创建Vue实例?
每一个Vue应用都要通过Vue实例实现，实例化Vue语法格式如下：
var vm = new Vue({ // 选项 })
接下来，通过一个代码段说明Vue构造器有哪些基本内容：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入门之Helloworldtitle> <script type="text/javascript" src="../js/vue.js">script> head> <body> <div id="app"> <h1>{{message}}h1> 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"> <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/> 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>Pythonlabel><br> <input type="checkbox" id="second" value="2" v-model="status"> <label>Javalabel><br> <input type="checkbox" id="second" value="3" v-model="status"> <label>Clabel><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>Pythonoption> <option>Javaoption> <option>Coption> 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> 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> 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> <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> 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>