成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue.js-開篇

leejan97 / 1386人閱讀

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

學(xué)習(xí)筆記：Vue.js基礎(chǔ)知識(shí)
基礎(chǔ)知識(shí)

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

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

變量app代表這個(gè)Vue實(shí)例。

其中，必不可少的選項(xiàng)是el，用于指定一個(gè)頁(yè)面中已存在的DOM元素來(lái)掛載Vue實(shí)例，可以是HTMLElement，也可以是CSS選擇器。

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

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

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

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

console.log(app.name);

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

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

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

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

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

插值與表達(dá)式

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

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






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

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

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

如果想要顯示{{}}標(biāo)簽，不進(jìn)行替換，使用v-pre即可跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程。

在{{}}中除了簡(jiǎn)單的綁定屬性值外，還可以使用JavaScript表達(dá)式進(jìn)行簡(jiǎn)單的運(yùn)算、三元運(yùn)算等。

Vue只支持單個(gè)表達(dá)式，不支持語(yǔ)句和流程控制。

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

過(guò)濾器

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


    {{date | formatDate}}

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


{{message | filterA | filterB}}


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

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

指令事件

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

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

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

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

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


    
這是一段為本

    



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

在handleClose方法中直接通過(guò)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("在初始化時(shí)調(diào)用");
    }
});
app.init("通過(guò)外部調(diào)用");
語(yǔ)法糖

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102631.html

相關(guān)文章

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

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

    Lowky 評(píng)論0 收藏0

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

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

    e10101 評(píng)論0 收藏0

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

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

    yedf 評(píng)論0 收藏0

  • (原創(chuàng))vue 學(xué)習(xí)筆記

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

    layman 評(píng)論0 收藏0

  • 5種處理Vue異常的方法

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

    Drinkey 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<