Vue 一
栏目: JavaScript · 发布时间: 6年前
内容简介：暂时先引文本文件。。。尴尬了。。。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，
这就是双向绑定。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
An Introduction to Probability Theory and Its Applications
William Feller / Wiley / 1991-1-1 / USD 120.00
Major changes in this edition include the substitution of probabilistic arguments for combinatorial artifices, and the addition of new sections on branching processes, Markov chains, and the De Moivre......一起来看看 《An Introduction to Probability Theory and Its Applications》 这本书的介绍吧!
