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 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
手机端转换rem适应
2017/04/01 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python Series从0开始索引的方法
2018/11/06 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python Django搭建网站流程图解
2020/06/13 Python
python 实现图片裁剪小工具
2021/02/02 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
幼儿园评语大全
2014/04/17 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
2015年党员发展工作总结
2015/05/13 职场文书