成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue.js-開篇

leejan97 / 1437人閱讀

摘要：掛載成功后，可以通過訪問該元素。選項用于聲明應(yīng)用內(nèi)需要雙向綁定的數(shù)據(jù)。主要解綁一些使用監(jiān)聽的事件等。指令事件指令是模板中最常用的一項功能，它帶有前綴。指令的主要職責就是當其表達式的值改變時，相應(yīng)地將某些行為應(yīng)用到上。

學習筆記：Vue.js基礎(chǔ)知識
基礎(chǔ)知識

構(gòu)造函數(shù)Vue的根實例new Vue({})，并啟動Vue應(yīng)用。

var app = Vue({
    el: "#app",
    data: {},
    methods: {}
});

變量app代表這個Vue實例。

其中，必不可少的選項是el，用于指定一個頁面中已存在的DOM元素來掛載Vue實例，可以是HTMLElement，也可以是CSS選擇器。

var app = Vue({
    el: document.getElementById("app")
});

掛載成功后，可以通過app.$el訪問該元素。Vue提供了很多常用的實例屬性和方法，都以$開頭。

data選項用于聲明應(yīng)用內(nèi)需要雙向綁定的數(shù)據(jù)。建議所有會用到的數(shù)據(jù)都預(yù)先在data內(nèi)聲明，提升業(yè)務(wù)的可維護性。

Vue實例new Vue({})，這里可以使用app代理了data對象里的所有屬性，可以這樣訪問data中的數(shù)據(jù)：

console.log(app.name);

除了顯式地聲明數(shù)據(jù)外，還可以指向一個已有的變量，并且它們之間默認建立了雙向綁定，當修改其中任意一個時，另一個也會跟著變化。

var myData = {
    a: 1
};

var app = Vue({
    el: "#app",
    data: myData
});

app.a = 2;
console.log(myData.a);//2
myData.a = 3;
console.log(app.a);//3
生命周期

Vue的生命周期鉤子：

created：實例創(chuàng)建完成后調(diào)用，此階段完成了數(shù)據(jù)的觀測等，但未掛載，$el還不可用。（需要初始化處理一些數(shù)據(jù)時會比較有用）

mounted：el掛載到實例上后調(diào)用，第一個業(yè)務(wù)邏輯會在這里開始。

beforeDestroy：實例銷毀之前調(diào)用。主要解綁一些使用addEventListener監(jiān)聽的事件等。

這些鉤子與el和data類似，也是作為選項寫入Vue實例中，并且鉤子的this指向的是調(diào)用它的Vue實例。

插值與表達式

使用（Mustache語法）{{}}是最基本的文本插值方法，它會自動將我們雙向綁定的數(shù)據(jù)實時顯示出來。

v-html直接輸出HTML，而不是將數(shù)據(jù)解析后的純文本。






new Vue({
    el: "#app",
    data: {
        link: "this is a link."
    }
});

link的內(nèi)容將會被渲染成一個a標簽，而不是純文本。

如果將用戶產(chǎn)生的內(nèi)容使用v-html輸出后，有可能導致XSS攻擊，所以要在服務(wù)端對用戶提交的內(nèi)容進行處理，一般可將<>轉(zhuǎn)義。

如果想要顯示{{}}標簽，不進行替換，使用v-pre即可跳過這個元素和它的子元素的編譯過程。

在{{}}中除了簡單的綁定屬性值外，還可以使用JavaScript表達式進行簡單的運算、三元運算等。

Vue只支持單個表達式，不支持語句和流程控制。

在表達式中不能使用用戶自定義的全局變量，只能使用Vue白名單內(nèi)的全局變量，例如Math和Date。

過濾器

Vue.js支持在{{}}插值的尾部添加一個管道符(|)對數(shù)據(jù)進行過濾，經(jīng)常用戶格式化文本，比如字母全部大寫、貨幣千位使用逗號分隔等。過濾的規(guī)則是自定義的，通過給Vue實例添加選項filter來設(shè)置。


    {{date | formatDate}}

過濾器也可以串聯(lián)，而且可以接收參數(shù)：


{{message | filterA | filterB}}


{{message | filterA("arg1","arg2")}}

過濾器應(yīng)當用于處理簡單的文本轉(zhuǎn)換，如果要實現(xiàn)更為復雜的數(shù)據(jù)轉(zhuǎn)換，應(yīng)該使用計算屬性。

指令事件

指令（Directives）是Vue.js模板中最常用的一項功能，它帶有前綴v-。指令的主要職責就是當其表達式的值改變時，相應(yīng)地將某些行為應(yīng)用到DOM上。

v-bind的基本用途是動態(tài)更新HTML元素上的屬性，比如id、class等。

另一個非常重要的指令就是v-on，用來綁定事件監(jiān)聽器。

在普通元素上，v-on可以監(jiān)聽原生的DOM事件，除了click外還有dbclick、keyup、mousemove等。表達式可以是一個方法名，這些方法都寫在Vue市里的methods屬性內(nèi)，并且是函數(shù)的形式，這些函數(shù)的this指向的是當前Vue實例本身，因此可以直接使用this.xxx的形式訪問或修改數(shù)據(jù)。

Vue.js將methods里的方法進行代理，可以像訪問Vue數(shù)據(jù)一樣調(diào)用方法：


    
這是一段為本

    



new Vue({
    el: "#app",
    data: {
        show: true
    },
    methods: {
        handleClose: function () {
            this.close()
        },
        close: function () {
            this.show = false
        }
    }
});

在handleClose方法中直接通過this.close()調(diào)用了close()函數(shù)。

var app = new Vue({
    el: "#app",
    data: {
        show: true
    },
    methods: {
        init: function (text) {
            console.log(text);
        },
    },
    mounted: function () {
        this.init("在初始化時調(diào)用");
    }
});
app.init("通過外部調(diào)用");
語法糖

語法糖是指在不影響功能的情況下，添加某種方法實現(xiàn)同樣的效果，從而方便程序開發(fā)。

Vue.js的v-bind和v-on指令都提供了語法糖，也可以說是縮寫，比如v-bind縮寫成:，多用于a、img標簽；v-on縮寫成@，所用于input、button標簽。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/102631.html

相關(guān)文章

  • Vue2.x 的筆記：第一次的感受 Vue 開篇

    摘要：在互聯(lián)網(wǎng)高速發(fā)現(xiàn)的今天，可以說每天都在變化著一不留神你就會錯過一個億，所以你不得不時刻的保持著高度的專注。如今為代表的三個框架已然成為了主流成為統(tǒng)治者，呈現(xiàn)了三分天下的局面。有人說如今是框架的時代，只要會一個框架就能開始干活了。 在互聯(lián)網(wǎng)高速發(fā)現(xiàn)的今天，可以說每天都在變化著一不留神你就會錯過一個億，所以你不得不時刻的保持著高度的專注。 互聯(lián)網(wǎng)的信息是多元的，大量的，在海量的信息中很容易...

    Lowky 評論0 收藏0

  • VUE組件化開發(fā)的精髓

    摘要：開篇的簡單介紹和演示的開發(fā)精髓組件組件的三個組件之間的通信方式實例講解銖寶益幫助中心前端組件開篇的簡單介紹和演示發(fā)布于年，是一個漸進式的框架，同時也是一個輕量級的框架，它只關(guān)心數(shù)據(jù)，從而讓開發(fā)者不用過多的關(guān)注的改變和操作，的作者為尤雨溪， 開篇：vue.js的簡單介紹和演示 vue的開發(fā)精髓-組件 vue組件的三個API：prop、event、slot 組件之間的通信方式 實例講解：銖寶益幫...

    e10101 評論0 收藏0

  • 基于vue.js實現(xiàn)樹形表格的封裝

    摘要：此頁面是實現(xiàn)樹表格的關(guān)健頁面。這里就是關(guān)健點，因為這個子組件是需要遞歸實現(xiàn)，所以，需要動態(tài)注冊到當前組件中。補充一點不要只看部分，部分才是這個樹表格的關(guān)健所在。 基于vue.js實現(xiàn)樹形表格的封裝（vue-tree-table） 前言 由于公司產(chǎn)品（基于vue.js）需要，要實現(xiàn)一個樹形表格的功能，百度、google找了一通，并沒有發(fā)現(xiàn)很靠譜的，也不是很靈活。所以就用vue自己擼了一個...

    yedf 評論0 收藏0

  • (原創(chuàng))vue 學習筆記

    摘要：菜鳥教程這是一個屬性其值是字符串菜鳥教程同上這是一個屬性其值是字符串用于定義的函數(shù)，可以通過來返回函數(shù)值。它們都有前綴，以便與用戶定義的屬性區(qū)分開來。 開篇語 我最近學習了js,取得進步,現(xiàn)在學習vue.js.建議新手學習,請不要用npm的方式(vue-cli,vue腳手架),太復雜了. 請直接下載vue.js文件本地引入,就上手學習吧參照菜鳥教程網(wǎng)站的vue.js教程http://...

    layman 評論0 收藏0

  • 5種處理Vue異常的方法

    摘要：最近突然意識到，我竟然從來沒有認真去處理異常。第三種執(zhí)行一個會拋出異常的方法這個錯誤在控制臺也和常規(guī)報錯。這種是比較常見的錯誤。它是一個全局的異常處理函數(shù)，可以抓取所有的異常。 原文: Handling Errors in Vue.js 譯者: Fundebug 本文采用意譯，版權(quán)歸原作者所有 去年一整年，我都在使用最愛的—Vue.js— 來做項目。最近突然意識到，我竟然從來沒...

    Drinkey 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<