vue学习笔记(组件)
程序员文章站
2022-07-06 16:08:04
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例,注册组件Vue.component('todo-item',{template:'这是自定义组件 '})使用的话
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例,注册组件
Vue.component('todo-item',{
template:'<li>这是自定义组件</li>'
})
使用的话
<ol>
<todo-item></todo-item>
</ol>
上面这种方式每次文本都是一样的,我们可以定义一个参数
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop",类似于一个自定义 attribute。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
<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>
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $,以便与用户定义的 property 区分开来。例如:
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
vue的生命周期,这个是初学者必须了解的,后续的博客会继续补充。
本文地址:https://blog.csdn.net/huangbaokang/article/details/107456714
上一篇: 眼光太差,不随我