Vue实例的对象参数options的几个常用选项详解


Posted in Javascript onNovember 08, 2019

一. 新建一个Vue实例可以有下列两种方式:

1.new一个实例

var app= new Vue({
 el:'#todo-app', // 挂载元素
 data:{ // 在.vue组件中data是一个函数,要写成data () {}这种方式
  items:['item 1','item 2','item 3'],
  todo:''
 },
 methods:{ // 方法成员
  rm:function(i){
   this.items.splice(i,1)
  }
 }
})
// 之后再

export default app // 默认输出,可在其他组件引用

2. 直接

export default {
 name: '',
 components: {},
 data: () {}, // data函数成员
 watch: {}, // watch监视成员
 computed: {}, // computed计算成员
 created: function () {},
 methods: {}, // methods对象成员
 actions: {}
}

二. Vue实例,我参数options。它是一个对象。可以选择如下选项:

data函数成员

methods对象成员

模板template

挂载元素el

生命周期钩子

props属性声明

computed计算成员

watch监视成员

选项:watch监视

watch监视是一个对象,键是需要观察的表达式,值可以是

1.回调函数,

2.值也可以是方法名,

3.或者包含选项的对象。

ps:表达式暂时可以理解为一个可以得到值的式子

Ⅰ回调函数,来监视一个值的变化(监视data函数体的变量)

如:

data () {
  return {
   replaceList: []
  }
 },
 watch: {
  replaceList: function (val, oldVal) {
   console.log('replaceList changed')
  }
 }

Ⅱ第2种形式:”值也可以是方法名“,可以把watch的函数移到methods内。

则上面的形式可以改为:

data () {
  return {
   replaceList: []
  }
 },
 watch: {
  replaceList: 'changed'
 },
 methods: {
  changed: function (val, oldVal) {
   console.log('replaceList changed')
  }
 }

Ⅲ包含选项的对象

如:上面两种就等同于

data () {
  rerurn {
   replaceList: 1
  }
 },
 mounted: function () {
  this.$watch('replaceList',function(val, oldVal){
    console.log('replaceList changed')
  })
 },
 methods: {
 
 }

选项:computed计算成员

虽然在Mustache语法内可以使用表达式,即{{}}。比如为数字前加入¥符号,可以使用表达式:

{{‘¥'+money}}

可以,但不推荐。这种情形应尽量用计算成员:

在vue-cli脚手架的.vue组件中

实现RMB前加上美元符号

<template>
 <input v-model="money"> // 响应式的
 <span>{{RMB}}</span> // {{}}中可以是变量,也可以是方法名
</template>
 
<script>
 data () {
  rerurn {}
 },
 computed: {
  RMB: function () {
   return '¥'+ this.money
  }
 }
</script>

引入了计算成员RMB来做长表达式的计算,而在HTML内保持清晰的字段引用即可。这样做依然可以享有响应式编程的好处:当money值改变时,引用RMB的标签值也会被自动更新。

以上这篇Vue实例的对象参数options的几个常用选项详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript学习笔记之创建对象
Mar 25 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
Vuex中实现数据状态查询与更改
Nov 08 #Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 #Javascript
vue.js的简单自动求和计算实例
Nov 08 #Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 #Javascript
Vue搭建后台系统需要注意的问题
Nov 08 #Javascript
vue视频播放暂停代码
Nov 08 #Javascript
vue-dplayer 视频播放器实例代码
Nov 08 #Javascript
You might like
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
python实现画圆功能
2018/01/25 Python
对python中的高效迭代器函数详解
2018/10/18 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
python学生管理系统的实现
2020/04/05 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
外企求职信范文分享
2013/12/31 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
教师个人鉴定材料
2014/02/08 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
Django中session进行权限管理的使用
2021/07/09 Python