vue简介、入门、模板语法
在菜鸟教程上面学习的vue.js。同时结合vue中文文档网站，便于自己记录。
vueAPI网站：API
1. 简介
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
结果：
已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，可以相应地更新。
除了文本插值，我们还可以像这样来绑定元素特性：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> <script> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } }) </script> </body> </html>
结果：
这里我们遇到了一点新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
2. 入门
每个 Vue 应用都需要通过实例化 Vue 来实现。当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
语法格式如下：
var vm = new Vue({ // 选项 })
实例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { site: "vue入门", url: "www.baidu.com", alexa: "10000" }, methods: { details: function() { return this.site + " - 666！"; } } }) </script> </body> </html>
结果：
vue构造器解释：
<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { site: "vue入门", url: "www.baidu.com", alexa: "10000" }, methods: { details: function() { return this.site + " - 666！"; } } }) </script>
(1)可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：
<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div>
这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
(2)定义数据对象
data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
(3)除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>Alexa : {{alexa}}</h1> </div> <script type="text/javascript"> // 我们的数据对象 var data = { site: "vue入门", url: "www.baidu.com", alexa: "10000" } var vm = new Vue({ el: '#vue_det', data: data }) document.write(vm.$data === data) // true document.write("<br>") document.write(vm.$el === document.getElementById('vue_det')) // true </script> </body> </html>
结果：
补充：vue中挂载点，模板，实例之间的关系
vuex渲染的元素称为挂载点，元素之间的内容称为模板，模板也可以写在实例的template属性中。vue实例只会对挂载点内部的模板生效。
<!--挂载点--> <div id="app"> <!--模板在vue实例中--> </div> <script type="text/javascript"> new Vue({ data: { site: "vue入门" }, template: "<h1>site : {{site}}</h1>" }).$mount('#app') </script>
3.模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
3.1插值
1.插入文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。
<div id="app"> <p>{{ message }}</p> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script>
结果：
补充： v-once 指令渲染一次性值
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<div id="app"> <p v-once>{{ message }}</p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script>
2.使用 v-html 指令用于输出 html 代码：
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<div id="app"> <div>{{ message }}</div> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>vue教程</h1>' } }) </script>
结果：
3. 属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果use为 true 使用 class1 类的样式，否则不使用该类：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> <style> .class1 { color: red; } </style> </head> <body> <div id="app"> <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}"> v-bind:class 指令 </div> </div> <script> new Vue({ el: '#app', data: { use: true } }); </script> </body> </html>
结果：
4.表达式
vue提供了完全的javascript表达式支持。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> <style> #list-1 { color: red; } </style> </head> <body> <div id="app"> {{5+5}} <br> {{ ok ? 'YES' : 'NO' }} <br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">vue教程</div> </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'vue 666', id: 1 } }) </script> </body> </html>
结果：
3.2指令
指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到DOM上。
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
<div id="app"> <p v-if="seen">现在你看到我了</p> <p v-if="!seen">现在你看不到我</p> </div> <script> var app = new Vue({ el: '#app', data: { seen: false } }) </script>
结果：
修改app.seen=true
1. 参数
参数在指令以后以冒号指明。
例如：v-bind 指令被用来响应地更新 HTML 属性； v-on 指令用于监听 DOM 事件
<div id="app"> <pre><a v-bind:href="url">百度</a></pre> <pre><a v-on:click="clickEve(2)">点击</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.baidu.com' }, methods: { clickEve: function(code) { alert(code); } } }) </script>
结果:
2.修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
preventDefault() 方法阻止元素发生默认的行为。
<div id="app"> <form v-on:submit.prevent="onSubmit"> <input type="submit" /> </form> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.baidu.com' }, methods: { onSubmit: function() { alert(123); } } }) </script>
3.用户输入
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'vue!' } }) </script>
结果：
4.过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示，过滤器函数接受表达式的值作为第一个参数。过滤器可以串联：
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
例如： message作为 filterA函数的参数；filterA函数的返回值作为filterB的第一个参数。
<div id="app"> {{ message | filterA | filterB('para1', 'para2') }} </div> <script> new Vue({ el: '#app', data: { message: 'vue study!' }, filters: { filterA: function(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1); }, filterB: function(value, para1, para2) { console.log(value); console.log(para1); console.log(para2); return value; } } }) </script>
结果：
5.缩写
v-bind 缩写:
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
v-on 缩写:
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
例如：
<div id="app"> <pre><a :href="url">百度</a></pre> <pre><a @click="clickEve(2)">点击</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.baidu.com' }, methods: { clickEve: function(code) { alert(code); } } }) </script>
补充：vue的生命周期如下
官网给出的生命周期图如下：
解释：
beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app-2"> {{ getMsgs() }} </div> <script> var app2 = new Vue({ el: '#app-2', data: { msg: "这是信息" }, methods: { getMsgs: function() { console.log(1 + this.msg) return this.msg; } }, beforeCreate: function() { console.log(2 + " " + this.msg); }, created: function() { console.log(3 + " " + this.msg); }, beforeMount: function() { console.log(4 + " " + this.msg); }, mounted: function() { this.msg = "new Value"; console.log(5 + " " + this.msg); }, beforeUpdate() { console.log(6 + " " + this.msg); }, updated() { console.log(7 + " " + this.msg); }, beforeDestroy() { console.log(8 + " " + this.msg); }, destroyed: function() { console.log(9 + " " + this.msg); } }) </script> </body> </html>
结果：(可以看到执行顺序)
