Vue项目3：Vue的简单使用

本博客在 Vue项目2 的基础上进行，目的是学会Vue的基本使用。

 

基础使用包括：v-if/v-else、v-text、v-for、data、methods、computed、v-on:click、v-on:keyup、props等，

这里推荐两个系统学习vue的网站：https://cn.vuejs.org/v2/guide/ 和 https://www.runoob.com/vue2/vue-tutorial.html

 

修改Test.vue，代码如下：

<template>
<div class="test">
<input type="text" v-model="title"><br />
<h1>{{title}}</h1>
<span v-html="title1"></span>
<p v-if="showName">{{user.firstName}}</p>
<p v-else>Nobody</p>
<p v-text="user.firstName"></p>
<ul>
<li v-for="item in items">{{item.title}}</li>
</ul>
<button v-on:click="greet('Hello World11')">Say Greeting</button>
<br>
<input type="text" v-on:keyup="preesKey" v-on:keyup.enter="enterHit">
<hr>
<label>firstName</label><input type="text" v-model="user.firstName">
<br>
<label>lastName</label><input type="text" v-model="user.lastName">
<br>
<h3>{{fullName}}</h3>
</div>
</template>

<script>

export default {
name: 'test',
data(){
return {
title: 'Hello world',
title1:'<h1>Html title</h1>',
user:{
firstName:'John',
lastName:'Doe'
},
showName: true,
items: [
{title: 'Item One'},
{title: 'Item Two'},
{title: 'Item three'}

]
}
},
methods:{
greet: function(greeting){
alert(greeting);
},
preesKey: function(e){
console.log(e.target.value);
},
enterHit: function(){
console.log('You hit enter');
}
},
computed: {
fullName: function(){
return this.user.firstName + ' ' + this.user.lastName;
}
}
}
</script>

<style scoped>

</style>

浏览器效果如下：

属性props

修改Test.vue，在export default里添加

props: {
msg:{
type: String,
default: 'Foolbar'
}
},

修改截图如下：

在div末尾里添加

<h2>{{msg}}</h2>

浏览器查看效果

最后一行Foolbar，说明显示了msg的default值

 

可以将msg作为标签属性来使用，修改App.vue

<test msg="Hello"></test>

保存后，浏览器效果如下：

看到最后一行文字变成了Hello，说明在<test msg="Hello"></test>中msg的值已经被改变。

 

完成！ enjoy it！