1 简介
Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。作者尤雨溪。respect!
- 网络通信:axios;
- 页面跳转:vue-router
- 状态管理:vuex
CSS预处理器:用一门专门的编程语言,进行Web页面样式设计,再通过编译器转化为正常的CSS,例如SASS、LESS;
2 MVVM模式
- Model:模型层;
- View:视图层;
- ViewModel:连接视图和数据的中间件,监听到变化可以使得二者同时发生更新;
优点:
- 一个ViewModel可以绑定不同的View;
- 即时编译,虚拟的DOM;
- 完全解耦View层和Model层,这是前后端分离最为重要的一环;
2 第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎光临</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--view层,模板-->
<div id="app">
{{name}}'s age is {{age}}
</div>
<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model,数据
data:{
name:"Tom",
age:11
}
});
</script>
</body>
</html>
访问得到:Tom's age is 11
标准的MVVM模式,数据和展示分开,二者之间通过ViewModel双向绑定;
3 基础语法
3.1 判断语句
<div id="app">
<h1 v-if="flag=='A'">A</h1>
<h1 v-else-if="flag=='B'">B</h1>
<h1 v-else>其他</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
//Model,数据
data: {
flag: "A"
}
});
</script>
3.2 循环遍历
<!--view层,模板-->
<div id="app">
<li v-for="book in books">
{{book.BookName}}
</li>
</div>
<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
//Model,数据
data: {
books:[
{BookName:"《朝花夕拾》"},
{BookName:"《阿Q正传》"},
{BookName:"《纪念刘和珍君》"}]
}
});
</script>
4 事件绑定
<div id="app">
<button v-on:click="addMessage">点击添加</button>
<li v-for="message in messages">
{{message.key}}
</li>
</div>
<script>
var vm = new Vue({
// 绑定元素
el: "#app",
// 数据
data: {
messages: [{key: "你好!"}]
},
// 方法,必须定义在methods对象中
methods: {
addMessage: function () {
var temp = {key: "你好!"};
this.messages.push(temp);
}
}
});
</script>