-
模板指的就是挂载点里面的内容
查看全部 -
data:数据全部放data里面
查看全部 -
el：指绑定哪个元素！
查看全部 -
my hvr. v
61查看全部 -
nvm r u know fecb
kebmHbep canceled hh.hh hhh查看全部 -
rbr ju$ts查看全部
-
aqa3376336 fewwwgg
阿拉啊啊-- -
644
叫我。a吗3 =-6就@。亚奥就是阿拉
==爱上了-/4@按时睡觉%%*466%na
aasaaaaasoso.-
04#
#_##mqaaw查看全部 -
)丫㇏:‘冫济141′º 疒㇏0查看全部
-
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="addValue">提交</button>
<button @click="deleteValue">删除</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods: {
addValue: function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
deleteValue: function() {
this.list.pop()
}
}
})
</script>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function() {
this.$emit('delete', 'index');
}
}
})
new Vue({
el:"#root",
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function(index) {
this.list.splice(index, 1);
}
}
})
</script>
</body>
</html>
查看全部 -
scoped 表示样式只针对该组件，一般不会去掉，否则全局都会同名调用。
查看全部 -
父组件定义的模板，模板会显示父组件list的数据
创建子组件todo-item，传递名为content和index参数对应item,index的值。
子组件props声明传递的参数，
当点击的时候handleClick，this.$emit会向外触发一个名为'delete'的事件，事件的值为this.index，
父组件创建子组件的时候@delete监听该事件，当触发delete事件的时候会触发父组件handleDelete方法。
查看全部 -
每一个Vue.component组件都是一个Vue的实例
如果实例没有定义template模板的方法，那么就寻找el挂载点根标签作为它的模板
Vue实例就是一个组件，每个组件也是一个Vue。
每一个主键中都可以绑定@click点击事件和添加methods方法
查看全部 -
Vue.component 定义全局组件
: content='itemxx' 传递值参数
props: ['content'], 声明接收名字为content 的参数，不然{{content}} 无法接收传递的参数
查看全部 -
Vue.component() 定义全局组件
定义局部主键
var TodoXxx = {
template: '<li>xxx</li>'
}
需要再Vue的components中声明注册，否则无法调用
查看全部
举报