一、數(shù)據(jù)渲染

數(shù)據(jù)渲染籠統(tǒng)來說就是通過ajax訪問接口然后將返回值渲染到頁面

（簡單寫個(gè)例子看一下）

<template><div id="app"><div class="article" ><a :href="item.url" v-for="(item,index) in articlerList" :key="index"><dl> <dt><img :src="item.images" /></dt><dd>{{item.title}}</dd> //渲染數(shù)據(jù)<dd class="read">{{item.hint}}</dd></dl> </a></div></div> </template> <script> export default {data(){return{articlerList : '',}},mounted:function(){//用axios調(diào)接口，請求數(shù)據(jù)this.axios.get("news/latest").then(res=>{//console.log(res.data.stories);this.articlerList=res.data.stories; });} } </script> //css忽略不計(jì)

注：

• 渲染單個(gè)變量使用雙花括號(hào)
• v-for：使用v-for把一個(gè)數(shù)組對(duì)應(yīng)為一組元素用v-for指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染

二、循環(huán)和條件判斷

1、列表渲染 v-for
v-for可以有三個(gè)參數(shù)（item,key,index）

item 可以是對(duì)象的值，也可以是指數(shù)組中的某個(gè)對(duì)象

key 指對(duì)象中的鍵

index主要還是指的索引值

<div id="app"><!-- 這是一種簡單的迭代數(shù)組 --><p v-for = "(item,i) in list1">索引值：{{i}}---每一項(xiàng)：{{item}}</p><!-- 這里是循環(huán)數(shù)組中的對(duì)象 --><p v-for = "(user,i) in list2">索引值{{i}}---ID：{{user.id}}---姓名：{{user.name}}</p><!-- 這里是遍歷對(duì)象 --><p v-for = "(val,key,i) in agent">索引值：{{i}}---值是：{{val}}---鍵是：{{key}}</p><!-- 這里是迭代數(shù)字（從1開始） --><p v-for = "count in 10">這里是第{{count}}次循環(huán)</p> </div> <script>var vm = new Vue({el:'#app',data:{list1:[0,1,2,3,4,5],list2:[{id:1,name:'cust1'},{id:2,name:'cust2'},{id:3,name:'cust3'},{id:4,name:'cust4'}],agent:{id:0,name:'tony',gendar:'男'}},methods:{}}) </script>

2、條件渲染 v-if
v-if 指令用于條件性地渲染一塊內(nèi)容。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回 truthy 值的時(shí)候被渲染。
v-if（顯示、隱藏）

<div id="#app"><div v-if="seen">你看見我了</div>// 在template標(biāo)簽上加 v-if 渲染結(jié)果將不包含 <template> 元素<template v-if="ok"><p>11111</p><p>22222</p><p>33333</p></template> </div> var vue = new Vue({el:'#app',data:{seen:true, // 在控制器中輸入 vue.seen = false 發(fā)現(xiàn)整個(gè)div會(huì)消失掉ok:true} })

v-else （v-else 指令不能單獨(dú)使用，必須緊跟 v-if 或者 v-else-if 后面）

<div v-if="seen">看見我了嗎</div> <div v-else>no</div>var vm = new Vue({el:'#app',data:{seen:false} })

v-else-if （必須和v-if連用）

<div v-if="type === 'A'">你好，我是1，</div><div v-else-if="type === 'B'">你好，我是2</div><div v-else-if="type === 'C'">你好，我是3</div><div v-else>哈哈哈</div>var vm = new Vue({el:'#app',data:{type:'A' // 在控制器中輸入 vm.type= 'D' 頁面文案會(huì)變成 哈哈哈} })

v-if 加key值的作用 （key的值必須是唯一的）

<div v-if="loginType === 'username'"><span>姓名：</span><input type="text" placeholder="請輸入您的姓名"> </div> <div v-else><span>密碼：</span><input type="text" placeholder="請輸入你的密碼"> </div> <a href="javascript:void(0);" :class="clickClass" @click="f2">Toggle login type</a> var vm = new Vue({el:'#app',data:{loginType:'username'},methods:{f2:function(){this.loginType = this.loginType === 'username' ? 'pwd' : 'username'}} })

三、v-model

v-model 可以實(shí)現(xiàn)表單元素和Model中數(shù)據(jù)的雙向綁定
簡單實(shí)例

<div id="app"><h1>{{msg}}</h1><input type="text" v-model = "msg"> </div> <script>var vm = new Vue({el:'#app',data:{msg:'hello, mother fuck'},methods:{}}) </script>

注意：v-model只能在表單元素中使用，但用處挺大的

四、生命周期

（一）、vue生命周期分為三個(gè)階段

初始化階段

beforeCreate
? 組件創(chuàng)建前，目的是為了組件的生命周期 和 組件中的事件 做準(zhǔn)備。
? 數(shù)據(jù)沒有獲得，真實(shí) dom 也沒有渲染出來的
? 可以做數(shù)據(jù)請求，提供一次數(shù)據(jù)修改的機(jī)會(huì)

created
? 組件創(chuàng)建結(jié)束
? 數(shù)據(jù)得到了，真實(shí) dom 沒有渲染出來
? 可以做數(shù)據(jù)請求，提供一次數(shù)據(jù)修改的機(jī)會(huì)

beforeMount
? 組件掛載前， （掛載：把VDOM渲染到頁面）
? 任務(wù)： 判斷 el 判斷 template
? 如果 el 沒有，我們需要手動(dòng)掛載，如果有判斷 template, 如果存在，進(jìn)行 render 函數(shù)（jsx =》 虛擬DOM）,
如果沒有 template， 通過 outHTML 手動(dòng)書寫模板。

mounted
組件掛載結(jié)束
數(shù)據(jù)有了，VDOM 渲染出了真實(shí)DOM
?可以數(shù)據(jù)請求，修改數(shù)據(jù)
? 有了真實(shí)DOM，一般用于靜態(tài)的第三方庫的實(shí)例化

初始化階段總結(jié)：
數(shù)據(jù)請求一般寫在 created 里面, 因?yàn)檫@時(shí)候剛好能得到數(shù)據(jù)
第三方實(shí)例化 一般寫在 mounted 中，因?yàn)?mounted 能夠獲得真實(shí) DOM

運(yùn)行中階段
觸發(fā)條件：數(shù)據(jù)發(fā)生改變才觸發(fā)，可以觸發(fā)多次

beforeUpdata
更新前：任務(wù)：重新渲染 VDOM, 然后通過 dif 算法比較兩次VDOM, 生成 path 補(bǔ)丁對(duì)象

update
更新結(jié)束
更新后的數(shù)據(jù)和真實(shí)的DOM得到了
一般進(jìn)行動(dòng)態(tài)數(shù)據(jù)獲取 （可以進(jìn)行第三方庫實(shí)例化）

銷毀階段
觸發(fā)條件： 當(dāng)組件銷毀時(shí)觸發(fā)

beforeDestroy

destroyed
兩個(gè)鉤子功能是一致，沒什么區(qū)別，作用是做善后的，比如組件銷毀后，清除組件的定時(shí)器，刪除第三方實(shí)例

vue 的銷毀有兩種形式
外部銷毀（外部銷毀不僅能銷毀組件，也能銷毀該組件的 DOM 結(jié)構(gòu)）

<div id="app"><button @click="flag = !flag">點(diǎn)擊</button> //改變數(shù)據(jù)，創(chuàng)建和銷毀組件<Hello v-if="flag"></Hello> //使用 v-if 根據(jù)數(shù)據(jù)創(chuàng)建銷毀 </div> <template id="hello"><div><p>hello</p></div> </template>

內(nèi)部銷毀——通過調(diào)用 $destroy 方法 （內(nèi)部銷毀只能銷毀組件， 當(dāng)不能銷毀組件的DOM結(jié)構(gòu)。）

<tempate id="hello"><div><button @click="clear">銷毀</button> //調(diào)用方法銷毀組件</div> </tempate> Vue.component('Hello',{template: '#hello',methods:{clear() { this.$destroy(); //通過 $destroy() 方法銷毀組件}}，mouted() {this.time = setInterval( () => { //給組件添加定時(shí)器console.log('18094')})},beforeDestroy() { //組件銷毀后， beforeDestroy() destroyed() 都會(huì)執(zhí)行console.log('beforeDestroy');clearInterval( this.time ) //組件銷毀后，清除組件的計(jì)時(shí)器document.querySelector('#app').remove(); //手動(dòng)刪除},destroyed () {console.log('destroyed');}

五、計(jì)算屬性和監(jiān)聽屬性

1、computed計(jì)算屬性
書寫格式：computed:{ 屬性名:function(){ return 返回值; } }

<div id="app2"><p>原字符串：{{message}}</p><p>計(jì)算后反轉(zhuǎn)字符串: {{reverseMessage}}</p></div> <script> new Vue({el: "#app2",data: {message: 'xiaoqi'},computed: {// 計(jì)算屬性的getterreverseMessage: function() {return this.message.split('').reverse().join('');}} }) </script>

2、watch監(jiān)聽屬性
通過watch來響應(yīng)數(shù)據(jù)的變化。

<div id = "app"><p style = "font-size:25px;">計(jì)數(shù)器: {{ counter }}</p><button @click = "counter++" style = "font-size:25px;">點(diǎn)我</button> </div> <script type = "text/javascript">var vm = new Vue({el: '#app',data: {counter: 1},watch : {counter:function(val) {alert(val);}}}); </script>

3.事件修飾符

.stop .prevent .capture .self .once .passive//阻止事件冒泡 &lt;a v-on:click.stop="do"&gt; //提交事件不再重載頁面 &lt;a v-on:click.prevent="do"&gt; //修飾符可以串聯(lián) &lt;a v-on:click.stop.prevent="do"&gt; //只有修飾符 &lt;a v-on:click:submit.prevent&gt; //只當(dāng)在event.target是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) // 即事件不是從內(nèi)部元素觸發(fā)的 &lt;div v-on:click.self="do"&gt;

六、vue常用指令

v-model 多用于表單元素實(shí)現(xiàn)雙向數(shù)據(jù)綁定（同angular中的ng-model） v-for 格式： v-for="字段名 in(of) 數(shù)組json" 循環(huán)數(shù)組或json(同angular中的ng-repeat),需要注意從vue2開始取消了$index v-show 顯示內(nèi)容 （同angular中的ng-show） v-hide 隱藏內(nèi)容（同angular中的ng-hide） v-if 顯示與隱藏 （dom元素的刪除添加 同angular中的ng-if 默認(rèn)值為false） v-else-if 必須和v-if連用 v-else 必須和v-if連用 不能單獨(dú)使用 否則報(bào)錯(cuò) 模板編譯錯(cuò)誤 v-bind 動(dòng)態(tài)綁定 作用： 及時(shí)對(duì)頁面的數(shù)據(jù)進(jìn)行更改 v-on:click 給標(biāo)簽綁定函數(shù)，可以縮寫為@，例如綁定一個(gè)點(diǎn)擊函數(shù) 函數(shù)必須寫在methods里面 v-text 解析文本 v-html 解析html標(biāo)簽 v-bind:class 三種綁定方法 1、對(duì)象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、數(shù)組型 '[{red:"isred"},{blue:"isblue"}]' v-once 進(jìn)入頁面時(shí) 只渲染一次 不在進(jìn)行渲染 v-cloak 防止閃爍 v-pre 把標(biāo)簽內(nèi)部的元素原位輸出

七、Vue 常用命令

npm install 安裝擴(kuò)展 npm run deserve 開啟服務(wù)運(yùn)行 npm buile 打包文件 windows 常用命令 快捷鍵 windows+r 調(diào)出命令窗 切換盤 盤名：d: 創(chuàng)建目錄：mkdr 切換目錄：cd.. 查看目錄文件：dir 清屏：cls 創(chuàng)建文件：d:>md... 查看pa開頭的文件：type pa*（不能有重復(fù)的，如果有重復(fù)的，則命令無法執(zhí)行） 也可(輸入文件名稱) 方向上鍵：歷史記錄 打開圖形界面：vue ui 卸載vue-cli2：npm uninstall vue-cli -g 安裝vue-cli3：cnpm install -g @vue/cli

官方文檔：https://cn.vuejs.org/v2/guide/

總結(jié)

以上是生活随笔為你收集整理的vue基础学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。