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，
这就是双向绑定。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
技术领导之路（中英文对照）
Gerald M.Weinberg / 余晟 / 电子工业出版社 / 2009-12 / 69.00元
《技术领导之路:全面解决问题的途径(中英文对照)》内容简介：搞定技术问题并不简单，但与人打交到也并非易事。作为一个技术专家，你是否在走上管理岗位时遇到了各种不适“症状”？《技术领导之路：解决问题的有机方法》一书将帮助你成为一个成功的解决问题的领导者。书中温伯格从一个反思者的角度阐述了要成为一个成功的解决问题的领导者必备的3个技能——MOI，即激励（Motivation）、组织（Organizati......一起来看看 《技术领导之路（中英文对照）》 这本书的介绍吧!
