Vue基礎入門筆記彙總

Vue學習筆記javascript

 

一、  vue是什麼?css

Vue是一套用於構建用戶界面的漸進式框架(漸進式框架:分層設計,即你須要使用一種框架或者工具的時候,引入便可使用他的大部分功能,須要使用其餘功能的時候只須要添加相應功能插件【作加法】,相似於Jquery,由簡單到複雜,優勢:節省成本https://www.zhihu.com/question/51907207)。與其餘大型框架不一樣的是,Vue被設計爲能夠自底向上逐層應用。Vue的核心層只關注視圖層,不只易於上手,還便於與第三方庫或既有項目整合。另外一方面,當與現代化的工具鏈以及各類支持類庫結合使用時,Vue也徹底可以爲複雜的單頁應用提供驅動。html

二、  Hello Vue!搭建一個Vue框架;vue

  1> 定義Viewjava

  2> 定義Modeljquery

  3> 建立一個Vue實例或"ViewModel",它用於鏈接View和Modelnpm

var app = new Vue({
    el: '#app', 
    data: {
        message: 'Hello Vue!',
        name: 'Hello Vue!'
    },
//    template: '<h1 style="color:red">我是選項模板2<br />{{ name }}</h1>',
//    template: '#demo3',
    /* el 被新建立的 vm.$el 替換,並掛載到實例上去以後調用該鉤子
     * 能夠簡單的理解爲:就是渲染dom節點的時候使用
     * vue加載完成後回調函數
     * 運行AJAX事件請求數據
     */
    mounted: function () {
        //延遲迴調
        this.$nextTick(function () {
//            $("#message").val("Hello Vue,I am message!");
//            $("#name").val("Hello Vue,I am name!");
            app.$data.message = "Hello Vue,I am message!";
            app.$data.name = "Hello Vue,I am name!";
//            alert(app.$data.name);
            var i = 0;
            var interIndex = setInterval(function(){
                app.$data.name = (i++) + 1;
            }, 1000);
        });
        //app.$data.name = "Hello World1!";//會報錯:app對象不存在
//        alert($("#temp").is(':hidden'));
    },
    methods: {//自定義方法
      
    }
})

 

三、  數據驅動?app

Vue是數據驅動的,那什麼叫作數據驅動,舉個例子,咱們電腦裝了一個顯卡,電腦是怎麼控制的呢,就是由於驅動,電腦經過顯卡驅動控制顯卡,同理,vue至關於驅動,元素至關於顯卡,咱們不直接操做元素,咱們只須要操做vue實例用以操做元素,好比咱們須要給一個id爲tem的dom元素賦值,Jquery的作法是$(「#tem」).val(‘aaa’),直接操做元素用以賦值,而vue的作法是它會建立一個實例直接將數據與dom進行綁定,數據與dom元素將保持同步,當數據變動,dom也會隨之更新;(dom元素隨數據改變而改變,那數據會不會隨dom元素改變而改變。這單向綁定,仍是雙向綁定?)引出MVVM模式

四、  MVVM模式(Model-View-ViewModel)框架

MVVM模式自己是實現了雙向綁定的,在Vue.js中可使用v-model指令在表單元素上建立雙向數據綁定。dom

下圖不只歸納了MVVM模式(Model-View-ViewModel),還描述了在Vue.js中ViewModel是如何和View以及Model進行交互的。

ViewModel是Vue.js的核心,它是一個Vue實例。Vue實例是做用於某一個HTML元素上的,這個元素能夠是HTML的body元素,也能夠是指定了id的某個元素。

當建立了ViewModel後,雙向綁定是如何達成的呢?

首先,咱們將上圖中的DOM Listeners和Data Bindings看做兩個工具,它們是實現雙向綁定的關鍵。

從View側看,ViewModel中的DOM Listeners工具會幫咱們監測頁面上DOM元素的變化,若是有變化,則更改Model中的數據;

從Model側看,當咱們更新Model中的數據時,Data Bindings工具會幫咱們更新頁面中的DOM元素。

五、  生命週期

 

六、  經常使用指令

v-if指令

  年齡:<span v-if="age > 20">{{ age }}</span>
       <span v-else-if="age > 18">{{ age+"(未成年)" }}</span>
       <span v-else>{{ age+"(小孩)" }}</span><br />

 

v-show指令

  <!-- v-if 直接刪除元素; v-show 修改style屬性:display:none; -->
  性別:<span v-show="sex=='男'||sex=='女'">{{ sex }}</span><br />

v-for指令

  <table>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>性別(我是簡寫)</th>
            <th>年齡</th>
        </tr>
     <!-- temp 1 -->
<tr v-for="emp in employees"> <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td> <td v-bind:id="'td'+emp.name" v-else>{{ emp.name+"(缺某)" }}</td> <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <!-- b-bind:attrbute="" 簡寫 :bind:attrbute="" --> <td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <td v-if="emp.age>20">{{ emp.age }}</td> </tr>
     <!-- temp 2 -->
     <tr v-for="(emp, index) in employees">
            <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td>
            <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
            <td v-if="emp.age>20">{{ emp.age }}</td>
        </tr>
</table>

 

v-bind指令

  <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
  <!-- b-bind:attrbute="" 簡寫  :bind:attrbute="" -->
  <td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>

 

v-on指令

    <button type="button" v-on:click="remove">刪除</button>
    <!-- b-on:click="" 簡寫 @click="" -->
    <button type="button" @click="remove">刪除(我是簡寫)</button
    <button v-on:click="removeByIndex(index)">刪除</button>

七、寫一個Demo

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基礎的VUE介紹</title>
<link rel="stylesheet" href="../assets/css/index.css">
<style type="text/css">
    html, body {width: 100%;}
    #app {width: 95%; margin: auto;}
    #app table {border-collapse: collapse;}
    #app table th,td {width: 200px; border: 1px #ccc solid; text-align: center;}
    #app .boy {background: blue;}
    #app .girl {background: red;}
</style>
</head>
<body>

<div id="app">
    <h1>v-if/v-else/v-show</h1>
    姓名:<span v-if="name.indexOf('某') >= 0">{{ name }}</span>
        <span v-else="name.indexOf('某') < 0">{{ name+"(缺某)" }}</span><br />
    年齡:<span v-if="age > 20">{{ age }}</span>
        <span v-else-if="age > 18">{{ age+"(未成年)" }}</span>
        <span v-else>{{ age+"(小孩)" }}</span><br />
    <!-- v-if 直接刪除元素; v-show 修改style屬性:display:none; -->
    性別:<span v-show="sex=='男'||sex=='女'">{{ sex }}</span><br />
    
    <hr /><h1>v-on/v-model</h1>
    姓名:<input type="text" id="name" v-model="name" /> <br />
    性別:<input type="radio" name="sex" value="男" v-model="sex" /><input type="radio" name="sex" value="女" v-model="sex" /><br />
    年齡:<input type="text" id="age" v-model="age" /><br />
    <input type="button" value="添加" @click="save"/>
    
    <hr /><h1>v-for(1)</h1>
    <table>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>性別(我是簡寫)</th>
            <th>年齡</th>
        </tr>
        <tr v-for="emp in employees">
            <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td>
            <td v-bind:id="'td'+emp.name" v-else>{{ emp.name+"(缺某)" }}</td>
            <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
            <!-- b-bind:attrbute="" 簡寫  :bind:attrbute="" -->
            <td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
            <td v-if="emp.age>20">{{ emp.age }}</td>
        </tr>
    </table>
    
    <hr /><h1>v-on</h1>
    <button type="button" v-on:click="remove">刪除</button>
    <!-- b-on:click="" 簡寫 @click="" -->
    <button type="button" @click="remove">刪除(我是簡寫)</button>
    
    <hr /><h1>v-for(2)</h1>
    <table>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
            <th>操做</th>
        </tr>
        <tr v-for="(emp, index) in employees">
            <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td>
            <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
            <td v-if="emp.age>20">{{ emp.age }}</td>
            <td><button v-on:click="removeByIndex(index)">刪除</button></td>
        </tr>
    </table>
</div>

<div style="height: 200px; width: 100%; text-align: center; margin-top: 200px;"><h1>看不見我,看不見我,看不見我</h1></div>
</body>
<script type="text/javascript" src="../assets/js/vue/dist/vue.js"></script>
<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="index.js"></script>
</html>

JS(index.js)

var app = new Vue({
    el: '#app', 
    data: {
        name: '金某某',
        age: 24,
        sex: '男',
        
        employees: [{
            name: '金某某1',
            age: 24,
            sex: '男',
        },{
            name: '金某某2',
            age: 21,
            sex: '女',
        },{
            name: '金某某3',
            age: 23,
            sex: '男',
        }]
    },
    mounted: function () {
        //延遲迴調
        this.$nextTick(function () {
            
        });
        Array.prototype.deleteByIndex = function(delIndex){
            var temArray=[];
            for(var i=0;i<this.length;i++){
                if(i!=delIndex){
                    temArray.push(this[i]);
                }
            }
            return temArray;
        }
    },
    methods: {//自定義方法
        remove: function(){
            if(app.$data.employees.length > 0)
                app.$data.employees = app.$data.employees.deleteByIndex(app.$data.employees.length - 1);
            else alert("列表被被刪完了 :(")
        },
        removeByIndex: function(index){
            app.$data.employees = app.$data.employees.deleteByIndex(index);
        },
        save: function(){
            var emp = {};
            emp.name = app.$data.name;
            emp.age = app.$data.age;
            emp.sex = app.$data.sex;
            app.$data.employees.push(emp);
        }
    }
})

敬謝:

http://www.javashuo.com/article/p-thghdyau-k.html
https://cn.vuejs.org/v2/guide/

Vue.js

<!-- 開發環境版本,包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產環境版本,優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
相關文章
相關標籤/搜索