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搜索框效果实现方法
Jan 16 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
vue-test-utils初使用详解
May 23 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
第十一节--重载
2006/11/16 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
重新认识php array_merge函数
2014/08/31 PHP
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
JS实现图片切换效果
2018/11/17 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Python3 queue队列模块详细介绍
2018/01/05 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
pytorch 常用线性函数详解
2020/01/15 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
正风肃纪剖析材料
2014/02/18 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
经典演讲稿汇总
2014/05/19 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
员工家属慰问信
2015/03/24 职场文书
爱国教育主题班会
2015/08/14 职场文书
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL
Redis实现分布式锁的五种方法详解
2022/06/14 Redis