南宁做网站外包,网站建设龙兵科技,网上商城采购流程,网站建设基础教程视频本文为转载#xff0c;原文#xff1a;Vue学习笔记入门篇——数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter#xff0c;从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个…本文为转载原文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 idapp-methodbutton clickclickclick 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 idapp-watchpFirst Name: input typetext v-modelfirstname/ppLast Name: input typetext v-modellastname/pp{{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 idapp-computedpOriginal message: {{ message }}/ppComputed 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 idapp-computed-watchpFirst Name: input typetext v-modelfirstname/ppLast Name: input typetext v-modellastname/pp{{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-showsomeChildPropertyChild/div,data: function () {return {someChildProperty: true}}
}) 完 转载请注明出处上一节Vue学习笔记入门篇——安装及常用指令介绍返回目录转载于:https://www.cnblogs.com/ChainZhang/p/7130479.html
