Vue简介
Vue是一个渐进式JavaScript框架，也就是这些可以只用一部分：声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
Vue不支持IE8及以下版本浏览器，因为Vue使用了IE8无法模拟的ECMAScript5特性
获取Vue
可从Vue官网获取，有多种使用方式，可使用script标签进入引入，可以使用npm模块化方式引入，也可以使用官方命令行工具vue-cli进行项目生成
简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- CDN方式引入Vue -->
</head>
<body>
<div id="app">{{message}}</div> <!-- 插值语法填充数据 -->
<script>
var app = new Vue({ //创建Vue实例
el: "#app", //挂载元素
data() { //绑定数据
return { message: "hello world" }
}
});
</script>
</body>
</html>
设计模式的转变
MVP
传统MVP（Model-View-Presenter）设计模式是：视图层<->控制器<->模型层，模型层通过控制器间接与视图层通信，也就是说当视图层被操作时，控制器会被执行，控制器将使用AJAX获取模型层数据，再进行对视图层进行渲染，即大部分代码都是在操作DOM，如下jQuery代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MVP</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<body>
<div>
<input type="text" id="input">
<input type="button" value="add" id="add">
<ul id="list"></ul>
</div>
<script>
function Page(options) {
this.init(options); //调用组件初始化
};
Page.prototype.init = function (options) {
this.bindEvents(options); //初始化中调用绑定事件函数
}
Page.prototype.bindEvents = function (options) {
var btn = $(options.btn); //获取传递的页面按钮
var _this = this; //暂存this指向
btn.on("click", function () { //监听按钮点击事件
_this.btnClickHandle(options); //调用处理点击事件
})
}
Page.prototype.btnClickHandle = function (options) {
//Ajax过程省略
var input = $(options.input); //获取传递页面输入框
var value = input.val(); //获取输入框内容
input.val(""); //获取完毕后清空输入框
var list = $(options.list); //获取传递页面ul
list.append("<li>" + value + "</li>"); //向ul中添加li，使用input中的value进行填充
}
new Page({
btn: "#add",
input: "#input",
list: "#list"
})
</script>
</body>
</html>
MVVM
与传统MVP设计模式不同，MVVM（Model-View-ViewModel）设计模式是：视图层<->视图模型层(Vue)<->模型层，也就是说当视图层或模型层发生变化时，对应的视图层或模型层对应的发生变化，这些变化由视图模型层自动感知，也就是Vue的作用，也就是没有几乎DOM操作，如下Vue代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MVVM</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- CDN方式引入Vue -->
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"> <!-- 数据双向绑定 -->
<input type="button" value="add" @click="clickHandle"> <!-- 绑定点击事件 -->
<ul>
<li v-for="item in list">{{item}}</li> <!-- 遍历list中的数据生成li标签 -->
</ul>
</div>
<script>
var app = new Vue({ //创建Vue实例
el: "#app", //挂载元素
data() { //绑定数据
return {
list: [],
inputValue: ""
}
},
methods: { //绑定事件
clickHandle() {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
});
</script>
</body>
</html>
Vue实例的生命周期钩子
生命周期钩子就是在某个时间点Vue实例自动执行的函数：
- 从Vue实例的创建，初始化事件和生命周期相关内容，之后执行
beforeCreate生命周期钩子，初始化外部注入和双向绑定相关内容，之后执行created生命周期钩子 - Vue实例中若有
el选项则会继续执行下面流程，若没有则会等到调用$mount(el)（替换掉页面的elDOM元素）方法后再继续下面流程 - Vue实例中若
template选项，则会使用template中的模板进行渲染，若没有则使用el选项中外层HTML当作模板进行渲染 - 在创建
$el和替换el之前会执行beforeMount生命周期钩子，在创建$el和替换el之后会执行mounted生命周期钩子 - 监听数据发生变化，若发生变化会执行
beforeUpdate生命周期钩子，使用虚拟DOM进行重新渲染或修补之后会执行updated生命周期钩子 - 若执行
$destroy()方法会销毁当前Vue实例，销毁前会执行beforeDestroy生命周期钩子，拆卸数据监听器和子组件以及事件监听后会执行destroyed生命周期钩子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- CDN方式引入Vue -->
</head>
<body>
<div id="app">{{message}}</div> <!-- 插值语法填充数据 -->
<script>
var app = new Vue({ //创建Vue实例
el: "#app", //挂载元素
data() { return { message: "hello world" } }, //绑定数据
beforeCreate(){console.log("beforeCreate");},
created(){console.log("created");},
beforeMount(){console.log("beforeMount");},
mounted(){console.log("mounted");},
beforeUpdate(){console.log("beforeUpdate");},
updated(){console.log("updated");},
beforeDestroy(){console.log("beforeDestroy");},
destroyed(){console.log("destroyed");},
});
setTimeout(()=>{ app.message = "update"; },500) //0.5秒后修改数据
setTimeout(function(){ app.$destroy(); },1000); //1秒后销毁Vue实例
</script>
</body>
</html>
Comments NOTHING