模板 挂载点 实例
v-html v-text {{}} 插值表达式
v-on:click=" " v-on(“@”) 绑定事件
v-bind:title=" " v-bind(“：”) 属性绑定
v-model = " " (双向数据绑定)
计算属性 computed：
侦听器 watch:
v-if(把标签去除)
v-show(display:none)
v-for=“item of list”
每个vue组件都是实例
父组件向子组件传值与子组件向父组件传值的实例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<input v-model="msg"/>
<button @click="xianshi">提交</button>
<ul >
<!--<li>{{item}}</li>-->
<h-item v-for="(item,index) of list"
:key="index"
:content="item"
:index = "index"
@delete="fdelete"
></h-item>
</ul>
</div>
<script>
Vue.component('h-item',{
props:['content','index'],
template:" <li @click='shanchu'>{{content}}</li>",
methods:{
shanchu:function(){
this.$emit('delete',this.index);
// console.log(this.index);
}
}
})
new Vue({
el:"#root",
data:{
msg:'',
list:[]
},
methods:{
xianshi:function(){
this.list.push(this.msg);
this.msg='';
},
fdelete: function(index){
this.list.splice(index,1);
console.log(index);
}
}
})
</script>
</body>
</html>