一、页面渲染
HolleWord.vue
<template>
<div class="hello">
<h3>页面渲染</h3>
<ul>
<li v-for="item in newsList" :key="item.id">
{{item.title}}
</li>
</ul>
<button @click="count +=1">点击:count={{count}}</button>
<button @click="clickHandle">按钮</button>
<p>{{message}}</p>
<button @click="say('hi')">say hi</button>
<button @click="say('what')">say what</button>
<ul>
<li @click="coo(item)" v-for="(item,index) in names" :key="index">{{item}}</li>
</ul>
<input type="text" v-model.lazy="username">
<input type="text"v-model.trim="password" >
<p>{{username}},{{password}}</p>
<button @click="clickhq">获取用户名密码</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
count:1,
message:"消息通知",
names:["iwen","cct","uuu"],
username:"",
password:"",
newsList:[
{
id:1001,
title:'今日头条1'
},
{
id:1002,
title:'今日头条2'
},
{
id:1003,
title:'今日头条3'
}
]
}
},
methods:{
clickHandle(event){
this.message="消息被撤回"
console.log(event);
event.target.innerHTML="点击之后"
},
say(data){
console.log(data);
},
coo(item){
console.log(item);
},
clickhq(){
console.log(this.username,this.password);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <p>{{massage}}</p>
<MyConpnit :title="title" :age="age" :names="names" @onEvent="getDataHandle" /> -->
<router-view/>
</div>
</template>
<script>
import MyConpnit from "./components/MyConpnit.vue"
export default {
name: 'App',
data(){
return{
title:"我是一个机器人",
age:23,
names:["ccy","ttf","lsw"],
massage:""
}
},
components:{
MyConpnit
},
methods:{
getDataHandle(data){
console.log(data);
this.massage=data;
}
}
}
</script>
<style >
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
效果图
MyConpnit.vue
<template>
<div>
<h3>我是myconpnit</h3>
<p>{{title}}</p>
<p>{{age}}</p>
<ul>
<li v-for="(item,index) in names" :key="index">
{{item}}
</li>
</ul>
<h4>自定义数据传递</h4>
<button @click="sendClick">点击传递</button>
</div>
</template>
<script>
export default{
name:"Myconpnit",
data(){
return{
massage:"我是MyCompnit数据"
}
},
props:{
title:{
type:String,
default:""
},
age:{
type:Number,
default:""
},
names:{
type:Array,
default:function(){
return []
}
}
},
methods:{
sendClick(){
this.$emit("onEvent",this.massage)
}
}
}
</script>
<style scoped>
h3{
color:red;
}
</style>
APP.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<p>{{massage}}</p>
<MyConpnit :title="title" :age="age" :names="names" @onEvent="getDataHandle" />
<!-- <router-view/> -->
</div>
</template>
<script>
import MyConpnit from "./components/MyConpnit.vue"
export default {
name: 'App',
data(){
return{
title:"我是一个机器人",
age:23,
names:["ccy","ttf","lsw"],
massage:""
}
},
components:{
MyConpnit
},
methods:{
getDataHandle(data){
console.log(data);
this.massage=data;
}
}
}
</script>
<style >
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>