vue组件
发布时间：2020-12-14 03:49:18 所属栏目：大数据 来源：网络整理
导读：1.component注册组件： ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title Document / title script src ="https://cdn.bootcss.com/vue/2.4.2/vue.min.js" / script / head body div id ="app-7" ol todo-item v-for ="item in groceryList
|
1.component注册组件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app-7"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div> </body> <script type="text/javascript"> Vue.component(‘todo-item‘,{ props: [‘todo‘],template: ‘<li>{{ todo.text }}</li>‘ }); var app7 = new Vue({ el: ‘#app-7‘,data: { groceryList: [ { id: 0,text: ‘蔬菜‘ },{ id: 1,text: ‘奶酪‘ },{ id: 2,text: ‘随便其它什么人吃的东西‘ } ] } }); </script> </html> 2.可以把component中的组件抽出来，用extend方法定义组件，component负责注册组件 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<todo v-for="item in groceryList" v-bind:text="item">
</todo>
</ol>
</div>
</body>
<script type="text/javascript">
// 构建一个子组件
var todoItem = Vue.extend({
template: "<li> {{ text }} </li>",props: {
text: {
type: String,default: ‘‘
}
}
});
Vue.component(‘todo‘,todoItem);
new Vue({
el: ‘#app‘,data: {
groceryList: [
‘蔬菜‘,‘奶酪‘,‘随便其它什么人吃的东西‘
]
}
});
</script>
</html>
3.组件可以嵌套使用： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<todo :todo-data="groceryList"></todo>
</div>
</body>
<script type="text/javascript">
// 构建一个子组件
var todoItem = Vue.extend({
template: "<li> {{ text2 }} </li>",props: {
text2: {
type: String,default: ‘‘
}
}
});
// 构建一个父组件
var todoWarp = Vue.extend({
template: `
<ul>
<todo-item
v-for="(item,index) in todoData"
v-bind:text2="item.text"
></todo-item>
</ul>
`,props: {
todoData: {
type: Array,default: []
}
},// 局部注册子组件
components: {
todoItem: todoItem
}
});
// 注册到全局
Vue.component(‘todo‘,todoWarp);
new Vue({
el: ‘#app‘,data: {
groceryList: [
{ id: 2,text: ‘蔬菜‘ },{ id: 3,text: ‘奶酪‘ },{ id: 4,text: ‘随便其它什么人吃的东西‘ }
]
}
});
</script>
</html>
也可以使用v-text指令替代v-bind,v-text指令设置元素的文本，这样的话，就不需要定义text属性了 以下效果跟上面一样： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<todo :todo-data="groceryList"></todo>
</div>
</body>
<script type="text/javascript">
// 构建一个子组件
var todoItem = Vue.extend({
template: "<li></li>",});
// 构建一个父组件
var todoWarp = Vue.extend({
template: `
<ul>
<todo-item
v-for="(item,index) in todoData"
v-text="item.text"
></todo-item>
</ul>
`,text: ‘随便其它什么人吃的东西‘ }
]
}
});
</script>
</html>
:todo-data跟v-bind:todo-data效果一样 ?3.数据可以不依赖Vue对象，直接写到extend里： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="todoItem"></div>
</body>
<script type="text/javascript">
// 局部注册组件
var todoItem = Vue.extend({
data: function () {
return {
todoData: [
{ id: 0,{ id: 1,{ id: 2,text: ‘随便其它什么人吃的东西‘ }
]
};
},template: `
<ul>
<li v-for=‘(d,i) in todoData‘ :key="i">
{{ d.text }}
</li>
</ul>
`
});
new todoItem().$mount(‘#todoItem‘);
</script>
</html>
new todoItem().$mount(‘todoItem‘); 在html里直接这样写： <body> ? ? 可以动态改变data的值： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="todoItem"></div>
</body>
<script type="text/javascript">
// 局部注册组件
var todoItem = Vue.extend({
data: function() {
return {
todoData: [
{ id: 0,text: ‘随便其它什么人吃的东西‘ }
]
};
},i) in todoData‘ :key="i">
{{ d.text }}
</li>
</ul>
`,methods: {
change() {
setTimeout(() => {
this.todoData.push( { id: 3,text: ‘hi3‘ });
},2000);
},},mounted() {
this.change();
}
});
new todoItem().$mount(‘#todoItem‘);
</script>
</html>
也可以在挂载时动态设置值： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<author></author>
</body>
<script type="text/javascript">
var author = Vue.extend({
template: "<p><a :href=‘url‘>{{author}} & {{name}}</a></p>",data: function() {
return {
author: ‘vamous‘,url: ‘http://blog.csdn.net/Dear_Mr/article/details/72614370‘
};
},props: [‘name‘]
});
new author({ propsData: { name: ‘dear_mr‘ } }).$mount(‘author‘);
</script>
</html>
可以动态调用方法改变extend里面的值 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<author></author>
</body>
<script type="text/javascript">
var author = Vue.extend({
template: `<div>
<p><a :href=‘url‘>{{author}} & {{name}}</a></p>
<div @click="change">change</div>
</div>`,methods: {
change() {
this.name = "abc";
},props: [‘name‘]
});
new author({ propsData: { name: ‘dear_mr‘ } }).$mount(‘author‘);
</script>
</html>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |