Vue.js中extend选项和delimiters选项的比较


Posted in Javascript onJuly 17, 2017

Vue.js中extend选项和delimiters选项的比较

extend选项

允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用Vue.extend,这主要是为了便于扩展单文件组件,它和mixin有类似之处

<div id="app">
  {{num}}
  <button @click="add">addNumber</button>
</div>
<script type="text/javascript">
  var extendsObj = {
    updated: function() {
      console.log("extend updated");
    }
  };
  new Vue({
    el: "#app",
    data: {
      num : 1
    },
    methods : {
      add : function() {
        console.log("原生 add");
        this.num++;
      }
    },
    updated : function(){
      console.log('原生updated');
    },
    extends : extendsObj,
  });
</script>

上面的代码扩展的是updated,执行结果如下:

Vue.js中extend选项和delimiters选项的比较

可以看出扩展的update先执行,那么下面看看扩展methods的时候,只是下面的部分不同而已

var extendsObj = {
    updated: function() {
      console.log("extend updated");
    },
    methods : {
      add : function() {
        console.log("extend add");
      }
    }
  };

执行结果其实就是上面图片的样子,也就是说,对于methods来说,遇到同名的函数,则执行的是非扩展的函数,如果扩展的是非同名的函数,则按照扩展之后的执行

delimiters选项

默认的插值的写法是{{}},但是在某些情况下,我们需要使用一些不一样的方式,比如这样${}

<div id="app">
  ${num}
  <button @click="add">addNumber</button>
</div>
new Vue({
    el: "#app",
    data: {
      num : 1
    },
    methods : {
      add : function() {
        console.log("原生 add");
        this.num++;
      }
    },
    delimiters: ['${', '}']
  });

注意:delimiters对应的是一个数组

以上就是Vue.js中extend选项和delimiters选项的比较的讲解,本站关于Vue.js的文章还很多,大家可以搜索查阅,感谢阅读,谢谢大家对本站的支持!

Javascript 相关文章推荐
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
Vue.js中组件中的slot实例详解
Jul 17 #Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 #Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 #Javascript
详解利用jsx写vue组件的方法示例
Jul 17 #Javascript
Javascript实现找不同色块的游戏
Jul 17 #Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 #Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 #Javascript
You might like
php学习之 数组声明
2011/06/09 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
JavaScript 学习技巧
2010/02/17 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
javascript弹出拖动窗口
2015/08/11 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
金士达面试非笔试
2012/03/14 面试题
物理系毕业生自荐信
2013/11/01 职场文书
小学教师事迹材料
2014/01/13 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技