vue官网：https://cn.vuejs.org/
一、Vue概述
1. Vue简介
Vue是一个渐进式（真正用到才引用）的JavaScript框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，与现代化的工具以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2. SPA介绍
Vue.js属于SPA一员。
英文全称：Single Page Web Application ，SPA。
中文全称：单页Web应用。
整个应用就一个页面，客户端页面通过与服务端的交互动态更新页面中内容。
2.1 优点
符合前后端分离工作模式：单页面应用可以结合Restful，符合前后端分离开发。
良好的用户体验：应用没有页面跳转，全是局部刷新，整体页面更流畅。
减轻服务器端压力：由于都是局部刷新对服务器压力更小。
多平台共享：无论是移动端、电脑端都可以共享服务端接口。
2.2 缺点
首页渲染耗时长首页需要一次加载多个请求，渲染时间可能会比较长。
3. MVVM介绍
MVVM (Model-View-ViewModel）是一种软件架构设计模式，Vue是基于Mvvm设计的前端框架；
MVVM分为M、V、VM：
-
M（Model） 也就是页面中单独数据。
-
V （View）是页面中HTML结构。
-
VM（View-Model） 当V需要调用M中数据时，由VM做中间处理。
MVVM 源自于经典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：
-
该层向上与视图层进行双向数据绑定
-
向下与Model层通过接口请求进行数据交互、
Vue 是 MVVM 模式的实现者
-
m model
-
数据层 Vue 中 数据层 都放在 data 里面
-
-
v view 视图
-
Vue 中 view 即 我们的HTML页面
-
-
vm （view-model） 控制器 将数据和视图层建立联系
-
vm 即 Vue 的实例 就是 vm
-
二、Vue模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。
结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
1. 基础指令
1.1 Vue插值表达式
{{}}是Vue的模板语法中的插值表达式，可以直接读取vm实例中的数据，并且支持js的运算表达式。
<div id="app">
{{ 2*3 + message + '你好 vue'}}
</div>
<script>
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
1.2 v-cloak 指令
为防止插值表达式出现闪烁问题，可以使用v-cloak指令解决。
<style>
/* 定义 v-cloak 的样式，使元素隐藏
通过给 <div> 元素添加 v-cloak 属性，并定义对应的 CSS 样式，
可以确保在 Vue 实例加载完成之前，该元素的内容不会显示在页面上。
*/
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- 添加 v-cloak 属性 -->
<div id="app" v-cloak>
{{ 2*3 + message + '你好 vue'}}
</div>
1.3 v-text 指令
v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题；如果数据中有HTML标签会将html标签直接输出。
<div id="app">
<p v-text="age"></p>
</div>
<script>
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
age: 18
}
})
</script>
1.4 v-html 指令
用法和v-text 相似，但是它可以将HTML片段填充到标签中。
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，v-html会将html标签解析后输出。
<div id="app">
<p v-html="name"></p>
</div>
<script>
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
name: '<b>Arvin</b>'
}
})
</script>
1.5 v-pre 指令
显示原始信息跳过编译过程，跳过这个元素和它的子元素的编译过程。
<div id="app" v-pre>
<!-- 直接输出{{message}} -->
{{message}}
<!-- 不输出 -->
<p v-text="age"></p>
<!-- 不输出 -->
<p v-html="name"></p>
<!-- 输出 -->
<p>你好啊</p>
</div>
<script>
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
age: 18,
name: '<b>Arvin</b>'
}
})
</script>
1.5 v-once 指令
执行一次性的插值，当数据改变时，插值处的内容不会继续更新。
<div id="app">
<!-- 页面加载后只渲染一次，即使message数据改变也不会重新渲染-->
<p v-once>{{message}}</p>
</div>
<script>
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
2. Vue的双向绑定指令
什么是双向绑定？
-
input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
-
message发生改变时，将message的值插入到DOM中，所以DOM会发生响应的改变。
注意：v-model是双向绑定指令，只能使用在 <input>、<select>、<textarea>等表单组件中使用。
3. Vue的事件指令
3.1 v-on 指令
v-on用来绑定事件的，v-on:事件名 可以缩写为 @事件名。注意：事件名去掉on（onclik-->clik）。
例如：v-on:click 可以缩写为 @click。
<div id="app">
<!-- 方法名() | 方法名 -->
<button v-on:click="fun1">点击</button>
<button @click="fun2">清零</button>
<p>您点击了 {{count}} 次</p>
</div>
<script>
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
fun1(){
++this.count;
},
fun2(){
if (confirm("是否归零")){
this.count = 0;
}
}
}
})
</script>
3.2 v-on 传入参数
-
@click="方法名" 或 v-on:click="方法名"：默认传递事件对象作为参数。
-
@click="方法名()" 或 v-on:click="方法名()"：不会传递事件对象作为参数，若要传递需要写一个名为$event的参数
-
@click="方法名(参数1, 参数2, $event)" 或 v-on:click="方法名(参数1, 参数2, $event)"：传递多个参数，事件对象建议放在最后，事件对象名称必须是$event。
<div id="app">
<button @click="fun1">按钮1</button>
<button @click="fun2($event,2)">按钮2</button>
<button @click="fun3(1, $event)">按钮3</button>
</div>
<script>
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
count: 1
},
methods: {
fun1(e){
console.log(e);
},
fun2(e){
console.log(e);
},
fun3(i, e){
console.log(i, e);
}
}
})
</script>
3.4 事件修饰符
1. stop
@click.stop 或 v-on:click.stop：防止事件冒泡。
事件冒泡是指当一个DOM元素上的事件被触发时，它会先运行该元素的处理程序，然后再逐级向上运行该元素的父元素的处理程序。
<div id="app">
<div @click="fun1" style="border: 1px solid black">
<button @click.stop="fun2">按钮</button>
</div>
</div>
<script>
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
count: 1
},
methods: {
fun1(){
console.log("fun1");
},
fun2(){
console.log("fun2");
}
}
})
</script>
2. self
@clik.self或v-on:clik.self 只当事件在该元素本身触发时。
<div id="app">
<div @click.self="fun1" style="border: 1px solid black">
<button @click="fun2">按钮</button>
</div>
</div>
<script>
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
count: 1
},
methods: {
fun1(){
console.log("fun1");
},
fun2(){
console.log("fun2");
}
}
})
</script>
3. prevent
@clik.prevent或v-on:clik.self阻止事件的默认行为。
例如：超链接跳转，表单submit按钮提交等。
<div id="app">
<a href="http://www.baidu.com" @click.prevent>百度</a>
<a href="http://www.baidu.com" @click.prevent="fun1">百度</a>
</div>
<script>
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
methods: {
fun1(){
console.log("fun1");
}
}
})
</script>
4. once
-
@clik.once或v-on:clik.once 事件只触发一次。