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

相关内容

热门资讯

安卓大屏系统信息,功能与体验全... 你有没有发现,最近手机界的大屏风潮真是势不可挡啊!安卓大屏系统信息,这可是个热门话题呢!想象拿着一块...
苹果7转安卓系统,探索安卓系统... 你有没有想过,从苹果7转到安卓系统会是怎样的体验呢?想象你手中的那个曾经陪伴你度过无数美好时光的苹果...
安卓系统打卡手机推荐,高效便捷... 你有没有想过,每天早上起床后,第一件事就是拿出手机打卡签到?这已经成为现代生活中不可或缺的一部分了。...
安卓手机装了小米系统,小米系统... 你有没有想过,把安卓手机的灵魂换成小米的系统,会是怎样的体验呢?想象原本流畅的安卓系统,突然间被注入...
安卓汽车系统怎么升级,轻松实现... 亲爱的安卓车主们,你是否也像我一样,对汽车系统升级充满了好奇和期待呢?想象你的爱车就像一部智能手机,...
手机怎么变安卓系统,轻松实现系... 你有没有想过,你的手机居然可以变身成为安卓系统呢?没错,就是那个自由度极高的操作系统!今天,就让我来...
安卓仿ios系统横条,打造流畅... 你有没有发现,最近安卓手机上出现了一种特别的新花样——仿iOS系统的横条设计!这可不是简单的模仿,而...
谷歌汽车安卓系统下载,引领智能... 你有没有想过,未来的汽车可能会变成一个移动的智能中心?想象你的汽车不仅能够带你穿梭在城市的大街小巷,...
安卓系统硬件修复软件,全面解析... 手机里的安卓系统突然卡顿,是不是让你头疼不已?别急,今天就来给你揭秘那些神奇的安卓系统硬件修复软件,...
鸿蒙系统比安卓系统大么,体积对... 你有没有想过,手机里的操作系统,就像是手机的心脏,它的大小、性能,都直接影响到手机的使用体验。今天,...
安卓系统 刷机模式,刷机模式操... 你有没有想过,你的安卓手机其实就像一个隐藏着无限可能的宝藏呢?没错,今天就要来跟你聊聊这个宝藏的秘密...
案卷制作系统下载安卓,高效便捷... 你有没有想过,在手机上也能轻松制作案卷呢?没错,现在就有这么一款神器——案卷制作系统,而且它还支持安...
安卓如何设置ios系统,如何将... 你是不是也和我一样,对安卓手机上的iOS系统充满了好奇?想要在安卓设备上体验一下苹果的生态系统?没问...
安卓系统手环支持门禁,智能穿戴... 你有没有想过,你的安卓系统手环不仅能帮你记录运动数据,还能成为你出入家门的“贴心小助手”?没错,现在...
红米系统和安卓系统吗,融合与创... 你有没有想过,你的手机里那个默默无闻的红米系统,和那个无处不在的安卓系统,它们之间到底有什么样的故事...
苹果怎么倒进安卓系统,一键倒装... 你有没有想过,把苹果手机里的宝贝倒腾到安卓系统里去?听起来是不是有点像变魔术?别急,今天就来手把手教...
安卓系统都能双系统么吗,揭秘双... 你有没有想过,你的安卓手机是不是也能来个“双胞胎”呢?没错,就是那种一个手机里同时运行两个操作系统,...
长安汽车升级安卓系统,安卓系统... 你知道吗?最近长安汽车可是来了一次大变身呢!没错,就是那个我们熟悉的国产汽车品牌,这次他们竟然升级了...
mac电脑装安卓系统,轻松实现... 亲爱的电脑迷们,你是否曾幻想过在你的Mac电脑上运行安卓系统?想象那些你钟爱的安卓应用,在你的Mac...
安卓p系统流畅吗,畅享无忧 你有没有发现,最近安卓P系统成了大家热议的话题呢?不少朋友都在问,这个新系统到底流畅不流畅啊?今天,...