vue基礎學習

一、數據渲染

數據渲染籠統來說就是通過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生命週期分爲三個階段

初始化階段
1. beforeCreate
  組件創建前，目的是爲了組件的生命週期和組件中的事件做準備。
  數據沒有獲得，真實 dom 也沒有渲染出來的
  可以做數據請求，提供一次數據修改的機會
2. created
  組件創建結束
  數據得到了，真實 dom 沒有渲染出來
  可以做數據請求，提供一次數據修改的機會
3. beforeMount
  組件掛載前，（掛載：把VDOM渲染到頁面）
  任務：判斷 el 判斷 template
  如果 el 沒有，我們需要手動掛載，如果有判斷 template, 如果存在，進行 render 函數（jsx =》虛擬DOM）,
  如果沒有 template，通過 outHTML 手動書寫模板。
4. mounted
  組件掛載結束
  數據有了，VDOM 渲染出了真實DOM
  可以數據請求，修改數據
  有了真實DOM，一般用於靜態的第三方庫的實例化
5. 初始化階段總結：
  數據請求一般寫在 created 裏面, 因爲這時候剛好能得到數據
  第三方實例化一般寫在 mounted 中，因爲 mounted 能夠獲得真實 DOM
運行中階段
觸發條件：數據發生改變才觸發，可以觸發多次
1. beforeUpdata
  更新前：任務：重新渲染 VDOM, 然後通過 dif 算法比較兩次VDOM, 生成 path 補丁對象
2. 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: {
        // 計算屬性的getter
        reverseMessage: 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/

一、數據渲染

二、循環和條件判斷

三、v-model

四、生命週期

五、計算屬性和監聽屬性

六、vue常用指令

七、Vue 常用命令

promise和async、await的用法

git詳細操作過程

vue-cli中配置axios/element-ui/vant

uni-app基礎語法學習

uni.request 網絡請求

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結