屬于me的vue學習

{{msg}} 我被覆蓋了

我會被覆蓋

v-bind給我添加了類 {'box1':box1,'box2':id}通過這種方式添加多個類

{{5+5}}//5+5=10

{{ ok ? 'YES' : 'NO' }} //ok是否為真

{{ msg.split('').reverse().join('') }}//msg倒序顯示

指令里面可以寫js代碼

{{ ok ? 'ok存在可以看到' : 'ok不存在所以你看不到' }}

點擊訪問我

點我

{{ msg |capitalize |omit(3,'!!!')}}//使用過濾器將小寫變為大寫，超出3個字符后用！！！替換

v-bind:class的縮寫形式為:class

v-on:click的縮寫是@click

A

B

C

Not A/B/C

Hello!

{{ site.name }}

-----------------------

{{ value }}

{{ key }} : {{ value }}

{{ index }}. {{ key }} : {{ value }}

原始字符串: {{ msg }}

計算后反轉字符串: {{ reversedMessage }}

我是測試的css樣式,當ok為true的時候給我添加上active類

我是測試的css樣式綁定對象

我的類名是通過計算得來的

我是數組添加類的

errorClass 是始終存在的，isActive 為 true 時添加 activeClass 類：

我是內聯樣式

增加 1

這個按鈕被點擊了 {{ counter }} 次。

Greet

點擊

阻止單擊事件冒泡

提交事件不再重載頁面

修飾符可以串聯

只有修飾符

添加事件偵聽器時使用事件捕獲模式

只當事件在該元素本身(而不是子元素)觸發時觸發回調

click 事件至少觸發一次，2.1.4版本新增

按下 Alt + C 觸發事件

input 元素：

消息是: {{ msg }}

單個復選框：

{{ checked }}

多個復選框：

h

j

m

選擇的值為: {{ checkedNames }}

中國

世界

選中值為: {{ picked }}

選擇一個網站 鴻基夢 張夢杰

選擇的網站是: {{selected}}

全選：

{{checkeds}}

多個復選框：

a

b

c

選擇的值為:{{checkedsNames}}

script

style

vue項目架構

vue項目架構(腳本架)：

build 打包工具(保存一些webpack的初始化配置)。

dist 最終代碼存放地點

config 配置目錄，包括端口號等。我們初學可以使用默認的。

node_modules npm 加載的項目依賴模塊

src 這里是我們要開發的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件：

page 用來放置我們寫的vue頁面文件

assets: 放置一些圖片，如logo等。

components: 目錄里面放了一個組件文件，可以不用。

App.vue: 項目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄。

main.js: 項目的核心文件。

static 靜態資源目錄，如圖片、字體等。

test 初始測試目錄，可刪除

.xxxx文件 這些是一些配置文件，包括語法配置，git配置等。

index.html 首頁入口文件，你可以添加一些 meta 信息或同統計代碼啥的。

package.json 項目配置文件。

README.md 項目的說明文檔，markdown 格式

附加文件夾：

screenshots 項目參考畫面以及截圖存放。

images src下面的共用img文件

scripts src下面的共用js文件 base.js(基礎js方法)

styles src下面的共用css文件 reset.css(初始化樣式)

vue中的路由問題

整理：路由之間共享數據

在頁面A傳遞數據

this.$router.push({

name: "backe",

params: { //常用安全

data: data

}

/*query: { //這種傳參相當于 hjm100.cn?name=name&url=hjm100.cn

name: 'name',

dataObj: this.msg

}*/

});

在路由中給頁面B添加name屬性與數據中的name相互對應

{

path: '/backpackexchange',

name: 'backe',

component: BackpackExchange

}

在頁面B獲取數據：

let params = this.$route.params.data;

vue兼容問題

作者保證了4.2+

但是我看了下2016年2月的andoird版本統計

4.0 - 4.1的還有8%左右的份額

用虛擬機在4.1.1/4.0.3/4.0用系統瀏覽器跑了官方單元測試

4.1.1/4.0.3全綠

就4.0上有4個用例沒過

v-for with transition

v-for staggering transitions reorder while staggered

v-model support debounce

Util - Language Enhancement debounce

4.0占%2左右

如果一定要支持

使用的時候注意避開這4項

總結

以上是生活随笔為你收集整理的me)不支持html,属于me的vue练习（参考菜鸟教程）.html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。