-
副组件向自组件传值，是通过属性的形式传递的：
：content="item"
查看全部 -
每一个组件都是一个vue的实例，
反之，每一个vue的实例，也都是一个组件
查看全部 -
如何用户所传入的值：
通过 ：content="item"
让组件直接的使用所传入的值，组件需要接收刚刚所传入的值：
props:['content']
查看全部 -
全局组件：
Vue.component('组件名',{
template: '组件内容'
})
局部组件：
var TodoItem = {
template: '组件内容'
}
局部组件的调用，需要在vue的实例里面添加一个components对这个局部组件进行一下注册：
var app1 = new Vue({
el: '#root',
components:{
'todo-item即组件名': TodoItem
},
data: {
inputValue: '',
list: []
},
methods: {
btnSubmit: function() {
this.list.push(this.inputValue);
this.inputValue = ''
}
}
})
查看全部 -
适用v-for做循环展示时，需要添加:key=""，为了提高渲染效率，要求：每渲染一条的key值都是不同的
为避免数组内容重复，可转换为如下写法，例如：
当然，这也并不是一个特别好的选择，如果需要频繁渲染时，index会出现问题
查看全部 -
v-show 性能相对更高一些，不用多次加载dom元素，适合进行多次隐藏或展示的内容
v-if 会消除dom节点，适合少次的显示隐藏
查看全部 -
全局组件：
Vue.component('todo-item',{
template:'<li>item</li>',
})
在外层/父组件中使用属性进行值的传递，
然后在全局组件中添加props: ['content'],接收传递的属性值
Vue.component("todo-item",{
props: ['content'],
template:" <li>{{content}}</li>"
})
查看全部 -
v-show:并不会清楚div标签，只是使得属性display：none；
v-if：隐藏时会清除div标签；
v-for：循环展示list标签；
绑定：key，会使得性能更加稳定；
<li v-for="(item,index) of list" :key="index"> {{item}} </li>
查看全部 -
使用content时需要在组件中使用props 声明 才能使用
查看全部 -
局部组件需要在实例中进行声明
查看全部 -
通过 vue.componet定义的组件叫全局组件
查看全部 -
v-model进行双向绑定 v-bind 是单向绑定
查看全部 -
v-bind： 与：意思是一样的，一般直接写 ：进行数据绑定
查看全部 -
每行后面逗号结束
查看全部 -
handleClick：function（）{
}
结构要记好，handleClick
查看全部
举报