上一遍我們已經編寫好了，所需界面，那麼現在我們該做的事情就是接入數據了，在接入數據之前，我們所需要做的事件，就是先熟悉下vue這個漸進式框架的基本語法,由於官網的語法已經是寫的非常出色了，這裏我只寫一點平時常用的，如果需要更加深入的vue知識還是建議學習官網
<template>
<div id="vue">
<!--DOM綁定數據-->
<div v-bind:title="msg">{{message}}</div>
<!--條件判斷-->
<div v-if="seen">我是true所以可以看到</div>
<div v-else>我是false</div>
<!--模塊條件渲染-->
<template v-if="seen">
<h1>該模塊顯示</h1>
</template>
<template v-else>
<h1>該模塊不顯示</h1>
</template>
<!--v-show只是改變css的display屬性-->
<div v-show="seen">我是show所以可以看到</div>
<!--循環-->
<ul>
<li v-for="(todo,index) in todos" v-bind:key="index" v-bind:title="todo.text">
{{index}} - {{todo.text}}
</li>
</ul>
<!--遍歷json-->
<div v-for="(value,key,index) in classObject">
{{index}} - {{key}} -- {{value}}
</div>
<!--綁定事件-->
<div v-on:click="reverseMessage">{{message}}</div>
<!--v-model實現表單輸入和應用狀態之間的雙向綁定-->
<input type="text" v-model="message">
<p>{{message}}</p>
<!--v-once綁定的數據，不會變化，注意該幾點上綁定上的所有屬性都不會變化-->
<p v-once>這個並不會變化{{message}}</p>
<!--動態渲染HTML,會引起XSS攻擊-->
<div v-html="rawHtml"></div>
<!--v-bind動態綁定屬性值-->
<p v-bind:id="vId">222</p>
<!--支持所有js表達式-->
<ul>
<li>{{num+1}}</li>
<li v-bind:id="'list-'+vId">{{bok?'爲真顯示':'爲假顯示'}}</li>
</ul>
<!--
模板表達式被放在沙盒中，只能訪問全局變量的白名單：Math和Date等，訪問不了用戶自定義的全局變量
-->
<div>時間戳：{{new Date().getTime()}}</div>
<!--修飾符：特殊方式對待默寫指令,這裏的 .prevent 是指觸發的事件調用event.preventDefault()-->
<form action="" v-on:submit.prevent="onSubmit"></form>
<!--vue爲最常用的兩個指令進行所寫v-bind:縮寫成:-->
<a :href="href">鏈接</a>
<!--v-on縮寫成@-->
<a href="javascript:;" @click="reverseMessage">{{message}}</a>
<!--
綁定class
下面這個是基礎的綁定，然後非常靈活的綁定方式，可以直接綁定一個對象在上面，和綁定計算屬性
通過動態改變class值，可以改變一些不能展示的內容，或者改變運動方式
-->
<div v-bind:class="{active:isActive}">是否綁定了class</div>
<!--綁定一個對象-->
<div v-bind:class="classObject">綁定class對象</div>
<!--綁定返回對象的計算屬性-->
<div v-bind:class="classObj">綁定返回對象的計算屬性</div>
<!--綁定style,綁定形式同class相似都是非常靈活-->
<div v-bind:style="{color:activeColor,fontSize:fontSize}">綁定樣式</div>
</div>
</template>
<script>
/* eslint-disable */
export default{
name:"vue",
//data必須是一個函數，返回組件所需數據
data(){
return {
message:'hello world',
msg:"頁面加載於："+new Date().toLocaleString(),
seen:true,
isActive:true,
error:false,
todos:[
{text:'js',id:1},
{text:'java',id:2},
{text:'css',id:3}
],
rawHtml:'<span style="color:red;">1122233344</span>',
vId:"123",
num:234,
bok:false,
href:"http://www.baidu.com",
classObject:{
active:true,
'text-danger': false
},
activeColor:'red',
fontSize:'30px'
}
},
//方法區：定義一些組件所需方法
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('');
}
},
//計算屬性：對於一些數據進行邏輯運算，避免在模板中寫的過於複雜
computed:{
classObj(){
return {
active: this.isActive && !this.error,
'text-danger': !this.error
}
}
},
/**
* 以下爲生命週期，好比動物的一生，什麼時期幹什麼事情
*
*/
beforeCreate: function () {
console.group('beforeCreate 創建前狀態===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message); //undefined
},
created: function () {
console.group('created 創建完畢狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 掛載前狀態===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 掛載結束狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 銷燬前狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 銷燬完成狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
}
</script>
<style>
</style>