Vue 构造器
来源:互联网 发布:中指数据库登录 编辑:程序博客网 时间:2024/05/29 15:37
构造器
每个Vue.js 应用都是通过构造函数Vue 创建一个Vue 的根实例启动的:
<script> var vm=new Vum({ // 选项 }) </script>
Vue.js 组件都是被扩展的Vue 实例。
可扩展Vue 构造器,从而用与定义选项可复用的组建构造期:
<script> var myComponent=Vue.extend({ //扩展选项 }) //所有的‘myComponet’ 实例都将以预定义的扩展选项被创建 var myComponentInstance = new myComponent() </script>
属性和方法
每个Vue 实例都会代理其data 对象里所有的属性:
注:只有被代理的属性是响应的,也就是说值的任何改变都是触发视图的重新渲染。
<script> var data={a:1} var vm=new Vue({ data:data }) vm.a === data.a //1 vm.a =2 console.log(data.a) //2 </script>
添加前缀 $ ,以便与代理的data 属性区分
<script> var data = {a:1} var vm = new Vue({ el: '#example', data: data }) vm.$data === data vm.$el === document.getElementById('example') vm.$swatch('a',function(newVal,oldVal){ // 这个回调将在‘vm.a’ 改变后调用 }) </script>
实例声明周期
每个Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模板、挂载实例到DOM,然后在数据变化是更新DOM。
计算属性
计算属性 vs Methods
computed: { reversedMessage:function(){ return this.message.split('').reverse().join('') } } methods:{ reverseMessage:function(){ return this.message.split('').reverse().join('') } }
计算属性与method 两种方法得到的结果相同。不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。也就意味着只要message 没有发生改变,多次访问reversedMessage 计算属性会立刻返回之前的计算结果,而不必再执行函数
阅读全文
0 0
- vue笔记----构造器
- Vue.extend构造器
- Vue学习-构造器
- Vue.extend()构造器
- Vue实例 -构造器
- Vue 构造器
- vue.js基础-构造器
- vue.js基础-构造器
- vue.js基础-构造器
- vue的父子构造器
- Vue2 全局-Vue.extend构造器拓展
- Vue.extend构造器的延伸
- Vue.js学习 Item3 -- 构造器与生命周期
- Vue.js学习系列(十一)---构造器
- 前端框架vue.js系列(9):vue构造、vue组件与vue实例的关系
- Vue源码分析——Vue的构造函数分解
- Vue-Router的路由实例构造配置
- 构造器(构造方法)
- interface详解
- Java 中的 static 使用之静态变量与静态方法
- appium mac环境配置安装(ios自动化)
- 2521-反素数
- RFS(robotframework)的一些问题总结
- Vue 构造器
- android 的一些小技巧(集锦)
- RSA笔记
- 表格
- 元素定位---使用 CSS 选择器定位元素
- 短信验证集成步骤
- IDEA插件变红web项目无法使用,解决方法
- 通过虚拟打印机生成pdf文件来转换EXCEL使用方法
- java 关于项目导出功能实现过程中遇到的问题及思路历程