一、數據渲染

數據渲染籠統來說就是通過ajax訪問接口然后將返回值渲染到頁面

（簡單寫個例子看一下）

<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> //渲染數據<dd class="read">{{item.hint}}</dd></dl> </a></div></div> </template> <script> export default {data(){return{articlerList : '',}},mounted:function(){//用axios調接口，請求數據this.axios.get("news/latest").then(res=>{//console.log(res.data.stories);this.articlerList=res.data.stories; });} } </script> //css忽略不計

注：

• 渲染單個變量使用雙花括號
• v-for：使用v-for把一個數組對應為一組元素用v-for指令根據一組數組的選項列表進行渲染

二、循環和條件判斷

1、列表渲染 v-for
v-for可以有三個參數（item,key,index）

item 可以是對象的值，也可以是指數組中的某個對象

key 指對象中的鍵

index主要還是指的索引值

<div id="app"><!-- 這是一種簡單的迭代數組 --><p v-for = "(item,i) in list1">索引值：{{i}}---每一項：{{item}}</p><!-- 這里是循環數組中的對象 --><p v-for = "(user,i) in list2">索引值{{i}}---ID：{{user.id}}---姓名：{{user.name}}</p><!-- 這里是遍歷對象 --><p v-for = "(val,key,i) in agent">索引值：{{i}}---值是：{{val}}---鍵是：{{key}}</p><!-- 這里是迭代數字（從1開始） --><p v-for = "count in 10">這里是第{{count}}次循環</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 指令用于條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。
v-if（顯示、隱藏）

<div id="#app"><div v-if="seen">你看見我了</div>// 在template標簽上加 v-if 渲染結果將不包含 <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 發現整個div會消失掉ok:true} })

v-else （v-else 指令不能單獨使用，必須緊跟 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' 頁面文案會變成 哈哈哈} })

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 可以實現表單元素和Model中數據的雙向綁定
簡單實例

<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生命周期分為三個階段

初始化階段

beforeCreate
? 組件創建前，目的是為了組件的生命周期 和 組件中的事件 做準備。
? 數據沒有獲得，真實 dom 也沒有渲染出來的
? 可以做數據請求，提供一次數據修改的機會

created
? 組件創建結束
? 數據得到了，真實 dom 沒有渲染出來
? 可以做數據請求，提供一次數據修改的機會

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

mounted
組件掛載結束
數據有了，VDOM 渲染出了真實DOM
?可以數據請求，修改數據
? 有了真實DOM，一般用于靜態的第三方庫的實例化

初始化階段總結：
數據請求一般寫在 created 里面, 因為這時候剛好能得到數據
第三方實例化 一般寫在 mounted 中，因為 mounted 能夠獲得真實 DOM

運行中階段
觸發條件：數據發生改變才觸發，可以觸發多次

beforeUpdata
更新前：任務：重新渲染 VDOM, 然后通過 dif 算法比較兩次VDOM, 生成 path 補丁對象

update
更新結束
更新后的數據和真實的DOM得到了
一般進行動態數據獲取 （可以進行第三方庫實例化）

銷毀階段
觸發條件： 當組件銷毀時觸發

beforeDestroy

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

vue 的銷毀有兩種形式
外部銷毀（外部銷毀不僅能銷毀組件，也能銷毀該組件的 DOM 結構）

<div id="app"><button @click="flag = !flag">點擊</button> //改變數據，創建和銷毀組件<Hello v-if="flag"></Hello> //使用 v-if 根據數據創建銷毀 </div> <template id="hello"><div><p>hello</p></div> </template>

內部銷毀——通過調用 $destroy 方法 （內部銷毀只能銷毀組件， 當不能銷毀組件的DOM結構。）

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

五、計算屬性和監聽屬性

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

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

2、watch監聽屬性
通過watch來響應數據的變化。

<div id = "app"><p style = "font-size:25px;">計數器: {{ counter }}</p><button @click = "counter++" style = "font-size:25px;">點我</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; //修飾符可以串聯 &lt;a v-on:click.stop.prevent="do"&gt; //只有修飾符 &lt;a v-on:click:submit.prevent&gt; //只當在event.target是當前元素自身時觸發處理函數 // 即事件不是從內部元素觸發的 &lt;div v-on:click.self="do"&gt;

六、vue常用指令

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

七、Vue 常用命令

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。