這篇博客，最後會使用到的知識展示，先看效果 *效果很醜，但是內容很寧
完整代碼如下：（後面會有具體細節講解）
一、App.vue:
<template>
<div id="app">
<!--<img src="./assets/logo.png">
<router-view/>-->
<!--<test1 msg="新的屬性值"></test1>-->
<usershow></usershow>
</div>
</template>
<script>
import test1 from './components/test1'
import usershow from './components/usershow'
export default {
name: 'app',
components: {
usershow
}
}
</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>二、在src–>components–創建test1.vue
<template>
<div id="test1">
<div>{{message}}</div>
<ul>
<li v-for="item in items">{{item.title}}</li>
</ul>
<button v-on:click="greet('Hello12321')">getButton_Alert say :</button>
<!--鍵盤事件-->
<!--<input type="text" v-on:keyup="pressKey" v-on:keyup.alt.enter="enterHit"/>-->
<hr />
<!--computed 計算屬性-->
<label> First Name</label>
<input type="text" v-model="user.firstName" />
<br />
<label> LastName</label>
<input type="text" v-model="user.lastName" />
<h4>{{fullName}}</h4>
<h4>{{msg}}</h4>
</div>
</template>
<script>
export default {
name: "test1",
props:{
msg:{
type:String,
default:"默認文字",
}
},
data() {
return {
message:'123',
items:[{title:"items 1"},
{title:"items 2"},
{title:"items 3"}
],
showName:false,
user:{
firstName:"Chenxh",
lastName:"Chenxh",
},
}
},
methods:{
greet:function(args){
alert(args);
},
enterHit:function(){
console.log("enterHit");
},
},
computed:{
fullName:function(){
return this.user.firstName+" "+this.user.lastName
}
}
}
</script>
<style>
</style>三、在src–>components–創建usershow.vue
<template>
<div id="usershow">
<h1>USER</h1>
<form v-on:submit="addUser">
<input type="text" v-model="newUser.name" placeholder="Enter name" /><br />
<input type="text" v-model="newUser.email" placeholder="Enter email" /><br />
<input type="submit" value="Submit" />
</form>
<ul>
<!--展示用戶信息-->
<li v-for="user in users">
{{user.name}}:{{user.email}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "usershow",
data() {
return {
newUser: {},
users: [
{
name: "Chenxh1",
email: "[email protected]",
contacted: false
},
{
name: "BruceXuheng",
email: "[email protected]",
contacted: false
},
{
name: "Chenxh3",
email: "[email protected]",
contacted: false
},
{
name: "Chenxh4",
email: "[email protected]",
contacted: false
}
]
}
},
methods: {
addUser: function(e) {
this.users.push({
name: this.newUser.name,
email: this.newUser.email,
contacted: false
});
e.preventDefault();
}
}
}
</script>
<style>
</style>細節講解：
只需要在初始的Vue項目中，修改這三個文件就可以實現圖片中的效果，接下來一次記錄、解釋代碼中的使用和含義。
1、xx.vue文件分爲三模塊：
<template>
</template>
<script>
</script>
<style scoped>
</style>template：是視圖層模塊；
script：是邏輯實現模塊；
style：是樣式控制模塊（css樣式）。
script裏內容較爲特殊，尤爲重要，寫的模板格式是：
export default {
name: "test",
props:{
//可以添加標籤屬性
},
data() {
return {
//返回templates裏的數據
}，
}，
methods: {
//設置點擊事件
addUser: function(e) {
}
}，
computed:{
}
}2、v-for的使用：
1】在template中使用需要有數據展示的標籤
需要注意點有：*div的id，*v-for中的寫法a in list;
2】在script中添加返回的數據
在data方法中返回數據，例如下面代碼中users這種集合寫法
*listName:[
{屬性名：”content”,屬性名：”content”},
{屬性名：”content”,屬性名：”content”}
],
<template>
<div id="newflag">
<ul>
<li v-for="user in users">{{user.name}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "newflag",
data() {
return {
users: [
{
name: "chenxh"
},
{
name: "chenxh"
},
]
}
},
}
</script>
<style>
</style>3、v-on:click=”onClickLis(‘這裏可以傳參數’)”
主要注意點是methods的寫法格式，點擊事件的方法寫法。
<template>
<div id="newflag">
<button v-on:click="onClickLis('這裏可以傳參數')">biubiubiu</button>
</div>
</template>
<script>
export default {
name: "newflag",
methods: {
onClickLis: function(arg) {
alert(arg);
}
}
}
</script>
<style>
</style>4、v-html解析html代碼展示
<template>
<div id="newflag">
<h1 v-html="message"></h1>
</div>
</template>
<script>
export default {
name: "newflag",
data(){
return{
message: '<a href="http://blog.csdn.net/Mr_ChenXu?ref=toolbar">http://blog.csdn.net/Mr_ChenXu?ref=toolbar</a>',
}
},
}
</script>
<style>
</style>5、v-bind:class & v-bind:model
1】：v-bind:class=”{‘class2’: class1} 綁定class可以是集合，key就是class樣式名，value就是設置使用boolean屬性；
2】：v-model=”class1” 設置class爲標籤屬性的值。
<template>
<div id="newflag">
<input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class2': class1}">
改變
</div>
</div>
</template>
<script>
export default {
name: "newflag",
data() {
return {
// message: '<a href="http://blog.csdn.net/Mr_ChenXu?ref=toolbar">http://blog.csdn.net/Mr_ChenXu?ref=toolbar</a>',
class1: false,
}
},
}
</script>
<style>
.class1 {
background: #444;
color: #eee;
}
.class2 {
background: #42B983;
color: #eee;
}
</style>6、對象及對象屬性的使用：
<template>
<div id="newflag">
<label>姓名</label>
<input type="text" v-model="user.myName" />
<br />
<label>性別</label>
<input type="text" v-model="user.sex" />
</div>
</template>
<script>
export default {
name: "newflag",
data() {
return {
user:{
myName:'chenxuheng',
sex:'Man'
},
}
},
}
</script>
<style>
</style>7、export defalut中的屬性 props的作用
1】在使用標籤添加屬性，代碼如下：
<newflag msg="覆蓋默認"></newflag>2】在newflag的.vue文件中：
<template>
<div id="newflag">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "newflag",
props:{
msg:{
type:String,
default:"默認文字",
}
},
}
</script>
<style>
</style>
