vue

如何安装Vue

进入vue官方文档 点击上方学习,左侧安装目录


下载开发版本或者生产版本


第一步:准备一个容器


引入vue.js文件


第二步:创建一个vue对象


指定当前vue对象操作Dom容器


什么是代理对象

1.定义原对象


2.定义代理对象


代理对象修改了原对象的数据



看一下Vue是如何使用代理对象

1.定义原对象


2.将源对象传递给Vue的Data选项,背后做了两件事情

 一.设置Vue实例的_data属性,作为当前源对象的代理对象。(响应式的核心)

 二.将_data里面代理的所有数据,再添加到当前Vue实例身上。(为了Vue实例方便调用数据)

三、给对添加属性的几种方式

方式一:

obj.name = '张三'

方式二:

obj3['age'] = 20

方式三:

方式三:通过Object对象的defineProperty方法,给指定的对象添加指定的属性

 使用这种方式,给对象添加的属性,默认不可被枚举,不能被删除

使用这种方式,给对象添加的属性,对属性的保护措施更加严格


四、Vue响应式的原理


Vue的常用指令

v-bind:用于绑定属性,通过v-bind:绑定过的属性,可以在属性值可以写表达式 

v-on:用于绑定事件,通过v-on:绑定过的事件,可以指定Vue实例定义的方法

v-bind:可以用:简写。 

v-on:可以用@简写。

如果事件方法的代码不是很多,可以写在行内,注意:这里不能写this,$event是事件对象

通过v-model指令,可以实现对数据的双向绑定,

v-model指令是 v-bind:value 和 v-on:input 的简写。


条件渲染和列表渲染条件渲染和列表渲染


 v-if 和 v-show 如何选择

如果页面需要反复切换显示和隐藏,用v-show。

如果页面中有很多模块需要隐藏,用户可能只对其中的某个模块感兴趣,用v-if,所有的模块首屏加载时,全部都不渲染,当用户选择指定的模块后,再渲染指定的模块。

 v-for指令,用于列表渲染;类型渲染时,通常都要绑定key,key的作用是提高渲染性能。

注意:key必须是唯一,暂时可以将列表的索引作为key值去使用

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容