目录
一、Vue
1.1什么是Vue
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架
库与框架的区别
库(Library)
本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
代表:jQuery
jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作
1. 2.2 框架(Framework)
框架是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码
代表:vue
框架规定了自己的编程方式,是一套完整的解决方案
使用框架的时候,由框架控制一切,我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
1.3 MVVM的介绍
MVVM,一种更好的UI模式解决方案,MVVM通过数据双向绑定让数据自动地双向同步
MVVM ===> M / V / VM
M:model数据模型
V:view视图
VM:ViewModel 视图模型 虚拟domV(修改数据) -> M
M(修改数据) -> V其中数据是核心
二、Vue 入门
首先安装Vue
点击复制script标签,放入Hbuildx中即可
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id = "app">
<h3>{{msg}}</h3>
</div>
<script type="text/javascript">
/* 绑定边界 */
new Vue({
el:'#app',
data(){
return{msg:'vue啵啵'};
}
})
</script>
</body>
</html>
3.数据双向绑定
代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{{msg}}</h3>
<input type="text" v-model="msg" />
<h3>{{msg}}</h3>
<h3>{{msg}}</h3>
<h3>{{msg}}</h3>
</div>
<script type="text/javascript">
/* 绑定边界 */
new Vue({
el:'#app',
data(){
return{msg:'vue啵啵'};
}
})
</script>
</body>
</html>
三.Vue事件
代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{{msg}}</h3>
<input type="text" v-model="msg" />
<button v-on:click="getMsg">获取输入框内容</button>
</div>
</body>
<script type="text/javascript">
// 绑定边界 ES6具体体现
new Vue({
el:'#app',
data(){
return {msg:'vue啵啵',n:1};
},
methods:{
getMsg(){
alert(this.msg);
}
}
})
</script>
</html>
因为博主浏览器出现些小问题,这边我们就自行运行
四.Vue的生命周期
1.所有的钩子函数有哪些?
beforeCreate
created
beforemount
mounted
beforeupdate
update
beforedestory
destory
2.Vue初始化默认会触发的钩子函数有哪些?
beforeCreate
created
beforemount
mounted