Vue.js-開篇

leejan97 發布于2019-08-23 16:01 / 1379人閱讀

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

學習筆記：Vue.js基礎知識

基礎知識

構造函數Vue的根實例new Vue({})，并啟動Vue應用。

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選項用于聲明應用內需要雙向綁定的數據。建議所有會用到的數據都預先在data內聲明，提升業務的可維護性。

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

console.log(app.name);

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

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：實例創建完成后調用，此階段完成了數據的觀測等，但未掛載，$el還不可用。（需要初始化處理一些數據時會比較有用）

mounted：el掛載到實例上后調用，第一個業務邏輯會在這里開始。

beforeDestroy：實例銷毀之前調用。主要解綁一些使用addEventListener監聽的事件等。

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

插值與表達式

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

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





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

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

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

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

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

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

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

過濾器

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


    {{date | formatDate}}

過濾器也可以串聯，而且可以接收參數：


{{message | filterA | filterB}}


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

過濾器應當用于處理簡單的文本轉換，如果要實現更為復雜的數據轉換，應該使用計算屬性。

指令事件

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

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

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

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

Vue.js將methods里的方法進行代理，可以像訪問Vue數據一樣調用方法：


    這是一段為本
    


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

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

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

語法糖

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

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

GPU云服務器云服務器 Vue.js vue.js 屬性 vue.js自學 cdn vue.js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102631.html

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

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

Lowky 2019-08-26 12:19 評論0 收藏0
VUE組件化開發的精髓

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

e10101 2019-05-23 11:05 評論0 收藏0
基于vue.js實現樹形表格的封裝

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

yedf 2019-08-26 12:09 評論0 收藏0
(原創)vue 學習筆記

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

layman 2019-08-22 18:09 評論0 收藏0
5種處理Vue異常的方法

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

Drinkey 2019-08-23 18:09 評論0 收藏0