- Vue是一套用于构建用户界面的渐进式框架，Vue被设计为可自底向上逐层应用。
- Vue的核心只关注视图层，易于上手，且便于和第三方库或项目整合。
- Vue不支持IE8及以下版本，因为Vue使用了IE8无法模拟的ECMAScript5特性。
- 使用Vue时推荐在浏览器上安装vue detools工具，以便审查和调试。
- Vue提供了官方的CLI命令行接口工具，为SPA单页应用搭建复杂的脚手架。
安装
// 安装最新稳定版
npm i vue
编译器
如果需要在客户端编译模块，比如传入一个字符串给template选项，或挂在到元素上DOM内部的HTML作为模块，就需添加上编译器。
例如：编译器配置
// 需编译器
new Vue({template:"<div>need compiler</div>"});
//取消template选项此时则无需编译器
new Vue({
render(h)=>{
return h("index", this.message)
}
});
两种方式的区别在于，当使用vue-loader或verify时，*.vue文件内部的模板会在构建时编译成JavaScript文件，而在最终打好的包中是不需要编译器的，只需要运行时版本即可。因为运行时版本比完整版体积小30%左右，因此推荐使用无需编译器的版本
声明式渲染
Vue.js的核心是一个允许采用简洁模板语法来声明式的将数据渲染进DOM的系统。
文本插值{{ varname }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello'
}
})
</script>
</body>
</html>
通过创建Vue对象，数据和DOM建立关联，所有东西都是响应式的。
数据绑定 v-bind:key=value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<span v-bind:title="message">鼠标悬停，查看动态绑定。</span>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'页面加载于 '+new Date().toLocaleString()
}
})
</script>
</body>
</html>
v-bind attribute被称为指令，指令带有前缀v-，指令是Vue提供的特殊attribute。
v-bind称之为指令，会在渲染的DOM上应用特殊的响应式行为。
v-bind:title="message" 表示将这个元素节点的title特性和Vue实例的message属性保持一致。
渲染流程
1.浏览器从上往下依次解析，若遇到id=app的div内部的{{ message }}，则直接作为普通文本渲染到页面。
- 浏览器向下解析执行，遇到JS外链脚本，发起请求下载脚本。
- 当前页面获取JS脚本后执行
vue.js，执行结束后向全局暴露一个全局对象Vue。 - 浏览器解析当前页面JS脚本，创建Vue实例，通过Vue的
el属性指定程序的接管范围，通过data属性向Vue实例的应用程序中初始化了一个message成员变量。 - Vue应用实例通过
el属性指定的#app的div，开始解析执行Vue识别的语法，{{ message }}在Vue称之为“插值表达式”。在双花括号插值表达式中可使用当前元素所属Vue程序接管范围的data中的数据。
到此数据和DOM已经被建立了关联，所有东西都是响应式的。
条件 v-if
- vue可以将数据绑定到DOM文本或attribute中，也看绑定到DOM结构中。
- vue提供强大的过度效果，在Vue插入/更新/移除元素时会自动应用过度效果。
例如：控制切换元素是否显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<span v-if="seen">控制切换元素</span>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
seen:true
}
})
</script>
</body>
</html>
循环v-for
v-for指令可绑定数组的数据来渲染项目列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item.text}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
list:[
{text:'java'},
{text:'javascript'},
{text:'vue.js'},
]
}
})
</script>
</body>
</html>
处理用户输入
v-on指令添加一个事件监听器，通过它调用在Vue实例中定义的方法，让用户与应用进行交互。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<button v-on:click="reverseMessag">逆转</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"hello world"
},
methods:{
reverseMessag:function(){
this.message = this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
v-model指令实现表单输入和应用状态之间的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message"/>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"hello world"
}
})
</script>
</body>
</html>
组件化应用构建
组件系统是一种抽象，允许使用小型、独立、可否用的组件构建大型应用。
几乎任意类型的应用界面都可抽象为一个组件树
Vue中组件本质是一个拥有预定义选项的Vue实例
注册组件(创建组件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ol>
<todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
<script>
//子单元组件注册
Vue.component('todo-item', {
props:['todo'],//自定义特性
template:'<li>{{todo.text}}</li>'
});
var app = new Vue({
el:'#app',
data:{
list:[
{id:1, text:'java'},
{id:2, text:'javascript'},
{id:3, text:'vue.js'},
]
}
})
</script>
</body>
</html>
子单元通过prop接口与父单元进行良好的解耦
使用组件的应用模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
</body>
</html>
Vue组件类似自定义元素-它是Web组件规范的一部分，因为Vue组件语法部分参考了该规范。差别在于：
- Web组件规范仍然处于草案阶段并未被所有浏览器原生实现
- Vue组件提供纯自定义元素所不具备的功能，例如跨组件数据流、自定义事件通信、构建工具集成等。
Vue实例
每个Vue应用通过Vue()函数创建实例
var viewmodel = new Vue({});
虽然并未完全遵循MVVM模型，单Vue设计也受它启发。
Vue应用通过new Vue()创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成。
所有Vue组件都是Vue实例，并接受相同的选项对象。
数据与方法
当Vue实例被创建时，它向Vue的响应式系统中加入了data对象中能找到的所有属性。当属性发生改变时，视图产生响应，即匹配更新为新值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
</div>
<script>
//数据对象
var user = {username:'alice'};
//将数据对象添加到Vue实例中
var vm = new Vue({
data:user
});
console.log(vm.username === user.username);
//设置属性会影响到原始数据，反之亦然。
vm.username = 'ben';
console.log(user.username);
</script>
</body>
</html>
当数据改变时，视图重渲染。只有当实例被创建时data中存在的属性才是响应式的。即若添加新属性则它的改动不会触发任何视图的更新。
若你之后需某属性，之前定义时设置初始值即可。
