Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇——数据及DOM
数据
data
类型
Object | Function
详细
Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个的key/value对):浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
一旦观察过,不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前,就声明所有的根级响应式属性。
实例创建之后,可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性,因此访问 vm.a 等价于访问 vm.$data.a。
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、 API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。
当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。
如果需要,可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(…)) 得到深拷贝的原始数据对象。
示例代码:
var data = { a: 1 } // 直接创建一个实例 var vm = new Vue({data: data }) vm.a // -> 1 vm.$data === data // -> true // Vue.extend() 中 data 必须是函数 var Component = Vue.extend({data: function () {return { a: 1 }} })
method
类型:
{ [key: string]: Function }
详细
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
示例代码:
<div id="app-method"><button @click="click">click me</button> </div> var app_method = new Vue({el:'#app-method',methods:{click:function () {alert(this.getMessage())},getMessage:function () {return 'hello chain'}} })
点击按钮后,结果如下:
watch
类型
{ [key: string]: string | Function | Object }
详细
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
示例代码:
<div id="app-watch"><p>First Name: <input type="text" v-model="firstname"></p><p>Last Name: <input type="text" v-model="lastname"></p><p>{{fullname}}</p> </div> var app_watch = new Vue({el:'#app-watch',data:{firstname:'',lastname:'',fullname:''},watch:{firstname:function (newVal, oldVal) {this.fullname = newVal + ' ' + this.lastname},lastname:function (newVal, oldVal) {this.fullname = this.firstname + ' ' + newVal}} })
在输入框内输入内容,便可看到如下结果:
computed
类型
{ [key: string]: Function | { get: Function, set: Function } }
详细
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果实例范畴之外的依赖 (比如非响应式的 not reactive) 是不会触发计算属性更新的。
示例代码:
<div id="app-computed"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var app_computed = new Vue({el:'#app-computed',data:{message:'hello chain'},computed:{reversedMessage:function () {return this.message.split('').reverse().join('')}} })
运行结果如下图:
computed与methods对比
我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
computed与watch对比
Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:watch 属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。
例如之前讲到watch的时候的那个例子,如果换成computed的话,代码如下:
<div id="app-computed-watch"><p>First Name: <input type="text" v-model="firstname"></p><p>Last Name: <input type="text" v-model="lastname"></p><p>{{fullname}}</p> </div> var app_computed_watch = new Vue({el:'#app-computed-watch',data:{firstname:'',lastname:''},computed:{fullname:function () {return this.firstname + ' ' + this.lastname}} })
运行结果如下:
在这种场合下,这种写法是不是更好呢?答案是肯定的。
DOM
el
类型
string | HTMLElement
限制
只在由 new 创建的实例中遵守。
详细
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
在实例挂载之后, 元素可以用 vm.$el 访问。
如果这个选项在实例化时有作用,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。
template
类型
string
详细
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发 slot。
如果值以 # 开始,则它用作选项符,将使用匹配元素的 innerHTML 作为模板。
例如:
Vue.component('child-component', {template: '<div v-show="someChildProperty">Child</div>',data: function () {return {someChildProperty: true}} })
完
转载请注明出处
上一节:Vue学习笔记入门篇——安装及常用指令介绍
返回目录
转载于:https://www.cnblogs.com/ChainZhang/p/7130479.html
Vue学习笔记入门篇——数据及DOM相关推荐
- Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
- C# 学习笔记入门篇(上)
文章目录 C# 学习笔记入门篇 〇.写在前面 Hello World! 这篇学习笔记适合什么人 这篇学习笔记到底想记什么 附加说明 一.命名空间 "进入"命名空间 嵌套的命名空间. ...
- R语言学习笔记——入门篇:第一章-R语言介绍
R语言 R语言学习笔记--入门篇:第一章-R语言介绍 文章目录 R语言 一.R语言简介 1.1.R语言的应用方向 1.2.R语言的特点 二.R软件的安装 2.1.Windows/Mac 2.2.Lin ...
- R语言学习笔记——入门篇:第三章-图形初阶
R语言 R语言学习笔记--入门篇:第三章-图形初阶 文章目录 R语言 一.使用图形 1.1.基础绘图函数:plot( ) 1.2.图形控制函数:dev( ) 补充--直方图函数:hist( ) 补充- ...
- vue-resource post php,Vue学习笔记进阶篇——vue-resource安装及使用
简介 vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到 ...
- Vue学习笔记进阶篇——多元素及多组件过渡
本文为转载,原文:Vue学习笔记进阶篇--多元素及多组件过渡 多元素的过渡 对于原生标签可以使用 v-if/v-else.但是有一点需要注意: 当有相同标签名的元素切换时,需要通过 key 特性设置唯 ...
- Vue学习-基础入门篇(三万字收藏篇)
目录 前言 一.Vue介绍 1.Vue是什么 2.Vue的特点 二.Vue.js的安装 1.使用Vite创建 三.Vue声明式渲染 四.Data Property 和方法 1.Data Propert ...
- JavaScript学习笔记 - 入门篇(1)- 准备
为什么学习JavaScript 一.你知道,为什么JavaScript非常值得我们学习吗? 所有主流浏览器都支持JavaScript. 目前,全世界大部分网页都使用JavaScript. 它可以让网页 ...
- 易语言学习笔记——入门篇
易语言学习笔记20180709 最早接触易语言是三年前的事情了,那时候是因为DNF这个游戏我才知道了易语言这个编程语言,当时对他就非常的憧憬.只不过那时候易语言的学习资源比较少,而且自身的学业比较重就 ...
最新文章
- vscode:解决操作git总让输入用户名及密码问题
- 从AK47到乌兹,这款控制器模块可以模拟不同物体体感
- function_core.php is missing下载,discuz中 function_core.php中的dmkdir有死环bug
- 文本编辑器中实现设置工具栏和状态栏可见性的功能
- 【Linux网络编程】TCP网络编程中connect()、listen()和accept()三者之间的关系
- Linux下的/bin、/sbin、/usr/bin、/usr/sbin目录
- 64位Ubuntu kylin 16.04显示CPU内存使用率
- 搜狗输入法自定义短语(克制名词解释、背诵类问题)
- WordPress的MySQL宕_wordpress数据库mysql使用phpmyadmin打开数据表,提示table “xxx” doesn`t exist...
- JUnit编写单元测试代码注意点小结
- Asterisk中实现回拔
- python单元测试示范卷_Python单元测试--Unittest
- Illustrator 教程,如何在 Illustrator 中更改图稿颜色?
- 六石管理学:夸大成绩,当事人自己是否知道
- Iframe跳转问题
- 状态输出导航栏html,网页导航条代码
- 13 费氏数列或叫斐波那契数列fibonacci
- 京东到家自动化测试平台的探索与实践
- 如何选择北京市医疗定点机构---初级班
- 机器学习之决策树(机器学习技法)
热门文章
- mysql 数据回滚_Mysql数据误删除快速回滚
- Java技术:Mybatis-plus常用API全套教程,值得收藏!
- 关系数据库基础:函数依赖知识笔记
- .NET平台功能最强大,性能最佳的JSON库
- linux中国用户,Linux中国 适合新用户的Linux
- docker 主进程 日志_运维笔记--docker高效查看后台日志
- 《Java 高并发》04 线程的基本操作
- mysql导入sqlserver数据库表
- yum搭建本地仓库、国内源、下载rpm包、源码安装
- 手把手教你写高质量Android技术博客,画图工具,录像工具,Markdown写法