Vue基礎—實踐

前言

工作時接觸Vue，邊學邊用時記下的，如有問題，歡迎留言指出。
原文鏈接：http://mangocheng.com/posts/2ea23b74.html
博客地址：芒果橙的個人博客 【http://mangocheng.com】

一、模板語法

1. 數據渲染

1. 獲取對象數據

// html
<div id="app"> {{ message }} </div>

// js 
var app = new Vue({
  el : '#app' ,    //將DOM元素進行綁定
  data : {   		//定義數據對象、信息
  	message : 'Hello Vue'
  }
});

2. 綁定DOM元素特性：v-bind，可以簡寫

<span v-bind:title="message"> 鼠標懸停 </span>
<span :title="message"> 鼠標懸停 </span>

3. 條件和循環

<div> <p v-if="seen" > 看到了 </p> </div>
<div> <ol> <li v-for="temp in arr">{{ temp.content }} </li> </ol> </div>

4. 事件綁定：v-on ，可以簡寫爲@

<button @click="remove">移除</button>
// 方法
methods:{  
	remove:function(){ ... } 
}

5. 表單雙向綁定：v-model（Vue實例中的data與渲染在DOM表單元素【input/textarea/select】上的內容保持一致）

<el-input v-model="form.title"></el-input>
// data
form:{
	title:''
}

6. 如果數據賦值，但視圖未刷新，可使用$set方法

this.$set(this.obj,'newVar',"這是屬性值");

2.條件渲染：v-if/v-else-if

<div v-if="type=='A'"> a</div>
<div v-else-if="type=='B'">b</div>
<div v-else>c</div>

3.列表渲染：v-for

<div v-for="(value,key,index) in object">{{ index}},{{key}}:{{value}}</div>
	
<!-- v-for 和 v-if的結合使用，v-for的優先級高於v-if	-->
<li v-for="todo in todos" v-if="!todo.isCompleted"> {{ todo }} </li>

4.事件處理：v-on

<el-tag v-for="item in tags" v-if="tags" class="tag-area_one" closable @close="removeTag(item)">{{item}}</el-tag>

---

二、入門知識點

1. router文件夾下index.js配置的是路由訪問地址
2. 需要使用到其他組件時，可通過import方式引入
3. export和export default區別

• export不限變量數；export default只輸出一次

• export輸出的變量需要使用{ }盛放；export default不需要

• 一個js文件可以有多個export，有且只能有一個export default

4. slot插槽

• 插槽是一塊模板，對於任何一個組件，模板種類分爲非插槽模板和插槽模板。
• 非插槽模板：指html模板，如’div/span/ul/table’這些，它們的顯示與隱藏以及怎樣顯示由插件自身控制。
• 插槽模板：是slot，它是一個空殼子，顯示與隱藏以及最後使用什麼樣的HTML模板顯示由父組件控制，但是插槽顯示的位置由子組件自身決定，slot寫在組件template的哪塊，父組件傳過來的模板就顯示在哪塊。

1. 一個template下就只能有一個根節點<template><div></div></template>
2. 父子組件相互傳值

• 父組件向子組件傳值：父頁面裏，在子組件裏定義了一個參數名，子組件裏需要定義接收的參數

<!-- 父組件裏 -->
<children-componment fatherVar='this is value'></children-componment>
<!-- 子組件裏 Vue文件 -->
props:['fatherVar']

• 子組件向父組件傳值：子組件裏添加父組件方法的定義回調

  • 子組件使用$emit(“methodName”,params)觸發父組件的自定義事件 (“handleClose”, false) -->

  <send-back-dialog :showDialog="showSendBackDialog" @handleClose="handleCloseSendBackDialog" @refresh="reload" ></send-back-dialog>
  this.$emit("refresh");   <!-- reload是父組件方法名稱 -->
  this.$emit(event:string,...args:any[]); <!-- 可以傳遞多個參數 -->
  

  • 在子組件定義的對象，默認值是()=>{}

  props: {
  	paramObj: {
      	type: Object,
      	default: ()=>({})
      }
  }
  

7. 對象中添加原型方法，則直接在created上定義

Array.prototype.indexOf = function(val){
    for(var i=0;i<this.length;i++){
          if(this[i] == val) return i;
    }
    return -1;
}
Array.prototype.remove = function(val){
    var index = this.indexOf(val);
    if(index>-1){
        this.splice(index,1);
    }
}

8. 刷新頁面，重新獲取數據：通過路由的顯示隱藏

<!-- App.vue -->
<template>
  <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  provide (){
     return {
       reload:this.reload
     }
  },
  data(){
    return {
       isRouterAlive:true
    }
  },
  methods:{
    reload (){
       this.isRouterAlive = false
       this.$nextTick(function(){
          this.isRouterAlive = true
       })
    }
  },
  components:{
  }
}
</script>

<!-- 子頁面 -->
<script>
export default {
inject:['reload'],

methods:{
	clear(){
		this.reload()
	 }
 }
 </script>

來源博客：https://blog.csdn.net/yufengaotian/article/details/81238792

---

三、相關知識點

1.子組件獲取父組件值

• 在父頁面的子組件定義變量後，直接在子頁面使用this.$parent.var 即可獲取
• 在父頁面的子組件的prop定義變量，子組件直接使用this.var 即可獲取

2.watch-監聽器

watch: {
	"groupData.qtmc":function(){ }  //【對象的屬性，需要加""】  對象-- 			data:function(){ 
		deep:true,			// 深度監聽
		handler(newVal,oldVal){}   // 數值改變回調事件
	} 
}

3.刪除對象屬性

Vue.detele(this.object,"propertyName");

---

四、全局引入（main.js)

1. jquery

import jquery from 'jquery'
window.jquery = window.$ = jquery

---

五、其他

1. 問題彙總

• 報警告，直接修改了組件裏的屬性
  點擊傳送
• 數據渲染無效
  • 賦值時，執行順序可能不一定符合從上到下。此時使用定時器setTimeout
  • Vue中有些組件拿不到，要考慮是否是還未加載的原因