extend选项和delimiters选项
来源:互联网 发布:开淘宝卖什么比较好 编辑:程序博客网 时间:2024/06/01 08:07
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
,执行结果如下:
可以看出扩展的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
对应的是一个数组
阅读全文
0 0
- extend选项和delimiters选项
- 选项
- SQLAlchemy列类型和选项、关系选项
- 选项卡和对话框
- VC调试和选项
- QUOTED_IDENTIFIER和ANSI_NULLS选项
- 添加和删除选项
- 编译和编译选项
- check_http语法和选项
- GCC 选项和参数
- SO_RCVLOWAT和SO_SNDLOWAT选项
- Shell 变量和选项
- swift 可选项 "?" 和 "!"
- iptables的常用命令和选项
- ld选项和lds文件
- 可折叠控件和选项卡
- gdb命令和常用选项
- gcc编译选项和使用
- ES6语法(7)
- 基于ZoomEye钟馗之眼API的python脚本
- 消息队列基本知识
- 【设计模式】—— 解释器模式Interpret
- 配置xml
- extend选项和delimiters选项
- [jbb0523整理]压缩感知中的数学知识:凸优化
- 动态规划:最大字段和问题
- Android volley框架加载网络图片
- 新闻客户端案例
- Tomcat下载和安装使用
- 接口测试之Postman简介
- 项目的依赖传递(项目clean package install 以及依赖注入)
- 自定义-eclipse启动画面