Vue.js

時間 2019-11-26

標籤 vue.js vue 欄目 JavaScript 简体版

原文原文鏈接

todo

看完書後 , 看一下官方文檔最新的寫法

要不直接官方文檔 + 書的實例

要解決跨域問題

用代理程序統一設置全部前端請求的頭

書本大體看一下

細節再結合代碼和官方文檔

主題至關於分類

經常使用語法小結

v-bind 指令
<div v-bind:id="dynamicId"></div>

<!-- 綁定一個屬性 -->
<!-- 完整的寫法 -->
<img v-bind:src="imageSrc">

<!-- 綁定一個屬性 -->
<!-- 縮寫 -->
<img :src="imageSrc">

爲何有兩個 class ?
    <div class="daily-menu-item"
        :class="{ on: type === 'recommend' }">分類1</div>
        
當  type === 'recommend'  爲 true 的時候 , 使用 daily-menu-item.on 樣式
                 
                   

<div ref="myId">                               
做用 : 給這div 加個引用
自動放到 refs 數組裏
讀取 : 命名規範
const $myId = this.$refs.myId;


 <button v-on:click="greet">Greet</button>
 
     文檔裏沒有說 @click 這個是什麼 , 應該 等於 v-on:click 吧
     
     應該是綁定在原生的 click 事件上的


@click 和 @click.native 的區別

Vue2.0官方文檔 父子組件通信 章節
父組件經過prop傳遞數據給子組件，
子組件觸發事件給父組件
父組件想在子組件上監聽本身的click的話，須要加上native修飾符
也就是說 , 父組件想在子組件上響應本身的 click 的話，須要加上native修飾符


若是點擊子組件所觸發的事件想要調用父組件的方法 , 就要寫成  @click.native="a(id)"
a方法是父組件的         



action 是什麼
爲何說又回到了 vuex


那複雜的狀況呢

官方例子呢 ? 完整的那種 , 一步一步演化
說明功能

要稍微大一點 , 把全部功能都用上
甚至用上高級的功能


這是整合的例子

還能夠在每一個名詞剛出現的時候 , 寫一個最小的例子來解釋
1 , 方便理解
2 , 後期查閱的時候很方便 , 不先後關聯太緊密


一個都沒有

 
     
   
 
         x 
        

             
         
v-bind 指令
<div v-bind:id="dynamicId"></div>
<!-- 綁定一個屬性 -->
<!-- 完整的寫法 -->
<img v-bind:src="imageSrc">
<!-- 綁定一個屬性 -->
<!-- 縮寫 -->
<img :src="imageSrc">
爲何有兩個 class ?
    <div class="daily-menu-item"
        :class="{ on: type === 'recommend' }">分類1</div>
        
當  type === 'recommend'  爲 true 的時候 , 使用 daily-menu-item.on 樣式
                 
                   
<div ref="myId">                               
做用 : 給這div 加個引用
自動放到 refs 數組裏
讀取 : 命名規範
const $myId = this.$refs.myId;
 <button v-on:click="greet">Greet</button>
 
     文檔裏沒有說 @click 這個是什麼 , 應該 等於 v-on:click 吧
     
     應該是綁定在原生的 click 事件上的
@click 和 @click.native 的區別
Vue2.0官方文檔 父子組件通信 章節
父組件經過prop傳遞數據給子組件，
子組件觸發事件給父組件
父組件想在子組件上監聽本身的click的話，須要加上native修飾符
也就是說 , 父組件想在子組件上響應本身的 click 的話，須要加上native修飾符
若是點擊子組件所觸發的事件想要調用父組件的方法 , 就要寫成  @click.native="a(id)"
a方法是父組件的         
action 是什麼
爲何說又回到了 vuex
那複雜的狀況呢
官方例子呢 ? 完整的那種 , 一步一步演化
說明功能
要稍微大一點 , 把全部功能都用上
甚至用上高級的功能
這是整合的例子
還能夠在每一個名詞剛出現的時候 , 寫一個最小的例子來解釋
1 , 方便理解
2 , 後期查閱的時候很方便 , 不先後關聯太緊密
一個都沒有

源碼分析

做者推薦的博客

http://jiongks.name/blog/vue-code-review/

跨越時間段

看項目倉庫的每一個 commit , 一個一個是怎麼演化來的 , 中間爲何要改 , 要重構

感受被你一路帶着

資料

官方文檔

http://doc.vue-js.com/v2/guide/

社區

https://www.vue-js.com

小梅發的

她就看了文檔和配套的是視頻

https://pan.baidu.com/s/1Vm5SXdM7FxtFM-SWUCYtgA

密碼:67yp

書

Vue.js 實戰

確實有項目

實戰

2017--10

icarusion/vue-book

https://github.com/icarusion/vue-book.git

E:\VueJS\vue-book

做者出的對應的系列視頻教程 https://segmentfault.com/ls/1650000011074057

勘誤 , 先改

沒改過來的 :

插件名字寫錯

[P204] htmlwebpackPlugin 更改成 htmlWebpackPlugin https://github.com/icarusion/vue-book/issues/20

這個彷佛是代碼的問題

[P271] 代碼修改成 return year + '' + month + '' + day; https://github.com/icarusion/vue-book/issues/17

這個我沒找到異常 , 多是他們頁面寫錯

326 頁倒數第三行少了個字符 's' #1

實踐揭祕

2017-04

權威指南

2017-01

路由

官方路由

官方說，簡單的路由用官方的 vue-router 庫

For most Single Page Applications, it’s recommended to use the officially-supported vue-router library. For more details, see vue-router’s documentation.

第三方路由

Page.js vue 官方給了demo

Director

If there’s a 3rd-party router you prefer to use, such as Page.js or Director, integration is similarly easy. Here’s a complete example using Page.js.

在線的有弄代碼混淆，主要是變量名變化了( 有包括方法的入參和類的普通變量 )，方法名是正常的

路由怪怪的

live 編輯器

http://jsfiddle.net/yyx990803/xgrjzsup/

Vue.js uses an HTML-based template syntax

The contents are inserted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.

你能夠用 v-model 指令在表單控件元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。儘管有些神奇，但 v-model 本質上不過是語法糖，它負責監聽用戶的輸入事件以更新數據，並特別處理一些極端的例子。

怎麼把對象導出來，變成公有的

公司

View根據模塊來分層，好比考試模塊

裏面有多個子模塊

接着就沒有面向對象了

主體先出來，css特效晚點弄

找組件庫

簡寫

常常包下載不了

http://vuejs.org/v2/guide/index.html

這是1的，跟2不怎麼同樣了