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

相关内容

热门资讯

免费升级安卓系统吗,畅享智能新... 亲爱的读者们,你是否也像我一样,对安卓系统的免费升级充满了好奇和期待呢?想象你的手机从老旧的系统升级...
运行安卓app的系统,系统版本... 你有没有想过,你的手机里那些运行得风生水起的安卓应用,它们究竟是在什么样的系统下翩翩起舞的呢?今天,...
安卓系统保存照片,安卓系统照片... 手机里的照片是不是越来越多,你有没有想过,这些珍贵的回忆是怎么被安卓系统保存下来的呢?今天,就让我带...
手机安卓系统会卡吗,安卓手机系... 你有没有发现,手机用久了,尤其是安卓系统,有时候会变得有点“慢吞吞”的?这不,今天就来聊聊这个话题,...
安卓系统自己安装mim,And... 你有没有发现,你的安卓手机最近有点儿“聪明”了呢?它竟然自己动手安装了MIM(Mirroring)应...
iwork10安卓系统,创新办... 你有没有发现,最近你的手机是不是变得越来越卡了?别急,别急,让我来给你介绍一款神器——iWork10...
安卓手机装deepin系统,安... 你有没有想过给你的安卓手机换换口味呢?别再局限于那些千篇一律的操作系统了,今天就来给你揭秘如何让你的...
安卓系统不收钱吗,安卓系统免费... 你有没有想过,为什么安卓系统不用你掏腰包呢?是不是觉得它就像那免费的午餐,来者不拒,享用起来毫无负担...
8848系统是安卓的,安卓生态... 你知道吗?在手机操作系统的大千世界里,有一个特别的存在,那就是8848系统。它可不是什么小角色,而是...
安卓系统 木马删不掉,屡删不绝... 安卓系统被木马盯上的那些事儿在数字化时代,手机已经成为我们生活中不可或缺的一部分。而安卓系统,作为全...
ce系统安装安卓地图,探索智能... 最近是不是觉得手机上的地图导航有点不给力?别急,今天就来给你详细说说如何给CE系统安装安卓地图,让你...
安卓4.1系统无法升级,无法升... 你有没有遇到过这种情况?手机用了好几年,系统却怎么也升级不了?别急,今天就来聊聊这个让人头疼的安卓4...
kindle如何改安卓系统,如... 亲爱的读者们,你是否也有过这样的经历:手中的Kindle电子书阅读器突然间变得有些“不按套路出牌”,...
国内深度修改安卓系统,揭秘国内... 你知道吗?在我国,有一群技术大牛正在悄悄地搞事情呢!他们竟然对安卓系统进行了深度修改,让这个全球最流...
苹果还是安卓系统快,谁更胜一筹... 你有没有想过,手机里那个小小的操作系统,竟然能决定你的使用体验?今天,咱们就来聊聊这个热门话题:苹果...
安卓导航改苹果系统,无缝切换体... 你有没有想过,把安卓导航系统换成苹果系统,会是怎样的体验呢?想象你那熟悉的地图导航,突然间换了个“脸...
安卓导航如何进系统,系统生成与... 你有没有想过,你的安卓手机导航功能竟然可以深入到系统的核心呢?没错,今天就要来跟你聊聊这个神奇的话题...
电脑上面装安卓系统,全方位概述 你有没有想过,在你的电脑上装一个安卓系统?听起来是不是有点不可思议?但你知道吗,这可不是什么天方夜谭...
苹果刷安卓虚拟系统,刷机虚拟系... 你有没有想过,你的苹果手机竟然能装上安卓的虚拟系统?听起来是不是有点不可思议?别急,今天就来带你一探...
安卓 加密文件系统,安全存储与... 你知道吗?在安卓的世界里,有一个神秘的守护者,它就是安卓加密文件系统。今天,就让我带你一探究竟,揭开...