<html>
<head>
<meta charset="utf-8" />
<script src="vue.js"></script>
</head>
<body>
<!-- app1展示了组件自身改变,不影响其他组建,也跟着改变
app2展示了组建的模板元素设置好自定义监听事件,模板里的元素设置好触发该自定义事件的函数,改变属性值后相关的与父元素绑定的效果改变
简单说就是模板组建之间的传值与事件触发
模板用反引号括起来
-->
<div id="app1">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<!-- 绑定style属性,再改变postFontSize的大小后,整个子元素的文字大小改变 -->
<!-- <div id="app2" v-bind:style="{fontSize:postFontSize+'em'}"> -->
<div id="app2" v-bind:style="{fontSize:postFontSize+'em'}">
<!-- 注册一个名为enlarge的监听器 -->
<!-- 第一种方法:用$event传递$emit中的数给模板元素
<blog-post v-for="item in items" v-bind:item="item" v-bind:key="item.id" v-on:enlarge="postFontSize += $event"></blog-post> -->
<!-- 第二种方法:依靠函数 -->
<blog-post v-for="item in items" v-bind:item="item" v-bind:key="item.id"
v-on:enlarge="onEnlargeText" v-bind:style="{fontSize:postFontSize+'em'}"></blog-post>
</div>
<div id="app3">
<p>{{searchText}}</p>
<custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
</div>
<br>
<div id="app4">
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
>
<ul>
<li
is="todo-item"
v-for="(todo,index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index,1)">
</li>
</ul>
</div>
<script>
Vue.component("todo-item",{
props:["title"],
template:`
<li>
{{title}}
<button v-on:click="$emit('remove')">X</button>
</li>
`
})
Vue.component("button-counter", {
//如果data里的数据不用函数来返回
//那么所有的模板事例都会是相同地点数据
data:function(){
return {
count:0,
}
},
template:`
<button v-on:click="count++">
click me! {{count}} times.
</button>
`
})
Vue.component("blog-post",{
data:function(){
return {
}
},
props:['item'],
//每个组建必须只有一个根元素
//解决办法:模板内容包裹在一个父元素里
//注意此处字符串拼接的技巧,通过$emit传递父元素的事件名
//template:'<div><h3>{{item.text}}</h3><button v-on:click="$emit('+"'"+'enlarge'+"'"+',0.1)">Enlarge text</button><div v-html="item.content"></div></div>',
template:`
<div>
<h3>{{item.text}}</h3>
<button v-on:click='$emit("enlarge",0.1)'>Enlarge text</button>
<div v-html="item.content"></div>
</div>
`
})
Vue.component("custom-input",{
data:function(){
return{
props:['value'],
}
},
template:"<input v-on:input='$emit("+'"'+"input"+'"'+",$event.target.value)' />"
})
Vue.component({
})
var app1=new Vue({
el:"#app1",
})
var app2=new Vue({
el:"#app2",
data:{
items:[
{text:"My journey with Vue",id:1,content:"<p>第一文章</p>"},
{text:"Blogging with Vue",id:2,content:"<p>第二文章</p>"},
{text:"Why Vue is so fun",id:3,content:"<p>第三文章</P>"},
],
postFontSize:1,
enlargeAmount:0.1,
},
methods:{
onEnlargeText:function(enlargeAmount){
this.postFontSize += enlargeAmount;
}
}
})
var app3=new Vue({
el:"#app3",
data:{
searchText:"",
},
})
var app4=new Vue({
el:"#app4",
data:{
newTodoText:"",
todos:[
{id:1,title:"Do the dishes"},
{id:2,title:"Take out the trash"},
{id:3,title:"Mow the lawn"},
],
nextTodoId:4,
},
methods:{
addNewTodo:function(){
this.todos.push({
id:this.nextTodoId++,
title:this.newTodoText,
});
this.newTodoText="";
}
}
})
</script>
</body>
</html>
转载于:https://www.cnblogs.com/Pied-Piper/p/9044299.html