引入vue.js文件
或者
在body中设置一个挂载点
{{msg}}
{{msg}}
实例化一个Vue的实例化对象,和挂载点进行挂载
const vm = new Vue({el:'#app', //挂载点,可以是id或者classdata:{msg:'成都'}})
第四步
请求获取回来的数据,即是配置对象当中的data
{{msg}}
vm代理配置对象当中data的数据 ,vm和data当中有同名的属性,模板当中访问的都是vm身上的属性。 vm代理了data当中的数据,找vm获取数据其实最终还是拿的data当中的属性值。修改vm的数据其实本质是在修改data当中的数据。可以通过打印日志验证
vm.msg = '555';console.log(vm);
通过v-bind:指令让html元素的属性绑定Vue实例管理的数据
百度2
简写百度
通过v-on:指令让html元素的事件绑定Vue实例管理的方法。v-on:的简写是@
双向数据绑定 一般情况下只针对表单类元素才使用双向数据绑定
MVVM 说的就是双向数据绑定模型
M代表model 就是我们的数据 V代表的view 就是我们的页面 VM代表的就是Vue的实例化对象
双向数据绑定 :数据可以从data 流向页面 ,页面的数据被更新,也会从页面流向data.
这个方法在为对象添加或者修改 属性为响应式属性
let student = {a: 12,b: 3}Object.defineProperty(student, 'max', {//当访问对象的fullName属性的时候get() {return this.a > this.b ? 'a' : 'b'},//当设置对象的fullName属性的时候set(val) {var str = val.split(',');this.a = str[0];this.b = str[1];}})console.log(student.max);student.max = '20,30';console.log(student);
模拟数据代理
var vm = {}var data = {msg: "哈哈"}Object.defineProperty(vm, 'msg', {get() {return data.msg;},set(val) {data.msg = val}});console.log(vm.msg);vm.msg = '呵呵';console.log(vm.msg);console.log(data);
减少运算次数, 缓存运算结果. 运用于重复相同的计算
定义函数也可以实现与 计算属性相同的效果,都可以简化运算。
不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会 重新求值。
computed内部只能是同步返回数据,不能异步返回数据
A乘以B={{add()}}
A乘以B={{addplus}}
A乘以B={{reslut}}
methods: {change() {alert('44');},add() {console.log('加法');return this.a * this.b;}},computed: {addplus() {console.log('加法2');return this.a * this.b;}},
Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动。
作用: 当你有一些数据需要随着其它数据变动而变动时,可以使用侦听属性
watch支持在handler异步修改
watch: {//注意:监视的时候必须有一个属性, reslut: '',属性值是什么不确定,后面根据监视去给它赋值a: {handler(newVal, oldVal) {this.reslut = newVal * this.b;//异步修改setTimeout(() => {this.c = 5;}, 5000);},immediate: true //配置这个配置项的作用是无论监视到属性发生不发生变化,都要强制的执行一次回调},b: {handler(newVal, oldVal) {this.reslut = newVal * this.a;},immediate: true //配置这个配置项的作用是无论监视到属性发生不发生变化,都要强制的执行一次回调}}