Vue2的基本使用
创始人
2024-05-30 10:24:00
0

一、vue的基本使用

第一步

引入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

 双向数据绑定  一般情况下只针对表单类元素才使用双向数据绑定 
 MVVM 说的就是双向数据绑定模型    
 M代表model 就是我们的数据   V代表的view 就是我们的页面  VM代表的就是Vue的实例化对象
 双向数据绑定 :数据可以从data 流向页面 ,页面的数据被更新,也会从页面流向data.

  

四、Object.defineProperty的使用

这个方法在为对象添加或者修改  属性为响应式属性

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计算属性

减少运算次数, 缓存运算结果. 运用于重复相同的计算

定义函数也可以实现与 计算属性相同的效果,都可以简化运算。

不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会 重新求值。

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;}},

六、watch 侦听器

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 //配置这个配置项的作用是无论监视到属性发生不发生变化,都要强制的执行一次回调}}

相关内容

热门资讯

安卓系统用的华为应用,探索智能... 你知道吗?在安卓系统里,华为的应用可是个宝库呢!它们不仅功能强大,而且使用起来超级方便。今天,就让我...
安卓变ios系统魅蓝 你知道吗?最近有个朋友突然告诉我,他要把自己的安卓手机换成iOS系统,而且还是魅蓝品牌的!这可真是让...
幻书启世录安卓系统,安卓世界中... 亲爱的读者们,你是否曾在某个夜晚,被一本神奇的书所吸引,仿佛它拥有着穿越时空的力量?今天,我要带你走...
电脑安装安卓系统进不去,安卓系... 电脑安装安卓系统后竟然进不去,这可真是让人头疼的问题啊!你是不是也遇到了这种情况,心里直呼“怎么办怎...
用键盘切换控制安卓系统,畅享安... 你有没有想过,用键盘来控制你的安卓手机?是的,你没听错,就是那个我们每天敲敲打打的小玩意儿——键盘。...
小米安卓镜像系统在哪,小米安卓... 你有没有想过,你的小米手机里有一个隐藏的宝藏——安卓镜像系统?没错,就是那个可以让你的手机瞬间变身成...
安卓手机下载排班系统,高效排班... 你有没有想过,每天忙碌的工作中,有没有什么好帮手能帮你轻松管理时间呢?今天,就让我来给你介绍一个超级...
桌面组件如何弄安卓系统,桌面组... 亲爱的桌面爱好者们,你是否曾梦想过将安卓系统搬到你的电脑桌面上?想象那些流畅的动画、丰富的应用,还有...
安卓13系统介绍视频,新功能与... 亲爱的读者们,你是否对安卓13系统充满好奇?想要一探究竟,却又苦于没有足够的时间去研究?别担心,今天...
车机安卓7.1系统,功能升级与... 你有没有发现,现在的车机系统越来越智能了?尤其是那些搭载了安卓7.1系统的车机,简直就像是个贴心的智...
安卓系统下如何读pdf,And... 你有没有遇到过这种情况:手机里存了一大堆PDF文件,可是怎么也找不到一个能顺畅阅读的工具?别急,今天...
安卓系统全国通用的吗,畅享智能... 你有没有想过,为什么你的手机里装的是安卓系统呢?安卓系统,这个名字听起来是不是有点神秘?今天,就让我...
假苹果手机8安卓系统,颠覆传统... 你有没有想过,如果苹果手机突然变成了安卓系统,会是怎样的景象呢?想象那熟悉的苹果外观,却运行着安卓的...
安卓12.0系统vivo有吗,... 你有没有听说最近安卓系统又升级啦?没错,就是那个让手机焕然一新的安卓12.0系统!那么,咱们国内的手...
核心芯片和安卓系统,探索核心芯... 你知道吗?在科技的世界里,有一对“黄金搭档”正悄悄改变着我们的生活。他们就是——核心芯片和安卓系统。...
如何调安卓系统屏幕颜色,安卓系... 亲爱的手机控们,你是否曾觉得安卓系统的屏幕颜色不够个性,或者是因为长时间盯着屏幕而感到眼睛疲劳?别担...
旧台式电脑安装安卓系统,轻松安... 你那台旧台式电脑是不是已经服役多年,性能逐渐力不从心,却又不忍心让它退役呢?别急,今天就来教你怎么给...
美国要求关闭安卓系统,科技霸权... 美国要求关闭安卓系统:一场技术革新还是政治博弈?在数字化时代,智能手机已经成为我们生活中不可或缺的一...
安卓系统日记本 你有没有发现,手机里的安卓系统日记本,简直就是记录生活点滴的宝藏库呢?想象每天忙碌的生活中,有没有那...
安卓手机广告最少的系统,探索安... 你有没有发现,用安卓手机的时候,广告总是无处不在,让人烦得要命?不过别急,今天我要给你揭秘一个秘密—...