Vue 基礎(二)

原創 471912619 2020-06-21 05:31

一.Vue實例

  • vue項目就是很多個小組件組成的,也可以說是很多vue實例組成的
  • 每個組件就是一個vue實例,實例有很多屬性和方法
<body>
       <div id="app">
           {{content}}
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   content:"hello vue"
               }
           })
       </script>
</body>
  • 實例屬性
    在這裏插入圖片描述
  • 實例方法
    在這裏插入圖片描述

二.Vue生命週期鉤子

  • 生命週期函數就是vue實例在某一時間點會自動執行的函數
    在這裏插入圖片描述
 	   <div id="app">
           {{content}}
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   content:"hello vue"
               },
               beforeCreate:function () {
                   console.log("beforeCreate")
               },
               created:function () {
                   console.log("created")
               },
               beforeMount:function () {
                   console.log("beforeMount")
               },
               mounted:function () {
                   console.log("mounted")
               },
               beforeUpdate:function () {
                   console.log("beforeUpdate")
               },
               updated:function () {
                   console.log("updated")
               },
               beforeDestroy:function () {
                   console.log("beforeDestroy")
               },
               destroyed:function () {
                   console.log("destroyed")
               }

           })
       </script>

在這裏插入圖片描述

  • 初始化事件和相關生命週期內容 調用beforeCreate
  • 初始化注入或者相關綁定 調用Created
  • 是否有el 是否有template屬性
  • 如果沒有template 把el外層的html當做模板
  • 有就渲染模板
    在這裏插入圖片描述
  • 模板數據相結合 掛載頁面一瞬間之前執行調用beforeMount
  • 掛載頁面上 hello world顯示在頁面上，mounted函數執行
  • 簡單來說就是beforeMount執行頁面還沒渲染 而mounted執行時頁面已經渲染完成了
 <div id="app">
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               template:"<div>hello vue</div>",
               data:{
                   content:"hello vue"
               },
               beforeCreate:function () {
                   console.log("beforeCreate")
               },
               created:function () {
                   console.log("created")
               },
               beforeMount:function () {
                   console.log(this.$el)
                   console.log("beforeMount")
               },
               mounted:function () {
                   console.log(this.$el)
                   console.log("mounted")
               },
               beforeUpdate:function () {
                   console.log("beforeUpdate")
               },
               updated:function () {
                   console.log("updated")
               },
               beforeDestroy:function () {
                   console.log("beforeDestroy")
               },
               destroyed:function () {
                   console.log("destroyed")
               }

           })
       </script>

  • 數據改變才執行(beforeUpdate、Updated)
  • 數據改變沒重新渲染執行beforeUpdate,重新渲染執行Updated
 <div id="app">
           {{content}}
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   content:"hello vue"
               },
               beforeCreate:function () {
                   console.log("beforeCreate")
               },
               created:function () {
                   console.log("created")
               },
               beforeMount:function () {
                   console.log(this.$el)
                   console.log("beforeMount")
               },
               mounted:function () {
                   console.log(this.$el)
                   console.log("mounted")
               },
               beforeUpdate:function () {
                   console.log("beforeUpdate")
               },
               updated:function () {
                   console.log("updated")
               },
               beforeDestroy:function () {
                   console.log("beforeDestroy")
               },
               destroyed:function () {
                   console.log("destroyed")
               }

           })
       </script>

在這裏插入圖片描述

  • 銷燬組件纔會調用最後兩個方法
  • 組件即將要被銷燬執行beforeDestroy 完全銷燬了執行destroyed
    在這裏插入圖片描述
    一共11個生命週期函數 還有3個以後再說了
    在這裏插入圖片描述

三.Vue模板語法

1.插值表達式

<div id="app">
           {{content}}
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   content:"hello vue"
               }
           })
       </script>

2.v-text

  • 將div中的innerText 變成name數據的內容
<div id="app">
            <div>{{content}}</div>
           <div v-text="name"></div>
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   content:"hello vue",
                   name:"shang"
               }
           })
       </script>

3.v-html

  • 將div中的innerHtml和name數據做綁定
 <div id="app">
            <div>{{content}}</div>
           <div v-text="name"></div>
           <div v-html="name"></div>
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   content:"hello vue",
                   name:"shang"
               }
           })
       </script>

4.插值表達式、v-text、v-html區別

  • 插值表達式和v-text做了轉義，而v-html沒有
    <div id="app">
            <div>{{content}}</div>
           <div v-text="name"></div>
           <div v-html="name"></div>
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   content:"<h1>hello vue</h1>",
                   name:"<h1>shang</h1>"
               }
           })
       </script>

在這裏插入圖片描述

5.使用JavaScript表達式

  • 實際上，對於所有的數據綁定，vue都提供了完全的 JavaScript 表達式支持
 <div id="app">
            <div>{{content + ' vue'}}</div>
           <div v-text="name + ' qian'"></div>
           <div v-html="name + ' qian'"></div>
           <div>{{ok?'Yes':'No'}}</div>
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   content:"hello",
                   name:"shang",
                   ok:true
               }
           })
       </script>

在這裏插入圖片描述

四.計算屬性，方法和偵聽器(***)

  • 拼接兩個字符串 可以用以下方法顯示
  • 但是代碼上就有了邏輯 不想在html中出現邏輯怎麼辦？
 <div id="app">
            <div>{{firstName+' '+lastName}}</div>
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   firstName:"shangqian",
                   lastName:"zhushang"
               }
           })
       </script>

1.計算屬性

  • fullName這個屬性是通過計算得來的
   <div id="app">
            <div>{{fullName}}</div>
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   firstName:"shangqian",
                   lastName:"zhushang"
               },
               //計算屬性
               computed:{
                   fullName:function(){
                       return this.firstName + " " + this.lastName
                   }
               }
           })
       </script>
  • 計算屬性內置緩存
  • 當依賴變量(firstName+lastName)沒有發生改變時 計算屬性不會在重新計算
<div id="app">
            <div>{{fullName}}</div>
           <div>{{age}}</div>
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   firstName:"shangqian",
                   lastName:"zhushang",
                   age:28
               },
               computed:{
                   fullName:function(){
                       console.log("計算了一次")
                       return this.firstName + " " + this.lastName
                   }
               }
           })
       </script>

在這裏插入圖片描述

2.方法

  • 方法形式也可以實現同樣功能 不如計算屬性有效 沒有緩存
<div id="app">
            <div>{{fullName()}}</div>
           <div>{{age}}</div>
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   firstName:"shangqian",
                   lastName:"zhushang",
                   age:28
               },
               computed:{
                   fullName:function(){
                       console.log("計算了一次")
                       return this.firstName + " " + this.lastName
                   }
               },
               methods:{
                   fullName:function(){
                       console.log("計算了一次")
                       return this.firstName + " " + this.lastName
                   }
               }
           })
       </script>

在這裏插入圖片描述

3.偵聽器

  • 偵聽firstName和lastName的變化
  <div id="app">
            <div>{{fullName}}</div>
           <div>{{age}}</div>
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   firstName:"shangqian",
                   lastName:"zhushang",
                   fullName:"shangqian zhushang",
                   age:28
               },
               watch:{
                   firstName:function () {
                       console.log("計算了一次")
                       this.fullName = this.firstName + " " + this.lastName
                   },
                   lastName:function () {
                       console.log("計算了一次")
                       this.fullName = this.firstName + " " + this.lastName
                   }
               }
           })
       </script>

在這裏插入圖片描述

  • 雖然也有緩存 依賴變量沒有變化 就不會重新渲染
  • 但是watch語法太複雜了，所以優先用計算屬性 因爲它語法簡單

五.計算屬性的setter和getter

  • 把屬性寫成一個對象
  • 插值表達式讀取計算屬性內容時 就會走get方法 和剛纔寫法是一樣的
  • 簡單來說就是，設置值執行set，獲取值執行get
  <div id="app">
            <div>{{fullName}}</div>
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   firstName:"shangqian",
                   lastName:"zhushang",
               },
               computed:{
                   fullName:{
                       get:function(){
                             return this.firstName + " " + this.lastName
                       },
                       set:function (value) {
                           console.log(value)
                       }
                   }
               }
           })
       </script>

在這裏插入圖片描述

  • 通過setter改變firstName和lastName的值
<div id="app">
            <div>{{fullName}}</div>
       </div>

       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   firstName:"shangqian",
                   lastName:"zhushang",
               },
               computed:{
                   fullName:{
                       get:function(){
                             return this.firstName + " " + this.lastName
                       },
                       set:function (value) {
                           console.log(value)
                           var arr = value.split(" ");
                           this.firstName = arr[0];
                           this.lastName = arr[1];
                       }
                   }
               }
           })
       </script>
  • Computed是依賴值變化才重新計算
  • Get 通過其他值算出一個新值
  • Set 通過設置值改變關聯值 關聯值改變又會改變fullName值重新計算 頁面又會重新變化內容

六.Vue中的樣式綁定

1.綁定 HTML Class

  • 綁定對象
  • div綁定了一個class 名爲activated ，顯示不顯示取決於後邊的isActivated的值是true還是false
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .activated{
            color:red
        }
    </style>
</head>
<body>
        <div id="app">
            <div @click="handleDivClick" :class="{activated: isActivated}">hello vue</div>
        </div>
        <script>
          var vm = new Vue({
              el:"#app",
              data:{
                  isActivated:false
              },
              methods:{
                  handleDivClick:function () {
                      this.isActivated = !this.isActivated
                  }
              }
          })
        </script>
</body>
  • 綁定數組
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .activated{
            color:red
        }
    </style>
</head>
<body>
        <div id="app">
            <div @click="handleDivClick" :class="[activated]">hello vue</div>
        </div>
        <script>
          var vm = new Vue({
              el:"#app",
              data:{
                  activated:""
              },
              methods:{
                  handleDivClick:function () {
                      this.activated = this.activated === "activated"? "":"activated"
                  }
              }
          })
        </script>
</body>

2.綁定內聯樣式

  • 綁定對象
  <div id="app">
            <div @click="handleDivClick" :style="styleObj">hello vue</div>
        </div>
        <script>
          var vm = new Vue({
              el:"#app",
              data:{
                  styleObj:{
                      color:"black"
                  }
              },
              methods:{
                  handleDivClick:function () {
                      this.styleObj.color = this.styleObj.color === "black"?"red":"black"
                  }
              }
          })
        </script>
  • 綁定數組
  • 再添加一個屬性
  <div id="app">
            <div @click="handleDivClick" :style="[styleObj,{fontSize:'20px'}]">hello vue</div>
        </div>
        <script>
          var vm = new Vue({
              el:"#app",
              data:{
                  styleObj:{
                      color:"black"
                  }
              },
              methods:{
                  handleDivClick:function () {
                      this.styleObj.color = this.styleObj.color === "black"?"red":"black"
                  }
              }
          })
        </script>

七.Vue中的條件渲染

  • v-if、v-else-if、v-else

1.v-if與v-show區別

  <div id="app">
                <div v-if="show">{{content}}</div>
                <div v-show="show">hello vue</div>
            </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    show:false,
                    content:"hello world"
                }
        
            })
        </script>

在這裏插入圖片描述

  • v-show指令是已經渲染到頁面上的了，display設置爲none的緣故
  • v-if 表達式爲false 壓根不存在
  • 經常改變標籤存在不存在用v-show效率更高

2.v-if、v-else、v-else-if

  • 注意使用一定要連在一起，中間隔開會報錯
   <div id="app">
                <div v-if="show === 'a'">{{content+' a'}}</div>
                <div v-else-if="show === 'b' ">{{content+' b'}}</div>
                <div v-else>{{content+' c'}}</div>
            </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    show:'a',
                    content:"hello world"
                }

            })
        </script>

3.指定key值

  • 如下代碼中
  • 在郵箱input框輸入 再設置vm.show爲true 會發現用戶名input框自動填充了郵箱input框中的數據
     <div id="app">
                <div v-if="show">
                    用戶名:<input>
                </div>
                <div v-else>
                    郵箱:<input>
                </div>
            </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    show:false,
                    content:"hello world"
                }

            })
        </script>
  • Vue在重新渲染頁面時 會盡量去複用頁面上已經存在的dom
  • 去設置key值就可以避免 兩個key值不一樣vue就不會去複用
   <div id="app">
                <div v-if="show">
                    用戶名:<input key="username">
                </div>
                <div v-else>
                    郵箱:<input key="password">
                </div>
            </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    show:false,
                    content:"hello world"
                }

            })
        </script>

八.Vue中的列表渲染

 <div id="app">
            <div v-for="(item,index) of list">
                {{item}}--{{index}}
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    list:[
                        "shang",
                        "qian",
                        "zhu",
                        "shang",
                        "haha"
                    ]
                }

            })
        </script>
  • 爲了提升循環顯示性能 每個循環項上加上唯一key值
    在這裏插入圖片描述
  • 不推薦用下標值，頻繁操作dom元素，還是費性能，這樣沒法複用dom節點
  • 後端返回前端數據，返回唯一的數據標識符id(如下情況)
   <div id="app">
            <div v-for="(item,index) of list" :key="item.id">
                {{item.text}}--{{index}}
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    list:[
                        {
                            id:"101010101",
                            text:"haha"
                        },
                        {
                            id:"101010102",
                            text:"hehe"
                        },
                        {
                            id:"101010103",
                            text:"shangqian"
                        },
                        {
                            id:"101010104",
                            text:"shangzhu"
                        }
                    ]
                }

            })
        </script>
  • 修改數組內容時 ，不能通過下標的形式，只能通過方法(push、pop、shift、unshift、splice、sort、reverse)
  • 從下標1開始 刪除1條 添加一條新數據(splice方法)
  • 數據變化 頁面也變化了

在這裏插入圖片描述

  • 除了這幾個方法 還可以改變引用
  • 這裏就是List引用
  • 頁面也會隨着變化
    在這裏插入圖片描述
  • 如果想在這裏循環兩次(寫兩次循環有點不靠譜)，還有什麼方法嘛？
    在這裏插入圖片描述
  • 可以外層加一個div
 <div id="app">
            <div v-for="(item,index) of list" :key="item.id">
            <div>
                {{item.text}}--{{index}}
            </div>
            <span>
                {{item.text}}--{{index}}
            </span>
            </div>
        </div>

在這裏插入圖片描述

  • 不想讓外層div出現 怎麼辦？
 <div id="app">
            <template v-for="(item,index) of list" :key="item.id">
            <div>
                {{item.text}}--{{index}}
            </div>
            <span>
                {{item.text}}--{{index}}
            </span>
            </template>
        </div>

在這裏插入圖片描述

  • 對象循環
 <div id="app">
            <div v-for="(item,key,index) of userInfo">
                  {{item}} ---- {{key}} ---- {{index}}
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    userInfo:{
                        name:"shangqianzhushang",
                        age:18,
                        gender:"male"
                    }
                }

            })
        </script>

在這裏插入圖片描述

  • 數據改變 頁面就變
  • 添加數據 頁面沒變
  • 動態對象中加數據是不好用的，可以直接改引用

在這裏插入圖片描述

九.Vue中的set方法

  • Set方法是全局方法也是一個實例方法
  • 對象添加屬性
    在這裏插入圖片描述
  • 數組添加屬性
<div id="app">
            <div v-for="(item,index) of list">
                  {{item}} ---- {{index}}
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    list:[1,2,3,4,5]
                }

            })
        </script>

在這裏插入圖片描述
總結:
數組有三種添加方式:方法、引用、set方法
對象又兩種添加方式:引用、set方法

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Uniapp中父組件向子組件傳遞prop，新的prop會帶有舊的prop屬性

簡潔 最近使用uniapp開發微信小程序，某一個頁面需要做成可配置化，因此會出現直接在父組件修改傳遞到子組件的prop，但是會出現這種情況，假設新傳遞的prop對象爲newObj，舊傳遞的prop對象爲oldObj，如果Objec

py_boy 2020-07-08 12:07:32

Vue加載OpenLayer入門教程（超簡單）

Vue加載OpenLayer很簡單，很簡單，很簡單第一步：創建vue項目第二步 加載openlayer 很簡單，很簡單，很簡單 學會了vue，開始測試mapbox的搭配，學會了mapbox，有整了一下openlayer的導入，剛開

来日可期啊 2020-07-08 12:37:34

element-ui中的el-table-column加v-if不生效，表頭錯亂

 項目中需要按照不同的媒體類型，展示不同的表頭且數據字段也不同。可以增加不同key值解決v-if不生效問題。 <el-table-column prop="author" align="center"

杨哥杨哥万万岁 2020-07-08 12:30:46

vue中index.html文件爲什麼可以使用模板語法

今天無意間看到在項目的index.html文件中，使用了ejs的語法（後來知道是lodash），就非常費解，之前在node項目中，需要指定使用ejs模板引擎，在中間件中rander到前臺頁面。我理解的大概就是這個原理 查看了官方的解釋

杨哥杨哥万万岁 2020-07-08 12:30:46

富文本編輯器之————Vue-Quill-Editor

1. 安裝vue-quill-eidtor yarn add vue-quill-editor 或者 npm install vue-quill-editor --save 2. 在main.js中引入： import Vue

ddx2019 2020-07-08 11:55:42

Html Webpack Plugin: ReferenceError: process is not defined

修改ejs文件 將<% if (!process.browser) {%> 改成： <% if (!require(‘process’).browser) { %>

真·skysys 2020-07-08 11:54:32

electron-vue項目引入element-ui

參考： https://www.jianshu.com/p/1defe83929f3 npm install element-ui main.js import ElementUI from 'element-ui' impor

真·skysys 2020-07-08 11:54:31

後端 Java 程序員眼中的 Vue——（一）創建及運行

現在 Vue 用的越來越多，工作上有時前後端都要搞，作爲後端程序員接手 Vue 該如何做呢，下面來記錄一下基礎的東西，並創建一個 Vue 項目 談 Vue 不能避開的 3 個東西 Node.js npm vue-cli No

厕所博士 2020-07-08 11:50:38

Axios--基礎知識

下載使用方式： npm: $ npm install axios cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 案例（GET以及POST請求

GQ_cyan 2020-07-08 11:50:38

Element-ui

Element-ui一、什麼是Element-ui 一、什麼是Element-ui element 是基於 vue 實現的一套不依賴業務的 UI 組件庫，提供了豐富的PC端組件，減少用戶對常用組件的封裝，降低了開發的難易程度

狂风 2020-07-08 11:49:25

vue.js 裏面，什麼是虛擬DOM?

Vuejs 將DOM 抽象成一個以JavaScript 對象爲節點的虛擬DOM樹,以VNode節點模擬真實的DOM，可以對這顆抽象樹進行創建節點,刪除節點以及修改節點的操作, 經過diff算法得出一些需要修改的最小單位,再更新視圖,大大提

阿冰介 2020-07-08 11:48:15

vue 是怎麼實現數據響應的

簡述：Vuejs 的響應式依賴於Object.defineProprtry,通過監聽對象屬性 的setter/getter 的變化,通過getter 進行依賴收集,而setter相當於觀察者,數據產生變化的時候通知「訂閱者」更新視圖

阿冰介 2020-07-08 11:48:15

基於activiti5.22、SpringBoot2開發的流程解決方案，源碼分享

AgileBPM 敏捷工作流開發平臺 業務對象: 由實體（表）組成，支持任意數據結構（關聯關係），可以跨庫來組織業務對象（支持分佈式事務）。而且難以置信的支持N層。 業務表單: 表單完美的支撐了業務對象的展示，並支持豐富的前端組件和字段級

一直孤独的程序猿 2020-07-08 11:39:18

開發這樣一個複雜的表單你需要用多久

> 表單在中後臺開發的時，是最多也是最另人頭疼的，多級聯動，繁雜的驗證，動態解析等可算是苦不堪言。所以出現了無數的表單解決方案，像Uform, formily, NoForm等等一大堆用來解決中後臺開發表單，可想而知，解決複雜的表單開發是

迷路的蝙蝠 2020-07-08 11:35:02

vue的slot（slot具名插槽。slot非具名插槽，slot的作用域，）

vue的slot 1、什麼是slot slot是插槽，插即是可以插入，槽就是坑，即是可以再代碼中插入 如果子組件模板中不包含插口，那麼父組件的內容將會被丟棄。當子組件模板中有一個麼有屬性的插槽時，父組件傳入的整個內容片段，將插入到

ljljlj1993 2020-07-08 11:14:40