Vue 一
栏目: JavaScript · 发布时间: 5年前
内容简介：暂时先引文本文件。。。尴尬了。。。cli工具一脸懵vue先学再说，到时候用VueThink生命周期，即数据周期
入门
暂时先引文本文件。。。尴尬了。。。cli工具一脸懵
vue先学再说，到时候用VueThink http://www.vuethink.com/ 这个框架
实例
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
数据发生变化，视图也会发生变化
生命周期
生命周期，即数据周期
有如下过程，编译模板，渲染虚拟dom树，实例挂载dom树，数据监听，数据绑定，会运行钩子函数
<!DOCTYPE Html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<meta charset="UTF-8">
</head>
<div id="app">
{{ message }}
<button @click="randomTitle()">改变title</button>
<button @click="destoryVm()">销毁实例</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app', // 挂载DOM
data: {
message: 'Hello Vue!'
},
methods: {
randomTitle() {
this.message = 'ming'
},
destoryVm() {
this.$destroy()
}
},
// 实例创建之后数据观测，事件绑定
beforeCreate() {
console.log("实例创建");
},
// 实例初始化完成，挂载没有开始
created(){
console.log("实例初始化完成 挂载没有开始");
},
// 挂载之前，函数首次调用
beforeMount() {
console.log("挂载之前，函数调用")
}
})
</script>
</html>
数据响应
修改数据的起点，所有网上的节点值更新
使用computed计算属性。
当一个值改变，另外一个值也改变
一个节点数据更新，所有节点数据更新
<!DOCTYPE Html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<meta charset="UTF-8">
</head>
<div id="app">
<p>A <input type="text" v-model="a"></p>
<p>B <input type="text" v-model="b"></p>
<p>C = A * 2 + 2 | {{ c }}</p>
<p>D = A + B * 2 | {{ d }}</p>
<p>E = B / 2 | {{ e }}</p>
<p>F = C + D | {{ f }}</p>
<p>G = D - E | {{ g }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app', // 挂载DOM
data: {
a: 3,
b: 4
},
computed: {
c() {
return this.a * 2 + 2
},
d() {
return Number(this.a) + this.b * 2
},
e () {
return this.b / 2;
},
f () {
return Number(this.c) + Number(this.d)
},
g (){
return this.d - this.e;
}
}
})
</script>
</html>
同样也可以使用get方法，当获取C的时候，会调用getC方法
VUE原理
MVVM 当修改值的时候，会触发对象的set方法，节点更新，输入框添加事件监听，触发一个事件，此时也会继续set，
这就是双向绑定。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
