vue extend 的基本使用
vue.extend 局部注册 的应用2
请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。所以他不能直接在new Vue中这样使用： new Vue({components: fuck})
最终还是要通过Vue.components注册才可以使用的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Vue中注册组件</title>
</head>
<body>
<div id="app">
<todo :todo-data="groceryList"></todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue " type="text/javascript"></script>
<script>
/**
* 请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。
* 所以他不能直接在new Vue中这样使用： new Vue({components: fuck})
* 最终还是要通过Vue.components注册才可以使用的。
*/ // 构建一个子组件
var todoItem = Vue.extend({
template: ` <li> {{ text }} </li> `,
props: {
text: {
type: String,
default: ''
}
}
}) // 构建一个父组件
var todoWarp = Vue.extend({
template: `
<ul>
<todo-item
v-for="(item, index) in todoData"
v-text="item.text"
></todo-item>
</ul>
`,
props: {
todoData: {
type: Array,
default: []
}
},
// 局部注册子组件
components: {
todoItem: todoItem
}
}) // 注册到全局
Vue.component('todo', todoWarp) new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
</html>
54、vue.extend 局部注册 的应用1
请注意，在实例化extends组件构造器时，传入属性必须是propsData、而不是props哦
另外，无论是Vue.extend还是Vue.component 里面的data定义都必须是函数返回对象，如 Vue.extend({data: function () {return {}}})。除了new Vue可以直接对data设置对象之外吧，如 new Vue({data: {}});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Vue中注册组件</title>
</head>
<body>
<div id="todoItem"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript"></script>
<script> // 局部注册组件
var todoItem = Vue.extend({
data: function () {
return {
todoData: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
},
template: `
<ul>
<li v-for='(d, i) in todoData' :key="i">
{{ d.text }}
</li>
</ul>
`
}); // 请注意，在实例化extends组件构造器时，传入属性必须是propsData、而不是props哦
new todoItem({
propsData: {
todoData: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
}).$mount('#todoItem') </script>
</html>
vue extend 的基本使用的更多相关文章
- vue.mixin与vue.extend
vue.mixin 全局注册一个混合,影响注册之后所有创建的每个 Vue 实例.谨慎使用全局混合对象,因为会影响到每个单独创建的 Vue 实例(包括第三方模板).大多数情况下,只应当应用于自定义选项, ...
- Vue.extend和Vue.component的联系与差异
extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件 你可以作用到Vue.component 这个全局注册方法里, 也可以在任意vue模板里使用apple组件 var ap ...
- VUE组件 之 Toast (Vue.extend 方式)
一.效果图 二.说明 这类提示框组件我们通常都会直接在 JS 代码中进行调用.像下面这样: this.$toast('别点啦,到头啦!') 但看到网上大多数还是通过 component 方式实现的, ...
- Vue.extend构造器和$mount实例构造组件后可以用$destroy()进行卸载,$forceUpdate()进行更新,$nextTick()数据修改
html <div id="app"> </div> <p><button onclick="destroy()"&g ...
- $mount方法是用来挂载我们的Vue.extend扩展的
html <body> <div id="app"> <diy></diy> </div> </body> ...
- Vue.extend提供自定义组件的构造器
Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...
- Vue extend 学习
<div id="box"> <aa></aaa> </div> <script> var Aaa = Vue.exte ...
- Vue vue.extend 和vue.component 两则之间的区别
Vue.extend 返回的是一个 扩展实例构造器, 也就是一个预设了部分选项的Vue实例构造器 Var myExtend = Vue.extend({ //预设选项 })//返回一个 扩展实例构造器 ...
- vue 之 Vue.extend()
Vue.extend( options ) 参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个“子类”.参数是一个包含组件选项的对象. data 选项是特例,需要注意 ...
随机推荐
- servlet转发重定向
1.request.getRequestDispacther("/test.jsp").forword(request,response); 转发 浏览器URL是一个地 ...
- python ssh之paramiko模块使用
1.安装: sudo pip install paramiko 2.连接到linux服务器 方法一: #paramiko.util.log_to_file('ssh.log') #写日志文件 clie ...
- Appium下载安装及环境配置
下载地址:https://bitbucket.org/appium/appium.app/downloads/ windows安装: 下载 AppiumForWindows.zip 解压 Appium ...
- Spring Boot 注解配置 day03
一.SpringBoot注解 @PropertySource 和 @ImportResource和@Bean 1.@PropertySource 加载指定位置的配置文件(只能是properties文件 ...
- 海思编解码芯片添加64M nor flash
uboot和内核都必须修改. struct spi_info hisfc350_spi_info_table[] : 在结构体里面添加自己的flash节点,我这里用的是MX66LS51235E { & ...
- oracle_18c新建用户用normal登陆失败
工具介绍:win10系统,使用的是oracle18c. 首先说一下oracle18c的特性,在oracle18c创建用户要以c##开头,比如: --创建新用户create user c##test_u ...
- MySql 创建索引原则
https://blog.csdn.net/csdnones/article/details/50412603 为了使索引的使用效率更高,在创建索引时,必须考虑在哪些字段上创建索引和创建什么类型的索引 ...
- python中Hadamard product和matrix product的区分
先简单说一下Hadamard product: (参照维基百科:https://en.wikipedia.org/wiki/Hadamard_product_(matrices)) 而matrix ...
- RPC服务和HTTP服务对比
RPC服务和HTTP服务对比 RPC(即Remote Procedure Call,远程过程调用) 协议区别: RPC主要是基于TCP/IP协议的,而HTTP服务主要是基于HTTP协议的,我们都知道H ...
- rosetta deep_analysis
此小程序可以分析backrub,enzdes类的聚类logo分析,详细路径是: /home/wangq/Programs/rosetta_2018.09.60072_bundle/tools/prot ...