vue.js快速入門

MkkHou 發布于2019-08-20 10:45 / 2074人閱讀

摘要：但是，今天我要寫一個快速入門，本人覺得還是有一點用處，因為，我不可能在一天之內精通某種東西，卻可以在一兩小時入門。不知道還要不要再來一個快速入門，發展得挺快，東西也像類似的全家。

以前看到多少天學習系列，我都深感煩躁，短短幾天怎么可以精通，那是對于他們而言。但是，今天我要寫一個快速入門，本人覺得還是有一點用處，因為，我不可能在一天之內精通某種東西，卻可以在一兩小時入門。

回到vue本身，當初聽說它只做view層。而向一般人隱藏了，其實它的view是帶有model的。它的特點之一是雙向綁定，但是它出現的頻率太多，人們早就對它沒那么驚喜了。如果你以前看過angular，過濾器，路由，指令這些一定不會陌生，在vue中它們都有。

下面便是我的一次快速入門，雖然說是快速入門，并不叫Javascript快速入門，看之前還要有JS的基礎，我是帶著三個問題：

作用域

自定義事件(event)和用戶事件(methods)

vue文件與普通引入的區別

1. 作用域

首先，我們看它的作用域，直接上代碼。

// 1.定義
var MyComponent = Vue.extend({
  template: "A custom component!"
})

// 2.注冊
Vue.component("my-component", MyComponent)

// 3.創建根實例
new Vue({
  el: "#example"
});

不小心就把組件的API文檔貼上來了，我們看代碼說明：如果有看過angular的同事，應該會對ng-app不陌生。那是表明它以下的東西都會在angular以內，ng-controller則是這個controller內的變量可以訪問。同理，我們看3那里，實例化一個vue對象，el指明了它的作用域。就在這個example的元素。我們可以修改一下，加一個data看看：

new Vue({
  el: "#example",
  data: {
      text: "hello,vue;
  }
});

不用猜也知道，這個text是可以綁定在example元素所在的范圍內。下面，我們作死一下，試試在這個組件去訪問
這個text屬性。

var MyComponent = Vue.extend({
  template: "{{text}} A custom component!"
})

然后，就可以發現這并不能顯示出來。這時候應該怎么做呢？回到文檔，這是一個很好的方案，當你快速入門的時候，
無論什么時候都要想起文檔，找不到再去網絡上。篇幅有限，并不能從零開始教到一百，而且我也是跟你一樣入門級的。廢話不說回到代碼。這里的text不能訪問是正確的，一個組件就是要能夠復用，為了達到這個目的，才跟外面的分開。但是components寫法真的有data這個選項，但是只接收一個function。這樣做也是為了每個組件可以獨立。

組件實例的作用域是孤立的，可以使用 props 把數據傳給子組件，這里就不多說了。

2. 自定義事件(event)和用戶事件(methods)

我在翻文件的時候，看到了這樣的東西。

{
    methods: {

    },
    events: {

    }
}

用戶事件一般都放在methods，新手這時又看到了events，它們有什么區別呢？看標題。

至于詳細的，還是要看文檔。事件無非就是監聽和觸發，與angular相似，它也有on emit這類似的實現。

vue有一個比較有趣的東西，事件修飾符。或者其他構架也會有，但是看起來很有逼格。

綁定多個事件


也可以這樣寫


然后還有縮寫

3.vue文件與普通引入的區別

對于大型項目，可能會用vue文件這種方式來組織代碼。這跟react就有點像了，樣式，腳本，模板都在一個文件內。
這樣很好管理，壞處就是初學者會暈，如果有好多的組件一起。

在這里注意一下，組件就是一個vue文件，然后都是通過require的方式進來（廢話）。在普通引入腳本的方式，你可以這樣創建組件和過濾器：

Vue.component("name", function(){
  // ...
});

Vue.filter("name", function(){
 // ...
});

如果換到了vue文件這種模式，你得明白這是一個大前提，這是適合大型項目使用的，所以寫法也會變得規范。這時，你會有components，filters這種目錄，再通過require進入到你所需要的地方。所有寫法都是模塊化你要記得導出這個方法，這一點要注意。

寫在最后

vue.js應該快迎來2.0。不知道還要不要再來一個快速入門，vue.js發展得挺快，東西也像react類似的全家：vue-router,vuex。對于入門來說其實還是有點累，從最初只要引入一個文件，到使用構建工具，再到一系列全家桶。前端開發已經變得沒那么純粹，或者最后還是看一個項目怎么這些工具吧。

GPU云服務器云服務器前端快速入門云計算快速入門 css快速入門 html快速入門

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

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

前端必須要珍藏的技術文章和面試題

摘要：前端工程師學習資料，快速查找面試題，經典技術文章的總結，編程技巧，幫助學習者快速定位問題花點時間整理出一下前端工程師日常工作所需要的學習資料查找，幫助學習者快速掌握前端工程師開發的基本知識編程始于足下記住再牛逼的夢想也抵不住傻逼似的堅持蝴蝶前端工程師學習資料，快速查找面試題，經典技術文章的總結，編程技巧，幫助學習者快速定位問題花點時間整理出一下web前端工程師日常工作所需要的學習資料...

MoAir 2019-08-26 10:29 評論0 收藏0
Vue.js快速入門

摘要：今年以來，的文檔更新很快完善社區也日漸狀大，再加上于某廠你懂的大力的推廣，的前景十分光明。一般情況下，中小型的系統從遷移到版本大概只需要天的時間。快去動手嘗試吧原創新書移動前端高效開發實戰已在亞馬遜京東當當開售。作者：曉飛（滬江Web前端開發工程師）本文原創，轉載請注明作者及出處 Vue.js框架已經火了好長一段時間了，早在2015年的雙11中，淘寶的部分導購業務——如：雙十一晚會搖...

KitorinZero 2019-08-20 19:06 評論0 收藏0
vue.js快速入門

摘要：的核心庫只關注視圖層，并且非常容易學習，同時擁有非常容易上手的中英文都有提供快速入門準備地址地址沒錯就只需要這兩個就可以開發了是核心文件，在這里只是為了提高開發效率而引用的，是可選的。專門存儲一些數據的屬性，數據一定是對象格式。 **關于前陣子的文章錯誤有點多所以從新修改了并添加了一些在官方腳手架vue-cli開發時需要注意的事項，Vue.js是一個輕巧、高性能、可組件化的MVVM庫。...

dantezhao 2019-08-20 13:46 評論0 收藏0
Vue.js 快速入門

摘要：改變其中的任何一層，另外一層都會改變。插值相信你也注意到了，通過的形式就能取到的值，并與進行綁定。中改變中的值時相應也改變了中的，從而也得到改變。上面的代碼改為這樣則不會隨著數據的改變而更新。顧名思義，用于條件判斷，和是一對。什么是Vue.js showImg(http://7xawrk.com1.z0.glb.clouddn.com/15-11-8/16479285.jpg); v...

caspar 2019-08-21 10:46 評論0 收藏0