国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue2.0 學習筆記

cgh1999520 / 3038人閱讀

摘要：父子組件通信父組件通過向下傳遞數據給子組件，子組件通過給父組件發送消息。是一個對象而不是字符串數組時，它包含驗證要求。狀態管理由于多個狀態分散的跨越在許多組件和交互間，大型應用的復雜度也隨之增長。提供了，可以通過文檔學習。

什么是vue

vue是一個前端框架，主要兩個特點：數據綁定、組件化。

安裝環境

根據教程安裝環境：node.js、npm、webpack、vue-cli
主要的命令行：

# 保證已安裝node.js環境    全局安裝 vue-cli（vue的腳手架）
$ npm install --global vue-cli
# 創建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

相關的幾個命令行：

# node版本
$ node -v
# 清緩存
$ npm cache clean -f
# 全局安裝鏡像
$ npm install -g nrm
# 可用的鏡像資源
$ nrm ls
# 選用taobao的鏡像（安裝鏡像之后，npm可以輸入cnpm代替）
$ nrm use taobao
# 安裝vue路由模塊和網絡請求模塊
$ cnpm install vue-router vue-resource --save
# 工程打包
$ npm run build
編輯器插件

sublime text 中安裝Vue Syntax Highlight插件

使用官網文檔學習

一些小總結：

template 寫 html，script寫 js，style寫樣式

一個template下只能有一個并列的 div

數據要寫在return 里面,如:
組件

組件是什么？
組件可以擴展html元素，封裝可以重用的代碼。Vue.js的編譯器為它添加特殊功能。

使用組件

注冊全局組件，使用：Vue.component(tagName,options)：

    //注冊，對于自定義標簽名稱，不強制要求遵循W3C規則（小寫，并且包含一個短杠），不過還是盡量遵循的比較好
    Vue.component("my-component",{
        template:"
A example component!
"
    })
    //使用
    

        
    
 
    //創建根實例，要確保初始化根實例之前注冊了組件
    new Vue({
        el:"#example"
    })

注冊局部組件，通過組件實例選項注冊，可以使組件盡在另一個實例/組件的作用域中可用：

var Child= {
    template:"
A example component!
"
}
new Vue({
    //...
    components:{
        //將只在父模板可用
        "my-component":Child
    }
})

這種封裝也適用于其他可注冊的Vue功能，如指令。

父子組件通信

父組件通過props向下傳遞數據給子組件，子組件通過events給父組件發送消息。

props
組件實例的作用域是孤立的。子組件的模板內不應該直接引用父組件的數據，可以使用props把數據傳給子組件。

props是父組件用來傳遞數據的一個自定義的屬性。子組件需要顯式的用props選項聲明的“prop”

Vue.component("child",{
    //聲明props
    props:["myMessage"],//使用非字符串模板時，prop的名字形式會從camelCase轉為kebab-case
    template:"hello,{{message}}!"
})
//使用

//渲染
hello,jake!

動態的props

可以用v-bind動態綁定props的值到父組件的數據中，當父組件的數據有變化時，子組件會隨之變化。

 
    
    //:my-message 是 v-bind:my-message的縮寫

prop驗證

組件可以為props指定驗證要求。prop是一個對象而不是字符串數組時，它包含驗證要求。

自定義事件

子組件傳遞數據給父組件，需要用到自定義事件：
使用 $on(eventName) 監聽事件
使用 $emit(eventName) 觸發事件


  
{{ total }}

  
  



Vue.component("button-counter",{
    template:"",
    data:function () {
        return {
            counter:0
        }
    },
    methods:{
        increment: function(){
            this.counter +=1
            this.$emit("incrment")
        }
    }
})

new Vue({
    el:"#counter-event-example",
    data:{
        total:0
    },
    methods:{
        incrementTotal:function(){
            this.total +=1
        }
    }
})
非父子組件通信

簡單場景下，使用一個用的Vue實例作為中央事件的總線。

var bus = new Vue()
//觸發組件A中的事件
bus.$emit("id-selected",1)
//在組件B創建的鉤子中監聽事件
bus.$on("id-selected",function(id){
    //...
})

復雜情況下，應該考慮專門的狀態管理模式。

編寫可復用的組件

可復用的組件應當定義一個清晰的公開接口，Vue組件的接口，來自三部分——props、events、slots：
props允許外部環境傳遞數據給組件。
events允許組件觸發外部環境的副作用。
slots允許外部環境將額外的內容組合在組件中。

路由

大多數的單頁面應用，都推薦使用vue-router庫
簡單的路由不需要引入整個路由庫。如：

const NotFound = { template: "
Page not found
" }
const Home = { template: "
home page
" }
const About = { template: "
about page
" }
const routes = {
  "/": Home,
  "/about": About
}
new Vue({
  el: "#app",
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

將 h 作為 createElement 的別名是 Vue 生態系統中的一個通用慣例，實際上也是 JSX 所要求的，如果在作用域中 h
失去作用， 在應用中會觸發報錯。
狀態管理

由于多個狀態分散的跨越在許多組件和交互間，大型應用的復雜度也隨之增長。采用簡單的store模式：

var store = {
  debug: true,
  state: {
    message: "Hello!"
  },
  setMessageAction (newValue) {//變更記錄
    this.debug && console.log("setMessageAction triggered with", newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    this.debug && console.log("clearMessageAction triggered")
    this.state.message = "clearMessageAction triggered"
  }
}
//實例/組件仍然可以擁有和管理自己的私有狀態
var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }

組件不允許直接修改屬于 store 實例的 state，而應執行 action 來分發 (dispatch) 事件通知 store 去改變，我們最終達成了 Flux 架構。這樣約定的好處是，我們能夠記錄所有 store 中發生的 state 改變，同時實現能做到記錄變更 (mutation) 、保存狀態快照、歷史回滾/時光旅行的先進的調試工具。Vue提供了vuex，可以通過文檔學習。

服務端渲染SSR

先看看我們什么時候需要它：

SEO 搜索引擎優化

客戶端網絡慢

客戶端運行在老的或者沒有javascript引擎上，Vue只能運行在IE9+

服務端渲染來改善一個少數的營銷頁面等的SEO,可以用預渲染替換?？梢杂?strong>prerender-spa-plugin插件來添加預渲染。

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

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

相關文章

  • Vue 筆記三：Vue2.0與1.0的區別

    摘要：升級的區別與的斷層式升級不同，延續了自己的風格。在命名方式和上有一些區別，掌握它們是你升級整個項目的關鍵。以下內容都是來源于個人項目的一些經驗之談，并非系統性的闡述?？偰夸浨岸私涷炇占鬓D載自個人建了前端學習群，旨在一起學習前端。 升級的區別 與angular的斷層式升級不同，vue延續了自己的風格。在命名方式和API上有一些區別，掌握它們是你升級整個項目的關鍵。以下內容都是來源于個人...

    Big_fat_cat 評論0 收藏0

  • (原創)vue 學習筆記

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

    layman 評論0 收藏0

  • vue2.0學習筆記（事件處理）

    摘要：請記住，會告訴瀏覽器你不想阻止事件的默認行為。而單單釋放也不會觸發事件。修飾符修飾符允許你控制由精確的系統修飾符組合觸發的事件。當一個被銷毀時，所有的事件處理器都會自動被刪除。 1、監聽事件 用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。 Add 1 The button above has been clicked {{ counte...

    bovenson 評論0 收藏0

  • vue2.0學習筆記（表單輸入綁定）

    摘要：復選框當選中時當沒有選中時這里的和特性并不會影響輸入控件的特性，因為瀏覽器在提交表單時并不會包含未被選中的復選框。 1、基礎用法 v-model指令可以實現表單元素和Model中數據的雙向數據綁定。只能運用在表單元素中（input、radio、text、address、email、select、checkbox、textarea） 可以用 v-model 指令在表單 、 及 元素上...

    Seay 評論0 收藏0

  • vue2.0學習筆記（組件注冊）

    摘要：組件名在注冊一個組件的時候，我們始終需要給它一個名字。局部注冊全局注冊往往是不夠理想的。基礎組件的自動化全局注冊可能你的許多組件只是包裹了一個輸入框或按鈕之類的元素，是相對通用的。記住全局注冊的行為必須在根實例通過創建之前發生。 1、組件名 在注冊一個組件的時候，我們始終需要給它一個名字。 Vue.component(my-component-name, { /* ... */ }) ...

    silvertheo 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<