<template>
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="index" >
{{item}}
</li>
</ul>
<!--
V-bind绑定标签属性, 简写:
使用v-bind就是变量, 不使用就是常亮
:class="[classA,classB]"
data:{
classA:'hello',
classB:'world'
}
-->
<!-- <componentA :dataA="dataA" ></componentA> -->
<a :href="link" :title='HELLO' class="2" :class="classa" :style="linkCss">to baidu</a>
<button v-on:click="addItem">addItem</button>
<a v-if="isPartA">A</a>
<a v-else>no a</a>
<a v-show="!isPartA">B</a>
<!--stop阻止冒泡事件-->
<button v-on:click.stop="toggle">切换</button>
<!---->
<input @keydown.13="onKeydown">
<comA @my-event="onComaMyEvent"></comA>
</div>
</template>
<script>
//如果要使用vue全局.
import Vue from 'vue'
import comA from './components/a'
export default {
//组件
components:{
comA:comA
},
data() {
return {
isPartA:true,
link:'http://www.baidu.com',
HELLO: "<span>world</span>",
num: 1,
linkCss:{'color':'red'},
classa:'AAAA',
dataA:2,
status: true,
list: [
{
name: "apple",
price: 34
},
{
name: "ban",
price: 34
}
],
objList:{
name:'apple',
price:34,
color:'red',
weight:14
}
}
},
//绑定方法
methods:{
addItem (){
console.log(this.list);
//有的方法不能实现双向绑定怎么办
Vue.set(this.list,1,{
name: "ban1",
price: 341
});
/*
this.list.push({
name: "ban1",
price: 341
})
*/
} ,
toggle(){
this.isPartA=! this.isPartA;
},
onKeydown(){
console.log('on key down');
},
onComaMyEvent(parmformA){
console.log('onComaMyEvent'+parmformA);
}
}
};
</script>
<style>
</style>
b页面
<template>
<div>
{{HELLO}}
<button @click="emitMyEvent">emit</button>
</div>
</template>
<script>
export default {
data() {
return {
HELLO: "我是componentA",
}
},
methods:{
emitMyEvent(){
this.$emit('my-event',this.HELLO );
}
}
};
</script>
<style>
</style>