Vue 教程第四篇—— Vue 实例化时基本属性
实例元素 el
实例元素指的是 Vue 实例化时编译的容器元素,或者说是 Vue 作用的元素容器
<div id="app"></div>
var vm = new Vue({el: '#app'})
也可以为实例元素指定其它选择器
<div class="app"></div>
var vm = new Vue({el: '.app'})
可以有多个实例元素
<div id="app1"></div><div id="app2"></div>
var vm = new Vue({el: '#app1'})var vm = new Vue({el: '#app2'})
如果有多个相同的实例元素则只有第一个起效
<div id="app"></div><!--这个只当普通 html 输出,不会被 Vue 编译--><div id="app"></div>
var vm = new Vue({el: '#app'})
也可以在实例化的时候不指定实例元素,后面用 $mount() 手动进行挂载
<div id="app"></div>
var vm = new Vue({//option})vm.$mount("#app");
可以通过实例获取实例元素
var vm = new Vue({el: '#app'})console.log(vm.$el)
数据对象 data
在 MVVM 模式中充当着 M(Model) 数据模型层,更多的体现于将 M 层映射到 V 层
<div id="app"><!--结果为:文本--><span>{{key1}}</span><!--结果为:11--><span>{{key2 + key3}}</span><!--结果为:key4_1--><span>{{key4.key4_1}}</span><!--结果为:{"key5_1": "key5_1"}--><span>{{JSON.stringify(key5[0])}}</span></div>
var array = [{key5_1: "key5_1"}];var vm = new Vue({el: '#app',data: {key1: '文本',key2: 1,key3: 10,key4: {key4_1: 'key4_1'},key5: array}}
可以通过实例获取数据对象
var vm = new Vue({el: '#app',data: {}})console.log(vm.$data)
事件处理器 methods
元素可以通过 v-on:事件 || @事件 进行绑定事件,事件中的 this 默认指向实例 vm
<div id="app"><input type="button" @click="count += 1" value="监听事件"><span>{{count}}</span></div>
var vm = new Vue({el: '#app',data: {count: 0}})
上面的情况仅适用于很简单的处理,复杂的处理可以需要单独处理上面的情况仅适用于很简单的处理,复杂的处理可以需要单独处理
<div id="app"><input type="button" value="确认" @click="counter"/><p>确认按钮被点击了 {{ counter }} 次。</p></div>
var vm = new Vue({el: '#app',data: {count: 0},methods: {counter: function(){this.count += 1;}}})
在 js 的事件中默认会有个 event 对象,Vue 在事件上对 event 对象进行继承二次封装,改名为 $event,在事件当中默认传过去
<div id="app"><input type="button" @click="eventer" count="1" value="event 对象"><span>{{count}}</span></div>
var vm = new Vue({el: '#app',data: {count: 0},methods: {eventer: function(event){var _count = event.target.getAttribute('count') * 1;this.count += _count;event.target.setAttribute('count', _count);}}})
在事件中很多情况下要传参数,Vue 也可以在事件中传参数
<div id="app"><input type="button" @click="parameter(10, $event)" value="事件传参数"><span>{{count}}</span></div>
var vm = new Vue({el: '#app',data: {count: 0},methods: {parameter: function(n, event){this.count += n;event.target.setAttribute('disabled', true);}}})
事件效果预览
计算属性 computed
computed 主要是针对 data 的属性进行操作,this 的指针默认指向实例 vm
<p>{{reversedMessage}}</p>
data: {message: 'ABC'},computed: {reversedMessage: function(){return this.message.split('').reverse().join('')}}
渲染结果为
<p>CBA</p>
在 computed 的属性中默认有两个属性,一个是 get,我们称之为 getter,另一个是 set,我们称之为 setter,所以也可以这样写:
data: {message: 'ABC'},computed: {reversedMessage: {get: function(){return this.message.split('').reverse().join('')}}}
当我们在 V 层调用 {{reversedMessage}} 的时候会自动触发 reversedMessage.get()
setter 的逻辑也是一样,当改变对应的属性时,会自动触发 set 方法
<div id="app"><!--调用了 fullName.get()--><p>{{fullName}}</p><input type="text" v-model="newName"><!--changeName 事件改变了 fullName 的值,所以会自动触发 fullName.set()--><input type="button" value="changeName" @click="changeName"></div>
var vm = new Vue({el: '#app',data: {firstName:'DK',lastName: 'Lan',newName: ''},computed: {fullName:{get: function(){return this.firstName + '.' + this.lastName},set: function(newValue){this.firstName = newValue}}},methods: {changeName: function(){this.fullName = this.newName;}}})
Vue 在 getter 上面作了基于对应属性的依赖缓存,也就是说多次调用同一个属性,get 只会执行一次。而事件在每次触发时都会被调用,当然在改变该属性值的时候会再次被调用
<div id="app"><!--fullName.get 只被调用一次--><p>{{fullName}}</p><p>{{fullName}}</p><p>{{fullName}}</p><!--每次点击都会调用 changeName--><input type="button" value="changeName" @click="changeName('Vue')"></div>
var vm = new Vue({el: '#app',data: {firstName:'DK',lastName: 'Lan',newName: ''},computed: {fullName:{get: function(){return this.firstName + '.' + this.lastName},set: function(newValue){this.firstName = newValue}}},methods: {changeName: function(txt){this.newName = txt;//如果在这里改变 this.fullName 的值,则会再次自动触发对应的 getter}}})
计算属性效果预览
监听器 watch
Vue 提供了对单个属性的监听器,当该属性发生改变的时候,自动触发,此项使用不当会影响性能,所以慎用。
<input type="text" v-model="a"><p>旧值:{{aOldVal}}</p><p>新值:{{aNewVal}}</p>
{data: {a: 1},watch: {a: function (newVal, oldVal) {//自动触发此方法console.log('new: %s, old: %s', newVal, oldVal)},} }
也可以把方法放到 data 对象中
{data: {a: 1,changeA: function (newVal, oldVal) {//自动触发此方法console.log('new: %s, old: %s', newVal, oldVal)}},watch: {a: 'changeA'} }
watch 与 compute 区别:
- computed 创建新的属性, watch 监听 data 已有的属性
- compute 会产生依赖缓存
- 当 watch 监听 computed 时,watch 在这种情况下无效,仅会触发 computed.setter
{computed: {a: {get: function(){return '';},set: function(newVal){//会触发此项console.log('set val %s', newVal);}} },watch: {a: function(){//不会被触发console.log('watch');}} }
监听器效果预览
Vue 教程第四篇—— Vue 实例化时基本属性相关推荐
- 史上最简单的SpringCloud教程 | 第四篇:断路器(Hystrix)
转:https://blog.csdn.net/forezp/article/details/69934399 最新版本: 史上最简单的SpringCloud教程 | 第四篇:断路器(Hystrix) ...
- MVC教程第四篇:传递表单数据
MVC教程第四篇:传递表单数据 摘要 本文将完成我们"MVC公告发布系统"的公告发布功能,以此展示在ASP.NET MVC中如何传递处理表单的数据. 前言 通过前几篇文章, ...
- SpringCloud教程 | 第四篇:断路器(Hystrix)
SpringCloud教程 | 第四篇:断路器(Hystrix) 在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTempl ...
- SpringCloud核心教程 | 第四篇:服务注册与发现 Consul篇
Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中涉及的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全 ...
- Vue 教程第十七 篇—— Vuex 之 module
module 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块( ...
- Vue 教程第十一篇—— vue-cli
vue-cli 基于 webpack 构建工具下的一个 vue 的脚手架.关于脚手架,个人建议尽量用最简单的,然后在这个基础上按需求构建自己的项目. 这里会用到一个简单的脚手加,里面只有最简单的运行组 ...
- 史上最简单的SpringCloud教程 | 第四篇:断路器(Hystrix)--有BUG,注意看我的备注
转载请标明出处: http://blog.csdn.net/forezp/article/details/69934399 本文出自方志朋的博客 在微服务架构中,根据业务来拆分成一个个的服务,服务 ...
- 史上最简单的SpringCloud教程 | 第四篇:断路器(Hystrix)--里面有BUG,所以我转载改一下
017年04月09日 21:14:05 阅读数:271535 转载请标明出处: http://blog.csdn.net/forezp/article/details/69934399 本文出自方 ...
- Vue学习(四)—— vue中的ajax
文章目录 第四部分 vue中的ajax 一.axios 1.安装 2.引入 二.vue脚手架配置代理 1.方法一 2.方法二 三.github用户搜索案例 1.接口地址 2.vue 项目中常用的 2 ...
最新文章
- 2017光棍节新生训练赛
- java 解析二进制_java实现解析二进制文件(字符串、图片)
- 编程行业里面的新行话
- (王道408考研操作系统)第五章输入/输出(I/O)管理-第一节3:I/O控制方式
- node 抓取api数据导出为excel表格
- redis的HyperLogLog与布隆过滤器
- 程序员面向软件开发时,如何成功?
- Entity Framework 4 in Action读书笔记——第六章:理解实体的生命周期(三)
- [妙味DOM]第一课:DOM基础概念、操作
- 2022年成都市市长质量奖申报、评选、表彰、监督管理等活动
- QCC3040---uart configuration
- 战网服务器组件,架设自己的战网服务器
- 全球尺度的高分辨率遥感产品
- Ubuntu 16.04/18.04/20.04/deepin v20安装insight的方法
- 如何设计好一款iOS游戏UI的细节
- fiilt1左耳无法同步_【FIIL T1 蓝牙耳机使用总结】功能|操作|闪连|防水|音质_摘要频道_什么值得买...
- 基于神经网络和小波变换的癫痫脑电诊断比较
- sap发出商品差异差异分摊_什么是差异隐私?
- AIPNet: Image-to-Image Single Image Dehazing with Atmospheric Illumination Prior
- 《大学章句集注》-读书笔记之一
热门文章
- 威海二职工业机器人专业_工业机器人专业就业前景-山东省好的中专学校
- php禁用eval,zp blog
- tortoisesvn创建部署项目_FrameWork如何进行云托管部署
- leetcode116. 填充每个节点的下一个右侧节点指针
- 在CentOS6.2下安装DNS服务软件Bind并快速配置简单实例
- GCC如何产生core dump
- sql倒序查询语句_SQL丨1.基本查询语句复习
- 对于以太坊虚拟机 (EVM)及其相关知识的讲解
- Android UI卡顿监控
- 钱线观察:货币基金T+0驾到 活期存款将死?