30分鐘小白級入手vue教程

時間 2019-11-06

標籤 30分入手 vue 教程简体版

原文原文鏈接

王眫子剛剛畢業不久，小白實力，把一些基礎知識總結一下，也行對新人會有一些幫助javascript

vue介紹

vue是一個前端框架，是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得咱們可以快速地上手並使用Vue.js。css

若是你以前已經習慣了用jQuery操做DOM，學習Vue.js時請先拋開手動操做DOM的思惟，由於Vue.js是數據驅動的，你無需手動操做DOM。它經過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你建立了綁定，DOM將和數據保持同步，每當變動了數據，DOM也會相應地更新。html

1、第一個Vue（讀音：view）

首先在在Vue官網下載vue.js文件。前端

!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
 <p id="app">
  <p>{{title}}</p>
  <button @click="say()">單擊事件</button></br>
  <p>今年{{age}}</p>
  <input v-model="age">
 </p>
</body>
</html>
<script src="lib/vue.js"></script>
<script src="js/hello.js"></script>
var app = new Vue({  //經過構造函數Vue就能夠建立一個Vue的根實例，並啓動Vue應用
 el: '#app', //指定頁面上一個已經存在的DOM元素來掛載Vue實例
 data: {  //對象的數據
  title: 'hello vue', //經過插值語法{{}}綁定
  age: 22  //經過v-model進行雙向數據綁定
 },
 methods: { //對象的方法
  say: function(){
   console.log(this.title);
  }
 },
 watch: { //監聽數據的變化
  'age': function(newVal, oldVal){
   console.log(newVal, oldVal);
  }
 }
});
複製代碼

html代碼，view層，模板 */
  <div id="app">
        {{ message }}
    </div>
    /* 引入相關文件，然建立實例，在實例中寫各類方法就ok了 */
    <script src="vue_2.2.0.js"></script>
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        let data = {
            message: 'hello,Vue'
        }
      //vm實例
        var vm = new Vue({
            el: '#app',  //掛載元素
            data: data
        });
    },false);
</script>
複製代碼

Vue特點—數據雙向綁定：數據模型(model)與視圖(view)組件的自動同步。vue

涉及到知識點：指令 v-model=""

<div id="app">
   <input type="text" placeholder="請輸入" v-model="message" /> /* 將message綁定到當前元素並監聽其變化 */
   <br />
   <p>數據：{{ message }}</p>
</div>
<script src="vue_2.2.0.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello,Datura!!!'
            }
        });
    },false);
</script>
複製代碼

2、Vue實例

Vue實例，每個應用都是經過Vue這個構造函數建立根實例（root instance）啓動New Vue（選項對象）。須要傳入選項對象，對象包含掛在元素，數據，模板、方法等。 el：掛載元素選擇器 --- String|HtmlElement data：代理數據 --- Object|Function methods：定義方法 --- Object Vue代理data數據，每一個vue實例都會代理其data對象裏全部的屬性，這些被代理的屬性是響應的。新添加的屬性不具有響應功能，改變後不會更新視圖。 Vue實例自身屬性和方法，暴露自身的屬性和方法,以「el、$data。java

var vm = new Vue({
       el: '#app',
       data: {
          message: 'hello,Datura!!!'
        }，
        methods: {
            test (){
                alert(1);
            }
        },
        compontents:{
        //這裏存放組件
        }
     });
  /* vm就是new出來的實例 */
  console.log(vm.$data);//也就是數據data，後面還有不少掛載在vm（new出來的）實例上的屬性
複製代碼

3、聲明式渲染

聲明式---只須要聲明在哪裏（where）作什麼（what），而無需關心如何實現（how）es6

命令式---須要具體代碼表達在哪裏（where）作什麼（what），如何實現（how）api

例子：求數組中每一項的倍數

命令式：使用for循環拿出每一項，而後計算完成後，再放到另外一個數中數組

//定義一個新的空數組，而後利用for循環，每一步每一步地放入其中
      var arrNew = [];
        for (var i=0;i<arr.length;i++){
            arrNew.push(arr[i]*2);
      }
複製代碼

聲明式：使用es6的map方法，關注如何取值bash

//將原數組（arr）中利用map函數，傳入每一項
        var arrNew = arr.map(function (item) {
            return item*2
        })
複製代碼

3. 聲明式渲染

初始化根實例，vue自動將數據綁定在DOM模板上因此能夠看出數據在vue實例中定以，在利用「{{ xxx }}」模板中展現。具體怎麼過去的咱們不關注

4、Vue指令

什麼是指令：

是一種特殊的自定義行間屬性（也就是在html標籤內寫）；指令的職責就是當其表達式的值改變時相應地將某些行爲應用到DOM上，在Vue中，指令以「v-」開頭 Vue中的內置指令：查看更多

v-bind：動態綁定數據。簡寫爲「:」 。=> 之後的:class="{red:boolean}"
v-on ：綁定時間監聽器。簡寫爲「@」，例：@click="xxx"；
v-text ：更新數據，會覆蓋已有結構。相似{{ msg }} ；
v-show ：根據值的真假，切換元素的display屬性；
v-if ：根據值的真假，切換元素會被銷燬、重建； => 在dom中已消失
v-else-if ：多條件判斷，爲真則渲染；
v-else ：條件都不符合時渲染；
v-for ：基於源數據屢次渲染元素或模塊；
v-model ：在表單控件元素（input等）上建立雙向數據綁定（數據源）；
v-pre ：跳過元素和子元素的編譯過程；
v-once ：只渲染一次，隨後數據更新也不從新渲染；
v-cloak ：隱藏未編譯的Mustache語法，在css中設置[v-cloak]{display:none;}
複製代碼

5、Vue模版

1. html模版

html模版：基於DOM的模版，模版都是可解析的有效的HTML 插值：文本：使用「Mustache」語法（大括號）{{ value }}；做用：替換實例上的屬性值，當值改變時，插值內容會被自動更新。也可以使用v-text="value"代替。

<p>{{ value }}<p> 等價於 <p v-text="value"></p>
複製代碼

原生的html：雙大括號輸出的文本，不會解析html標籤。也就是說當實例的data爲html標籤時，不能解析而是直接輸出出來。此時如想要解析，可以使用v-html="value"代替。

new Vue({
    data:{
        value: `<span>我是一個span標籤</span>`
    }
});
<p>{{ value }}<p>   頁面展現  =>  <span>我是一個span標籤</span> 
<p v-html="value"><p>   頁面展現  =>  我是一個span標籤 
複製代碼

須要注意的是，有時候由於一些網絡延遲等緣由，用戶會在也買年中先看到{{ xxx }}，而後纔有數據。咱們若想避免此效果，可用v-text="xxxx"代替。

<h2 :class="{red:show}">標題</h2> => 注意此處的show爲data內的一個布爾值數據，若真則添加red的class，若假則移除red的class
使用javascript表達式：能夠寫簡單的表達式。（能夠簡單的三目運算，可是不能夠寫if語句），之後會有計算屬性。
{ 1+2 }
{ true? "yes":"no" }
複製代碼

2. 字符串模版

template字符串

tempalte => 選項對象的屬性模版將會替換掛載的元素。掛載元素的內容都會被忽略，根節點只有一個，將html結構寫在一對script標籤中，設置type="x-template"。

<body>
    <div id="box">

    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var str = '<h2>hello pink!</h2>'
        var vm = new Vue({
            el: '#box',
            template: str
        });
    },false);
</script>
複製代碼

說明權重比較高，直接「代替」掛載點，把原來的html替換後顯示

//代碼片斷這個就是利用script標籤對內定義模版，侷限性：不能跨文件使用，一個頁面中可使用
<body>
    <div id="box">

    </div>
</body>
<script src="vue.js"></script>
<script type="x-template" id="str">
    <p>我是一個p標籤</p>
</script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '#box',
            template: '#str'
        });
    },false);
</script>
複製代碼

//代碼片斷放在template標籤裏，並給一個id名
<body>
    <template id="tem">
        <p>我是template</p>
    </template>
    <div id="box">

    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '#box',
            template: '#tem'
        });
    },false);
</script>
複製代碼

數據對象屬性

class: {}, => 綁定class，和v-bind:class同樣的API
style: {}, => 綁定樣式，和v-bind:style同樣的API
attrs: {}, => 添加行間屬性
domProps: {}, => DOM元素屬性
on: {}, => 綁定事件
nativeOn: {}, => 監聽原生事件
directives: {}, => 自定義指令
scopedSlots: {}, => slot做用域
slot: {}, => 定義slot名稱 和組件有關係，插曹
key: "key", => 給元素添加惟一標識
ref: "ref", => 引用信息
複製代碼

這一期的內容就結束了，敬請期待下一篇，本內容來自於互聯網和王眫子修改，但願對你們會有一點