Vue筆記

時間  2019-11-21
標籤 vue 筆記 简体版
原文   原文鏈接

 

 

核心思想：html

1.數據驅動  所謂的數據驅動就是當數據發生變化的時候，用戶界面發生相應的變化，開發者不須要手動的去修改dom。vue

https://www.cnblogs.com/caizhenbo/p/6418284.html 數據驅動原理webpack

2.組件化git

 

1. 處理類 ：  先給class加v-bind綁定  =>  :class ,  而後再三元表達式 :class = "['mui--control-item',item.id == 0 ? ' mui-active' : ' ' ]"github

2. 處理路由高亮  web

　　

  •  ： MUI庫中默認的高亮是 ' mui-acrive',  （推薦）

路由配置的第二個參數   用這個去覆蓋默認高亮類 router-link-activevue-cli

 

 

 
 

 
 

     
 
  •  把router-link-active 的樣式改了    （不推薦 由於要設置樣式表 還要考慮優先級 很麻煩）
    •  

 

3. 視圖切換樣式  (包住路由的區域，由於只有路由在切換的時候才須要改造樣式，其餘都是固定的)npm
 

 
 

 
 
 1 .v-enter {  2         opacity: 0;  3         transform: translateX(100%);  4  }  5 
 6     .v-leave-to {  7         opacity: 0;  8         transform: translateX(-100%);  9  position: absolute; 10  } 11 
12     .v-enter-active, 13     .v-leave-active { 14         transition: all 0.5s ease; 15     }

 
 
<transition>
 <router-view></router-view>
 </transition> 編程
 
 
 
 

 

 
 

4. 阻止頁面切換時出現滑動條瀏覽器
 

 
 
1   .app-container { 2         overflow-x: hidden; 3     }
 

 

5.把router-link標籤 指定渲染成li標籤  =>  加tag屬性     tag= 「 li 」
 

6.router-link跳轉到帶有id的地址上：
 

若是是普通的跳轉 直接to 就行，但若是地址帶有id，name就要改造to 由於item.id是一個表達式  
 

 
 
1 <router-link v-for="item in list" :key="item.id" :to="'/home/photoinfo/' + item.id" tag="li">
 

 

 7.編程式導航   意思就是用js來跳轉頁面，項目中用到最多的就是當點擊某個按鈕時判斷當前登陸沒登陸，沒有登陸點擊的時候跳轉到登陸頁面。距離
 

 
 
 1 <template>
 2 
 3   <button @click="getNews()">經過js跳轉</button>
 4 
 5 </template>
 6 
 7 <script>
 8 
 9 export default{
10 
11 data(){
12 
13   return{
14 
15  }
16 
17 },
18 
19 methods:{
20 
21   getNews(){
22 
23 this.$router.push({path:'./login'})//這種是經過path
24 
25 this.$router.push({path:'./login/1'})//這種是動態路由
26 
27 this.$router.push({name:'login',params:{id:1}})//這種是命名路由,路由配置時候的name,還能夠傳參數
28 
29 }
30 
31 }
32 
33 }
34 
35 </script>
 

 

8.導航前進後退
 

  this.$router.go(1);
 

  this.$router.go(-1);
 

 9. router-view詳解  http://www.javashuo.com/article/p-qpigwssj-co.html
 

10.$route 和 $ router 的區別  http://www.javashuo.com/article/p-evnuljhv-bv.html
 

 
 

1. this.$router：
 

 
 

    表示全局路由器對象，項目中經過router路由參數注入路由以後，在任何一個頁面均可以經過此方法獲取到路由器對象，並調用其push(), go()等方法；
 

 
 

2. this.$route:
 

 
 

    表示當前正在用於跳轉的路由器對象，能夠調用其name、path、query、params等方法；
 

 
 

注：使用的時候注意拼寫，兩個很像，就差一個字母，常常會由於寫錯而致使調用的方法無效，並且瀏覽器的控制檯中還不會報錯
 

 
 

有時的需求是頁面不直接跳轉，有確認彈框或者其餘事件，此時就須要在js中設置跳轉，經常使用的一種方法是 .$router.push ，用法以下：

this.$router.push({path: '/...'});
 

 
 

11. v-if 和 v-show 
 

v-if  appendChild / removeChild                    若是在運行時條件不大可能改變 v-if  較好。
 

v-show  style.display = ‘block’ / ‘none ’           若是是頻繁切換，v-show較好。
 

v-for 優先級最大
 

12. v-on和v-bind 
 

v-on：原生js的事件名  =  ‘邏輯’
 

v-on：原生js事件名 =  ‘方法名’  該方法必須在methods內
 

   經常使用 
 

 
 
1 v-on:input  對應HTML5中新增的oninput事件 相似於onchange
 

 

 
 

v-bind：標籤中的原生屬性
 

v-bind：自定義屬性
 

 單向數據綁定  data  ======> view 
 

v-model 只能應用在表單控件 value UI控件（單選框 多選框）
 

13 .父子通訊  
 

 ref和$ref的區別 http://www.javashuo.com/article/p-kjblcsmn-hb.html
 

  子組件傳值父組件：  $ref實現子組件向父組件通訊 ===>若是ref用在子組件上，是做爲子組件的一個索引，經過$ref能夠獲取到子組件裏面的屬性和方法。若是ref在dom元素上面使用，能夠經過ref獲取到該dom的屬性集合。
 

prop和$ref的區別是： 儘管有 prop 和事件，可是有時仍然須要在 JavaScript 中直接訪問子組件。爲此可使用 ref 爲子組件指定一個引用 ID
 

prop 官網解釋 https://cn.vuejs.org/v2/guide/components-props.html
 

 
 

prop是用於父組件向子組件傳遞數據（單向下行綁定）。  直接寫 xx = abc 靜態賦值 ，v-bind:xx='list.title' 動態賦值 http://www.javashuo.com/article/p-mcrujzot-gx.html
 

 
 
 1 //1父組件在子組件的標籤內自定義要傳值的屬性給子組件
 2 <test1 happy='123'></test1>
 3 //子組件聲明後，在template中直接用插值表達式使用
 4 <template>
 5     <div>
 6         <input type ='button' @click='info' value='點我'>
 7         <span>{{happy+'hello'}} </span>
 8     </div>
 9 </template>
10 <script>
11     export default{
12         data(){
13             return {
14                 foo:1
15             }
16         },
17         props:['happy'],
18           methods: {
19                info:function(){
20                    console.log(this.happy)
21                }
22         }
23     }
24 </script>
 

 

 

 
 

 
 

$ref着重於子組件的索引，帶領父組件查找到子組件的屬性和方法，並不適合用來作數據之間的通訊。
 

3.$emit和$ref以及$on的區別
 

 用ref爲子組件賦一個標記引用
 

 
 
1 <p ref="username">傳值給父組件</p>
 

 

在已經定義了這個 ref 的組件裏，可使用
 

console.log(this.$refs.username)  
 

來訪問這個 <p> 實例，以便不時之需
 

 http://www.cnblogs.com/developer-sue/p/9434425.html
 

 https://blog.csdn.net/wngzhem/article/details/53409561
 

子組件能夠經過props接收到來自父組件的數據，而且是單向綁定的。也就是說，只能收數據。
 

vuejs官網解釋 https://cn.vuejs.org/v2/guide/instance.html
 

父組件使用$refs得到子組件實例 
 

 
 

 
 
 //父組件
 1 <template>
 2   <div id="app">
 3     <!-- <test></test> -->
 4     <test1 happy='123' ref="btn"></test1>
 5     <img src="./assets/logo.png">
 6     <input type='button' value='聚焦子組件'  @click='focus'></input>
 7   </div>
 8 </template>
 9 
10 <script>
11 import test from './components/test'
12 import test1 from './components/test1'
13 export default {
14   name: 'App',
15   components:{
16     test,
17     test1
18   },
19   data(){
20   return {
21   foo:2
22     }
23   },
24   methods: {
25     baz: function () { /* ... */ },
26     focus: function () {
27            console.log(this.$refs.btn.dangerous)
28            //console.log(this.$refs.btn)
29       }
30   }
31 }
32 </script>
 

 

 
 

子組件
 

 
 
 1 <template>
 2     <div>
 3         <input type ='button' @click='info' value='點我'>
 4         <span>{{happy+'hello'}} </span>
 5         <p ref="username">傳值給父組件</p>
 6     </div>
 7 </template>
 8 <script>
 9     export default{
10         data(){
11             return {
12                 foo:1,
　　　　　　　　　　　　//這裏的值將被父組件獲得
13                 dangerous: '危險的'
14             }
15         },
16         props:['happy'],
17           methods: {
18                info:function(){
19                    //console.log(this.happy)
20                    console.log(this.$refs.username)
21                }
22         }
23     }
24 </script>
 

 

切記： 想用ref 獲取那個子組件的實例 就在那個子組件的標籤上添加ref屬性，要傳那個屬性給兒子就在那個兒子身上綁定自定義屬性（props接收）
 

$emit 子組件給父組件傳值     $on監聽當前實例$emit事件
 

 
 
1 vm.$on('test', function (msg) { 2  console.log(msg) 3 }) 4 vm.$emit('test', 'hi') 5 // => "hi"
 

 

 
 

父組件模板：
 

 
 
 1 <template>
 2   <div id="app">
 3     <!-- <test></test> -->
 4     <h1>{{title}}</h1>
 5     <test1 happy='123' ref="btn" @getMessage="showMsg"></test1>
 6     <img src="./assets/logo.png">
 7     <input type='button' value='聚焦子組件'  @click='focus'></input>
 8   </div>
 9 </template>
10 
11 <script>
12 import test from './components/test'
13 import test1 from './components/test1'
14 export default {
15   name: 'App',
16   components:{
17     test,
18     test1
19   },
20   data(){
21   return {
22     foo:2,
23   title:'標題爲空'
24     }
25   },
26   methods: {
27     baz: function () { /* ... */ },
28     focus: function () {
29            console.log(this.$refs.btn.dangerous)
30            //console.log(this.$refs.btn)
31       },
32     showMsg:function(title){
33         this.title =title 
34       }
35   }
36 }
37 </script>
 

 

子組件模板：
 

 
 
 1 <template>
 2     <div>
 3         <input type ='button' @click='info' value='點我'>
 4         <input type ='button' @click='click' value='改標題'>
 5         <span>{{happy+'hello'}} </span>
 6         <p ref="username">傳值給父組件</p>
 7     </div>
 8 </template>
 9 <script>
10     export default{
11         data(){
12             return {
13                 foo:1,
14                 dangerous: '危險的'
15             }
16         },
17         props:['happy'],
18           methods: {
19                info:function(){
20                    //console.log(this.happy)
21                    console.log(this.$refs.username)
22                    },
23                    click:function(){
24                this.$emit('getMessage', '標題被我改回來了')
25                    }
26                },
27                mounted(){
28                this.$emit('getMessage', '標題被我佔了')
29                }
30                
31         }
32 </script>
 

 

 
 

三點對比 ： 
 

     
 
  1. prop 着重於數據的傳遞，它並不能調用子組件裏的屬性和方法。像建立文章組件時，自定義標題和內容這樣的使用場景，最適合使用prop。
    2.  
 
  2. $ref 着重於索引，主要用來調用子組件裏的屬性和方法，其實並不擅長數據傳遞。並且ref用在dom元素的時候，能使到選擇器的做用，這個功能比做爲索引更常有用到。
    3.  
 
  3. 前門兩種方法主要都是父組件向子組件通訊，而經過$emit 實現子組件向父組件通訊
    4.  

 

 15. watch  用來監測Vue實例上的數據變更。
 

http://www.javashuo.com/article/p-egfhniwi-ct.html
 

 16.v-bind:key 增刪或切換順序時提升性能
 

 17.template嵌套template 
 

template不會渲染成元素，用div的話會被渲染成元素。把if,show,for等語句抽取出來放在template上面，把綁定的事件放在temlpate裏面的元素上，可使html結構更加清晰，還能夠改善一個標籤過長的狀況
 

 
 

1.vue-cli腳手架裏面的  vue ui  
 

 
 

 
 
1  首先安裝 最新的vue-cli cnpm install -g @vue/cli
2  Terminal 輸入vue ui命令
 

 

 
 

 

18. watch ：{ } 監聽 ，
 

 記住了  只有data 和生命週期鉤子函數 纔是 (){ }  ES6匿名函數寫法 
 

methods / computed / watch 都是 ： { }
 

 

 

watch、computed、methods的對比
 

watch/computed 共同點： 只要數據一變化就能夠監視到
一、computed不適合寫大量的業務邏輯，只適合作一些簡單的數據操做，而後並給它return 出去就完事了。 添油加醋的修改 不要改自己）
 

 
 

 
 


二、computed屬性的結果會被緩存。除非依賴的響應式屬性變化了纔會從新計算，主要當作屬性來使用。
三、methods 方法表示一個具體的操做，主要書寫業務邏輯。
四、watch 是一個對象，它的鍵 是咱們要觀察的表達式，值是對應的回調函數。當前面觀察的值發生變化的時候，會觸發咱們的回調函數。在回調函數的形參中，有兩個參數：一個是newVal（最新的值），一個是oldVal（舊值）。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操做；能夠看做是 computed 和 methods 的結合體。
五、computed和watch 均可以監視到，數據的變化。methods裏只能作一些業務邏輯。watch裏面也能作業務邏輯
 

 
 

 19. vue樣式的切換 
 

 官方文檔 ：https://cn.vuejs.org/v2/guide/class-and-style.html
 

實例1：
 

  兩個值相等的時候 true active生效
 

  點擊的時候 當前的curNav等於當前的content
 

 
 

實例2： 地圖切換 
 

 
 

效果圖：
 

 

 
 

 代碼：
 

 
 
1  <div class="select-gpu">
2         <div :class="{'gpu-type':true,active:chart_type=='gtx 1050ti'}" @click="chartHandle('gtx 1050ti')">gtx 1050ti</div>
3         <div :class="{'gpu-type':true,active:chart_type=='gtx 1080ti'}" @click="chartHandle('gtx 1080ti')">gtx 1080ti</div>
4  </div>
 

 

 
 

 
 
 1 <style lang="less">
 2 .select-gpu {
 3   display: inline-block;
 4   margin-left: 70%;
 5   .gpu-type {
 6     display: inline-block;
 7     background-color: #eee;
 8     min-width: 40px;
 9     padding: 0 10px;
10     text-align: center;
11     font-size: 14px;
12     border-radius: 10px;
13     margin-left: 10px;
14     cursor: pointer;
15     line-height: 22px;
16   }
17   .active {
18     color: #fff;
19     background-color: #7baaf3;
20   }
21 }
22 </style>
 

 

 
 

 
 

 
 
export default {
data(){
  return{
chart_type: "gtx 1050ti"
 }
}
methods:{
 chartHandle(value) {
      if (value === "user") {
        this.search_type = value;
      } else {
        this.search_type = "gpu";
        this.gpu = value;
      }
      this.chart_type = value;
      this.getGpuData();
    },
}
 

 

 
 

數據切換：  ======> 經過參數名的改變而改變
 

 
 

 
 

 20.vue 組件切換
 

 
 
 
  
1 <div :class="{'resource-nav-item':true,active:curNavContent === item.content}" @click="tabChange(item)">
 
 
 
 
 
  
1 <component v-bind:is="curNavContent"></component>
 
 
 
 
 
  
1 navList:[{name:'藝術濾鏡',content:'artFilters',description:'，又稱爲風格遷移，可使一張圖片保持自己內容大體不變的狀況下呈現出另一張圖片的風格。以往，基於PhotoShop，咱們費時費力才能實現風格的轉換。如今，基於最新的人工智能技術，咱們能夠一次性實現多種多樣的、風格逼真的藝術風格變換。'} 2       ,{name:'目標檢測',content:'Object',description:'，是從圖像中辨識感興趣目標的類型與位置。藉助於人工智能深度學習技術，咱們不只能識別人、車、動植物、經常使用傢俱等目標，還能準確地標識目標的輪廓。'}], 3       curNavContent: 'artFilters',//當前組件名
 
 
 
 
 
  
1 components: { artFilters: () => import("@/views/lab/art_filters"), 2     Object: () => import("@/views/lab/object_detection") }
 
 
 
 
 
  
1 tabChange(row) { 2       this.curRow = row; 3       this.curNavContent = row.content; 4     }
 
 
 
 
 
 

 

 21. 插槽  slot-scope（已廢棄）  v-slot （2.6新增）
 

插槽的含義： 簡單的說，插槽就是可讓開發者自定義地往子組件中放置代碼片斷而開發出來的東西。就好像專門在某幾個地方弄了幾個槽（子組件中），咱們開發時，就能夠在對應的槽中放置對應的代碼了。
 

 
 

 
 

 
 

 
 

 
 

 
 

官方安裝
 

 
 

 
 
 1 # 全局安裝 vue-cli
 2 $ cnpm install --global vue-cli
 3 # 建立一個基於 webpack 模板的新項目
 4 $ vue init webpack my-project
 5 # 這裏須要進行一些配置，默認回車便可
 6 This will install Vue 2.x version of the template.
 7 
 8 For Vue 1.x use: vue init webpack#1.0 my-project
 9 
10 ? Project name my-project
11 ? Project description A Vue.js project
12 ? Author runoob <test@runoob.com>
13 ? Vue build standalone
14 ? Use ESLint to lint your code? Yes
15 ? Pick an ESLint preset Standard
16 ? Setup unit tests with Karma + Mocha? Yes
17 ? Setup e2e tests with Nightwatch? Yes
18 
19    vue-cli · Generated "my-project".
20 
21    To get started:
22    
23      cd my-project
24      npm install
25      npm run dev
26    
27    Documentation can be found at https://vuejs-templates.github.io/webpack
 



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程