2. 程式人生 > >Vue框架-基礎知識(vue指令、例項生命週期、計算屬性與監聽屬性、插槽理解、元件介紹、資料互動、ES6語法等)

Vue框架-基礎知識(vue指令、例項生命週期、計算屬性與監聽屬性、插槽理解、元件介紹、資料互動、ES6語法等)

阿新 • • 發佈：2018-12-03

Vue.js 介紹

  • vue.js是當下很火的一個JavaScript MVVM庫，它是以資料驅動和元件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。

什麼是MVVM模式？

MVVM

  • ViewModel是Vue.js的核心，它是一個Vue例項。Vue例項是作用於某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。

當建立了ViewModel後，雙向繫結是如何達成的呢？

  • 從View側看，ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化，如果有變化，則更改Model中的資料.
  • 從Model側看，當我們更新Model中的資料時，Data Bindings工具會幫我們更新頁面中的DOM元素。

下面展示一下栗子：

  • vue的使用是從一個物件開始的，先建立一個js的物件 new Vue
  • el查詢標籤的引數
  • data存放資料的引數
  • methods封裝函式的引數
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body
 
>
        <!--這是我們的View-->
        <div id="app">
            {{ message }}
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 這是我們的Model
        var exampleData = {
            message: 'Hello World!'
        }

        // 建立一個 Vue 例項或 "ViewModel"
 

        // 它連線 View 與 Model
        new Vue({
            el: '#app',
            data: exampleData
        })
    </script>
</html>
  • 使用Vue的過程就是定義MVVM各個組成部分的過程的過程。
    • 1：定義View
    • 2：定義Model
    • 3：建立一個Vue例項或者ViewModel,它用於連線View和Model

  • 在建立Vue例項時，需要傳入一個選項物件，選項物件可以包含資料、掛載元素、方法、模生命週期鉤子等等。

    • 1.選項物件的el屬性指向View，el: '#app'表示該Vue例項將掛載到<div id="app">...</div>這個元素；data屬性指向Model，data: exampleData表示我們的Model是exampleData物件
    • 2.Vue.js有多種資料繫結的語法，最基礎的形式是·文字插值(也叫大鬍子)，使用一對大括號語法，在執行時{{ message }}會被資料物件的message屬性替換，所以頁面上會輸出”Hello World!”。

    下面舉一個雙向繫結栗子：

  • MVVM模式本身是實現了雙向繫結的，在Vue.js中可以使用v-model指令在表單元素上建立雙向資料繫結。

        <!--這是我們的View-->
    <div id="app">
        <p>{{ message }}</p>
        <input type="text" v-model="message"/>
    </div>

  • 可以把上面的程式碼，給它包含在< body>標籤中進行一下執行，能更深刻的理解一下v-model指令的雙向繫結。

Vue.js的常用指令

什麼是vue.js的指令呢？

  • Vue.js的指令是以v-開頭的，它們作用於HTML元素，指令提供了一些特殊的特性，將指令繫結在元素上時，指令會為繫結的目標元素新增一些特殊的行為，我們可以將指令看作特殊的HTML特性
v-if指令

  • v-if是條件渲染指令，它根據表示式的真假來刪除和插入元素，它的基本語法如下：

    v-if="content"

  • v-if取值為false不是隱藏 是刪除標籤（銷燬標籤） 

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div id="app">
  <h1>Hello, Vue.js!</h1>
  <h1 v-if="yes">Yes!</h1>
  <h1 v-if="no">No!</h1>
  <h1 v-if="age >= 25">Age: {{ age }}</h1>
  <h1 v-if="name.indexOf('fe') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>

  var vm = new Vue({
      el: '#app',
      data: {
          yes: true,
          no: false,
          age: 28,
          name: 'fe_cow'
      }
  })
</script>
</html>

  • 大家能想象出來下面的頁面哪些資料不會出現麼 ？

    • 我們需要注意的是：yes, no, age, name這4個變數都來源於Vue例項選項物件的data屬性。
    • 資料的yes屬性為true，所以“YES！”會被輸出。
    • 資料的no屬性為false，所以”No!”不會被輸出。
    • 運算式age >= 25返回true，所以”Age: 28”會被輸出。
    • 運算式name.indexOf('fe') >= 0返回false，所以”Name: fe_cow”會被輸出。

v-if指令是根據條件表示式的值（v-if='xxx'）來執行元素的插入或者刪除行為。

v-else指令

  • 可以用v-else指令為v-if或v-show新增一個“else塊”。v-else元素必須立即跟在v-if或v-show元素的後面——否則它不能被識別。 

    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div id="app">
  <h1 v-if="age >= 25">Age: {{ age }}</h1>
  <h1 v-else>Name: {{ name }}</h1>
  <h1>---------------------分割線---------------------</h1>
  <h1 v-show="name.indexOf('1') >= 0">Name: {{ name }}</h1>
  <h1 v-else>Sex: {{ sex }}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
  var vm = new Vue({
      el: '#app',
      data: {
          age: 28,
          name: 'fe_cow',
          sex: 'cow'
      }
  })
</script>
</html>

  • v-else元素是否渲染在HTML中，取決於前面使用的是v-if還是v-show指令。

  • v-if為true，後面的v-else不會渲染到HTML；v-show為true，但是後面的v-else仍然可以渲染到HTML中。

v-show 指令

  • v-show也是條件渲染指令，和v-if指令不同的是，使用v-show指令的元素始終會被渲染到HTML，它只是簡單地為元素設定CSS的style屬性。

  • 下面我們舉個栗子：

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div id="app">
  <h1>Hello, Vue.js!</h1>
  <h1 v-show="yes">Yes!</h1>
  <h1 v-show="no">No!</h1>
  <h1 v-show="age >= 25">Age: {{ age }}</h1>
  <h1 v-show="name.indexOf('fe') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>

  var vm = new Vue({
      el: '#app',
      data: {
          yes: true,
          no: false,
          age: 28,
          name: 'fe_cow'
      }
  })
</script>
</html>

  • 可能有同學會發現，這不是更上面的v-if沒有什麼區別麼？指示命令換成了v-show

    • 開啟瀏覽器(chrome)按F12，找到Elements，找到你內容的標籤，檢視沒有展現出來的程式碼變成了<h1 style="display: none;">No!</h1>，發現跟上面的v-if的區別了吧。
    • 如果一個標籤要麼顯示要麼隱藏 為了提高程式碼執行效率可以用v-show，但是如果是多個標籤之前切換顯示隱藏只能用v-if。
v-for指令
  • v-for指令基於一個數組渲染一個列表，它和JavaScript的遍歷語法相似：
    • v-for：列表和字典
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- v-for:  列表 和 字典 -->
    <div id="app">
        <ul>
            <!-- i就是各個資料 -->
            <li v-for="i in mylist"> {{ i }}</li>
        </ul>
        <!-- 下標、資料 -->
        <!-- ()書寫兩個臨時變數，第一個表示資料，第二個表示下標 -->
        <ul>
            <li v-for="(i, j) in mylist">{{j+1}}、{{ i }}</li>
        </ul>

        <ul>
            <!-- 只有一個臨時變量表示的是value值 -->
            <li v-for="i in mydict">{{ i }}</li>
        </ul>
        <ul>
            <!-- 如果小括號寫兩個臨時變數：第一個是value值，第二個是key值 -->
            <li v-for="(i, j) in mydict">{{ j }}:{{i}}</li>
        </ul>
    </div>
    <script>
    var vm = new Vue({
        el:'#app',
        data:{
            mylist: ['邪不壓正1', '邪不壓正2', '邪不壓正3'],
            mydict: {'name':'laowang', 'age':38}
        }
    })
    </script>
</body>
</html>
  • 我們在選項的data屬性中定義了一個mylist陣列，mydicct字典，然後在#app元素內使用v-for遍歷mylist陣列和mydict字典。陣列可以輸出索引，字典也可以輸出鍵值，這點跟python中拆包很像。
v-bind指令
  • v-bind指令：控制html內容和控制html屬性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 資料顯示的方式：控制html內容  控制html屬性 -->
    <div id="app">
        <div>{{ num }}</div>
        <div>{{ str }}</div>
        <div>{{ num + 1}}</div>
        <div>{{ str.split('').reverse().join('') }}</div>
        <!-- 三元運算子或三元表示式  條件?條件成立的命令:條件不成立的命令  -->
        <div>{{ bool?'成立':'不成立' }}</div>
        <!-- 完整寫法v-bind:html屬性   化簡寫法 :html屬性 -->
        <!-- v-xxx  ： 都是vue的指令：具有特殊功能的語法規則 -->
        <a v-bind:href="url1" class="box">控制html屬性href</a>
        <a :href="url2">控制html屬性href 淘寶</a>
    </div>
    <script>
    var vm = new Vue({
        el:'#app',
        data:{
            num:1,
            str:'abcdefg',
            bool:false,
            url1:'http://www.baidu.com',
            url2:'http://www.taobao.com'
        }
    })
    </script>
</body>
</html>
繫結class html屬性
  • 將v-bind指令也可以繫結class html屬性， 如果isclass1是true的話，就會繫結class1這個類。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 物件（存到vm物件中，直接標籤身上寫） 和  陣列 -->
        <!-- 取值是true新增這個類，否則不新增 -->
        <div :class="{class1:isclass1, class2:isclass2}">1111111111111</div>
        <div :class="myobject1">222222222</div>
        <!-- 陣列 -->
        <div :class="[myclass3, myclass4]">333333</div>
        <!-- ***** 三元運算子 -->
        <div :class="[isclass2?'aa':'bb']">44444444</div>
    </div>
    <script>
    var vm = new Vue({
        el:'#app',
        data:{
            isclass1:true,
            isclass2:false,
            myobject1:{
                active:false,
                current:true
            },
            myclass3:'class3',
            myclass4:'class4'
        }
    })
    </script>
</body>
</html>
v-on指令

  • v-on指令用於給監聽DOM事件，它的用語法和v-bind是類似的，例如監聽< a>元素的點選事件：

    • < a v-on:click=”doSomething”>

  • 有兩種形式呼叫方法：繫結一個方法（讓事件指向方法的引用），或者使用內聯語句。 

    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
  </head>
  <body>
      <div id="app">
          <p><input type="text" v-model="message"></p>
          <p>
              <!--click事件直接繫結一個方法 沒有引數後面就不需要跟小括號-->
              <button v-on:click="greet">Greet</button>
          </p>
          <p>
              <!--click事件使用內聯語句 hi 是引數傳入進去 有引數就有小括號-->
              <button v-on:click="say('Hi')">Hi</button>
          </p>
      </div>
  </body>
  <script src="js/vue.js"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              message: 'Hello, Vue.js!'
          },
          // 在 `methods` 物件中定義方法
          methods: {
              greet: function() {
                  // // 方法內 `this` 指向 vm
                  alert(this.message)
              },
              say: function(msg) {
                  alert(msg)
              }
          }
      })
  </script>
</html>
    v-bind和v-on的縮寫

  • Vue.js為最常用的兩個指令v-bind和v-on提供了縮寫方式。v-bind指令可以縮寫為一個冒號，v-on指令可以縮寫為@符號。

     <!--完整語法-->
 <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
 <!--縮寫語法-->
 <a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

 <!--完整語法-->
 <button v-on:click="greet">Greet</button>

 <!--縮寫語法-->
 <button @click="greet">Greet</button>
v-model 表單資料繫結

  • 每個表單的name代表的是key，value代表輸入的值。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!-- 表單資料：雙向資料繫結：資料從html中來到vue，又可以從vue傳遞到html中 -->
  <div id="app">
      <input type="text" v-model="txt">
      <div>{{ txt }}</div>
      <select v-model="sel">
          <option value="0">北京</option>
          <option value="1">上海</option>
          <option value="2">廣州</option>
      </select>
      <div>{{sel}}</div>
      <!-- 單選框 -->
      <input type="radio" value="nan" v-model="rad">男 <input type="radio" value="nv" v-model="rad">女
      <div>{{ rad }}</div>
  </div>
  <script>
  var vm = new Vue({
      el:'#app',
      data:{
          txt:'請輸入使用者名稱',
          sel:0,
          rad:'nv'
      }
  })
  </script>
</body>
</html>

Vue中的樣式繫結:

  • 第一種方式 Vue中的class物件繫結:

    • !this.xxxx :取反的意思
    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Vue中class物件繫結</title>
   <script src="js/vue.js"></script>
   <style>
       .activated{
           color: red;
       }
   </style>
</head>
<body>
<div id="app">
   <div @click="handleDivClick"
        :class="{activated: isActivated}">
       hello world
   </div>
</div>
<script>
   var vm = new Vue({
       el: '#app',
       data: {
           isActivated: false
       },
       //!this.isActivated 取反的意思
       methods: {
           handleDivClick: function () {
               this.isActivated = !this.isActivated
           }
       }
   })
</script>
</body>
</html>
    • 第二種方式 Vue種class中陣列:
    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Vue中class陣列繫結</title>
   <script src="js/vue.js"></script>
   <style>
       .activated{
           color: red;
       }
   </style>
</head>
<body>
<div id="app">
   <div @click="handleDivClick"
        :class="[activated, activatedOne]">
       hello world
   </div>
</div>
<script>
   var vm = new Vue({
       el: '#app',
       data: {
           activated: '',
           activatedOne: 'activated-one'
       },
       // 三元表示式？ 如果this.activated不為空字串的時候，就給它變成空
       methods: {
           handleDivClick: function () {
               this.activated = this.activated === 'activated'? '':'activated'
           }
       }
   })
</script>
</body>
</html>

    • 第三種方式：通過style物件和陣列來表達：

    • 還可以在style陣列中給它新增一個樣式： :style="[styleObj, {fontSize:'20px'}]"

    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Vue中style 物件和陣列繫結</title>
   <script src="js/vue.js"></script>
   <style>
       .activated{
           color: red;
       }
   </style>
</head>
<body>
<div id="app">
   <div @click="handleDivClick"
        :style="[styleObj, {fontSize:'20px'}]">
       hello world
   </div>
</div>
<script>
   var vm = new Vue({
       el: '#app',
       data: {
           styleObj: {
               color: 'black'
           }
       },
       // 三元表示式？ 如果this.activated不為空字串的時候，就給它變成空
       methods: {
           handleDivClick: function () {
               this.styleObj.color =  this.styleObj.color === 'black'? 'red':'black'
           }
       }
   })
</script>
</body>
</html>

Vue中條件渲染：

  • 每次迴圈的時候，迴圈標籤中最好都帶有：key='item.id'值，會提高效能。

  • 當想要修改陣列的內容的時候，不能通過修改下邊的vm.list[0] = {id:'111',text:'222'}執行，應該採用·陣列的變異方法:(push,pop,shift,unshift,splice,sort,reverse)

    • vm.splice(下標, 刪除幾條,{新增內容})
    • 通過改變陣列的引用：vm.list = [{},{},{}]
    • 通過Vue.set方法：Vue.set(vm.物件名, 1下標, 5更改的名字)
    • 通過Vue的例項：vm.$set(vm.物件名, 1下標, 5更改的名字)

  • template：模板佔位符

  • 給物件新增資料：

    • Vue.set(vm.物件名, “address”,”beijing’) 就可以了

    • 通過Vue例項方法實現：`vm.$set(vm.物件名, ”address’,’beijing’)

例項生命週期：

  • 每個Vue例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到DOM並在資料變化時更新 DOM 等。同時在這個過程中會自動執行一些叫做生命週期鉤子的函式，我們可以使用這些函式，在例項的不同階段加上我們需要的程式碼，實現特定的功能。
beforeCreate：
  • 在例項初始化之後，資料觀測 (data observer)和event/watcher 事件配置之前被呼叫。
created:
  • 在例項建立完成後被立即呼叫。在這一步，例項已完成以下的配置：資料觀測 (data observer)，屬性和方法的運算，watch/event 事件回撥。然而，掛載階段還沒開始。
beforeMount：
  • 在掛載開始之前被呼叫：相關的 render 函式首次被呼叫。
mounted:
  • 在例項掛載到dom之後被呼叫，可以當成是vue物件的ready方法來使用，一般用它來做dom的初始化操作。
beforeDestroy:
  • 在元件被銷燬之前呼叫。
destroyed：
  • 在元件銷燬之後呼叫。
beforeUpdate:
  • 在資料發生變化前呼叫。
updated：
  • 在資料發生變化後呼叫 。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE例項生命週期函式</title>
    <script src="js/vue.js"></script>
</head>
<body>
 <div id="app">
 </div>
 <script>
     // 生命週期函式就是vue例項在某一個時間點會自動執行的函式
     var vm = new Vue({
         el:'#app',
         template:"<div>{{test}}</div>",
         data: {
             test:'hello word'
         },
         // 在例項初始化之後呼叫
         beforeCreate: function () {
             console.log("beforCreate")
         },
         //在例項建立完成後立即呼叫
         created: function () {
             console.log("created")
         },
         // 在掛載開始之前被呼叫 在有template模板的時候不渲染
         beforeMount: function(){
           console.log(this.$el)
           console.log("beforeMount")
         },
         // 在掛載之後可以呼叫 在例項中有tempalte模板的時候渲染裡面的內容
         mounted: function () {
             console.log(this.$el)
             console.log("mounted")
         },
         // 在元件被銷燬之前它會被執行   在控制檯打vm.$destroy()就會執行這倆個方法
         beforeDestroy: function () {
             console.log("beforeDestroy")
         },
        // 在元件被銷燬之後它會執行
        destroyed:function () {
            console.log("destroyed")
        },
        // 在資料被改變之前會執行 在控制檯輸入： vm.test="dell"  beforeUpdate 和 updated就會被呼叫
        beforeUpdate: function () {
            console.log(
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
Vue框架-基礎知識(vue指令、例項生命週期、計算屬性與監聽屬性、插槽理解、元件介紹、資料互動、ES6語法等)

     
  
  
  
 Vue.js 介紹 
  
  vue.js是當下很火的一個JavaScript MVVM庫，它是以資料驅動和元件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。  
  
 什麼是MVVM模式？ 
    



  
 

    


    
    
vue 計算屬性computed與監聽屬性watch

     
  
  
  
  
  有時在工作用用到計算屬性和監聽屬性,可以寫少很多行的程式碼,對開發效率有很大的提高; 
  
 計算屬性 
 computed 
 計算屬性時根據例項的資料項計算而來的結果 
 優點是可以使用快取,效能高 
 使用例項,屬性fullName是由firstName,lastName計算 



  
 

    


    
    
回顧基礎知識--第一章:Activity的生命週期和啟動模式

     
 
								
								            
						
                最近在讀任玉剛的Android開發藝術探索,為了方便之後複習,下面做一下筆記.對於Activity的生命週期相信知道安卓的最熟悉不過了,但是,我還是有了新的認識.之前,認為在onResume()時Act 



  
 

    


    
    
vue.js基礎知識篇(4):過濾器、class與style的綁定2

     
 input事件   自定義   size   reverse   註意點   參數   in use   num   -h   代碼下載:網盤
歡迎私信
第一章:過濾器
過濾器是對數據進行處理並返回結果的函數。
1.語法
語法是使用管道符“|”進行連接。過濾器可以接收參數，跟在過濾器後面，帶引號的參數被當做字 



  
 

    


    
    
vue.js基礎知識篇(3):計算屬性、表單控件綁定

     
 multi   option   ||   list   text   知識   基礎   unset   select標簽   第四章:計算屬性
為了避免過多的邏輯造成模板的臃腫不堪，可使用計算屬性來簡化邏輯。
1.什麽是計算屬性

<!DOCTYPE html><html lang="e 



  
 

    


    
    
Vue框架整理：vue.js內建指令  v-if、v-for 、處理載入時閃動未處理的資料

     
 
							
							
							

vue 基本指令：

v-cloak   : 一般被用在網速較慢，Vue還沒有載入完成時，不過當Vue建立例項後內容就會被替換掉， 並且螢幕會有一點閃動， 
使用時最好配合的加一句CSS : [v-cloak]{ display:none;} 
這個指令在小 



  
 

    


    
    
vue.js基礎知識篇(4):過濾器、class與style的繫結2

     
 
                第一章:過濾器過濾器是對資料進行處理並返回結果的函式。1.語法語法是使用管道符“|”進行連線。過濾器可以接收引數，跟在過濾器後面，帶引號的引數被當做字串處理，不帶引號的引數被當做資料屬性名處理。{{message | filterFunction "arg1" arg2 }} 



  
 

    


    
    
vue.js基礎知識篇(8):與服務端通信

     
 add   攔截   數據交互   order   solid   json   ise   async   params   vue.js可以構建一個完全不依賴後端服務的應用APP，同時也可以與服務端進行數據交互來同步界面的動態更新。vue-resource實現了基於AJAX、JSONP等技術的服務端通信。 



  
 

    


    
    
vue,js基礎知識

     
 一個   簡單的   blog   view   bind   model   速度   問題：   快捷方式   Vue.js是一套構建用戶界面（view）的MVVM框架。Vue.js的核心庫只關註視圖層，並且非常容易學習，非常容易與其他庫或已有的項目整合。
1.1 Vue.js的目的
Vue.js的產生核 



  
 

    


    
    
PHP面試（二）：程序設計、框架基礎知識、算法與數據結構、高並發解決方案類

     
 表設計   工作原理   結構   單一入口   php   能力   高並發解決方案   數據表   缺點   一、程序設計
1、設計功能系統——數據表設計、數據表創建語句、連接數據庫的方式、編碼能力
二、框架基礎知識
1、MVC框架基本原理——原理、常見框架、單一入口的工作原理、模板引擎的理解
2、常見框 



  
 

    


    
    
vue入門基礎知識

     
 
							
							
							基礎知識

指令:取代dom操作

動畫

watch & computed

元件

網路請求

過濾器

路由:
    實現單頁面應用（SPA）

webpack
    先安裝3.x

    npm i [email protecte 



  
 

    


    
    
vue-router基礎知識

     
  
 
 
  對於前端來說，其實瀏覽器配合超級連線就很好的實現了路由功能。但是對於單頁面應用來說，瀏覽器和超級連線的跳轉方式已經不能適用，所以各大框架紛紛給出了單頁面應用的解決路由跳轉的方案。
  Vue框架的相容性非常好，可以很好的跟其他第三方的路由框架進行結合。當然官方也給出了路由的方案： v 



  
 

    


    
    
vue.js基礎知識整理

     
 
							
							
							1. Vue 例項



1.1 建立一個Vue例項

一個 Vue 應用由一個通過 new Vue 建立的根 Vue 例項，以及可選的巢狀的、可複用的元件樹組成。demo



1.2 資料與方法



資料的響應式渲染

當一個 Vue 例項被建立時，它向  



  
 

    


    
    
Vue框架基礎語法

     
 types   method   結構   doc   ()   整體   abc   lan   todo   # vue 漸進式前端框架# Angular  GOOGLE  完全采用typescript 語法都是es6# Vue 個人  FACEBOOK 語法都是es6解析成es5  簡潔，功能強大，標準 



  
 

    


    
    
集合框架基礎知識-----java基礎知識

     
 訪問   java集合框架   pan   至少   組成   常見   .get   htable   equals   Java集合框架 ：接口：Collection、List 、Set、 Map；實現類：ArrayList、LinkedList、Vector、HashSet、TreeSet、HashMa 



  
 

    


    
    
ThinkPHP框架基礎知識

     
 技術分享   創建   php   col   代碼   amp   mvc   項目   src   ThinkPHP是一個PHP開發框架，使用面向對象的開發結構和MVC模式，簡稱tp框架。
　　1.框架是一堆代碼的集合，裏邊有變量、函數、類、常量，裏邊也有許多設計模式MVC、AR數據庫、單例等等，框架的作 



  
 

    


    
    
三分鐘輕松了解Spring框架基礎知識

     
 xmla   深入   dao   reference   inject   ace   eve   con   說過   做為一個合格的Java開發人員，你一定聽說過Spring框架，雖然會應用，但卻未必能夠深入理解框架的原理，只是像其它人一樣，泛泛的只是停留在理解的層面。小編會帶著大家一步步了解Sprin 



  
 

    


    
    
DonkeyPHP框架-基礎知識準備

     
  
 
  
  
 每一個框架都會有類自動載入，而每一個檔案都得自己去require，在php中有相應的方法spl_auto_register 與__autoload。兩者的區別如下 
 //__autoload用法
function __autoload($classname)
{
    $filena 



  
 

    


    
    
Vue例項生命週期以及圖示

     
  
 
 
   
 <body>
  <div id="app"></div>

  <script>
    var vm = new Vue({
      el: '#app',
      template: "<div>hell 



  
 

    


    
    
Vue例項生命週期+vueRoter

     
 Vue例項生命週期 
vue生命週期之beforeCreate 
 
 例項建立之前除標籤外，所有的vue需要的資料，事件都不存在 
 
vue生命週期之created 
 
 例項建立之後，data和事件已經被解析到，el還沒有找到 
 
vue生命週期之beforeMount 
 
 開始找標籤，資料還沒