屬于me的vue學(xué)習(xí)

{{msg}} 我被覆蓋了

我會(huì)被覆蓋

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

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

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

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

指令里面可以寫js代碼

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

點(diǎn)擊訪問我

點(diǎn)我

{{ msg |capitalize |omit(3,'!!!')}}//使用過濾器將小寫變?yōu)榇髮?#xff0c;超出3個(gè)字符后用！！！替換

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 }}

計(jì)算后反轉(zhuǎn)字符串: {{ reversedMessage }}

我是測試的css樣式,當(dāng)ok為true的時(shí)候給我添加上active類

我是測試的css樣式綁定對(duì)象

我的類名是通過計(jì)算得來的

我是數(shù)組添加類的

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

我是內(nèi)聯(lián)樣式

增加 1

這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次。

Greet

點(diǎn)擊

阻止單擊事件冒泡

提交事件不再重載頁面

修飾符可以串聯(lián)

只有修飾符

添加事件偵聽器時(shí)使用事件捕獲模式

只當(dāng)事件在該元素本身(而不是子元素)觸發(fā)時(shí)觸發(fā)回調(diào)

click 事件至少觸發(fā)一次，2.1.4版本新增

按下 Alt + C 觸發(fā)事件

input 元素：

消息是: {{ msg }}

單個(gè)復(fù)選框：

{{ checked }}

多個(gè)復(fù)選框：

h

j

m

選擇的值為: {{ checkedNames }}

中國

世界

選中值為: {{ picked }}

選擇一個(gè)網(wǎng)站 鴻基夢(mèng) 張夢(mèng)杰

選擇的網(wǎng)站是: {{selected}}

全選：

{{checkeds}}

多個(gè)復(fù)選框：

a

b

c

選擇的值為:{{checkedsNames}}

script

style

vue項(xiàng)目架構(gòu)

vue項(xiàng)目架構(gòu)(腳本架)：

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

dist 最終代碼存放地點(diǎn)

config 配置目錄，包括端口號(hào)等。我們初學(xué)可以使用默認(rèn)的。

node_modules npm 加載的項(xiàng)目依賴模塊

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

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

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

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

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

main.js: 項(xiàng)目的核心文件。

static 靜態(tài)資源目錄，如圖片、字體等。

test 初始測試目錄，可刪除

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

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

package.json 項(xiàng)目配置文件。

README.md 項(xiàng)目的說明文檔，markdown 格式

附加文件夾：

screenshots 項(xiàng)目參考畫面以及截圖存放。

images src下面的共用img文件

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

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

vue中的路由問題

整理：路由之間共享數(shù)據(jù)

在頁面A傳遞數(shù)據(jù)

this.$router.push({

name: "backe",

params: { //常用安全

data: data

}

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

name: 'name',

dataObj: this.msg

}*/

});

在路由中給頁面B添加name屬性與數(shù)據(jù)中的name相互對(duì)應(yīng)

{

path: '/backpackexchange',

name: 'backe',

component: BackpackExchange

}

在頁面B獲取數(shù)據(jù)：

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

vue兼容問題

作者保證了4.2+

但是我看了下2016年2月的andoird版本統(tǒng)計(jì)

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

用虛擬機(jī)在4.1.1/4.0.3/4.0用系統(tǒng)瀏覽器跑了官方單元測試

4.1.1/4.0.3全綠

就4.0上有4個(gè)用例沒過

v-for with transition

v-for staggering transitions reorder while staggered

v-model support debounce

Util - Language Enhancement debounce

4.0占%2左右

如果一定要支持

使用的時(shí)候注意避開這4項(xiàng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。