newvue(,
methods:
}<
/script>
給元素繫結事件
"button" value=
"事件繫結" v-on:click=
"doit"
>
"button" value=
"事件繫結" @click=
"doit"
>
newvue(}
});<
/script>
簡寫 用@click=「函式名」
"button" value=
"事件繫結" v-on:click=
"doit(a1,a2)"
>
newvue(}
});<
/script>
根據表達值的真假,切換元素的顯示和隱藏
"isshow"
>
xianshi
<
/p>
"age>18"
>
xianshi
<
/p>
newvue
(...
methods:}}
)<
/script>
根據表示式真假,切換元素的顯示和隱藏(直接操縱dom元素)
與v-show類似,但v-show之操作display屬性,v-if直接會注釋掉該元素
"isshow"
>
xianshi
<
/p>
"age>18"
>
xianshi
<
/p>
newvue
(...
methods:}}
)<
/script>
設定元素的屬性(src, title, class )
簡寫格式可以直接省略v-bind
"imgtitle"
>
:title=
"imgtitle"
>
newvue(}
)<
/script>
還可以更改style
.active
<
/style>
class=""
>
<
/div>
//如果isactive是true,該div類名才為active
//可以設定多個isname控制
"handle"
>改變樣式<
/button>
newvue(,
methods:}}
)<
/script>
根據資料生成列表結構
>
for=
"item in arr"
>
}<
/li>
for=
"(item,index) in arr"
>
}<
/li>
//index是索引
<
/ul>
<
/div>
newvue(}
)<
/script>
獲取和設定表單元素的值(雙向資料繫結)
"text" v-model=
"message" @keyup.enter=
"getm"
>
//摁回車出發
newvue(,
methods:}}
)<
/script>
提供css樣式
[v-cloak]
在插值表示式所在的標籤新增v-cloak指令
sss<
/div>
原理:先通過樣式隱藏內容,然後在記憶體中進行值的替換,替換好之後再顯示出最終的結果
data:
methods:
}
""
>
<
/script>
axios.
get(位址?key=value&key2=values)
.then
(function
(response)
,function
(err));
axios.
post
(位址,).
then
(function
(response)
,function
(err)
)//key是文件規定的
"button" value=
"獲取笑話"
>
}<
/p>
newvue(,
methods:
,function
(err))}
}})<
/script>
//全域性元件
//第乙個引數是元件名字,第二個引數配置選項options
vue.
component
('vbtn',)
;//宣告元件
var ass =
newvue(,
})newvue(,
//掛載
components:
//使用
template:})
<
/script>
//宣告全域性元件,不用掛載
//父元件
vue.
component
("parent"
, template:"
parent<
/p>
<
/div>
//在父元件中繫結自定義屬性(childdata)
'msg'
/>
"});//子元件
vue.
component
("child",)
;new
vue(
)<
/script>
//宣告全域性元件,不用掛載
//父元件
vue.
component
("parent"
, template:"
parent<
/p>
<
/div>
//在父元件中繫結自定義屬性(childdata)
'msg'@childhandler=
'childhandler'
/>
",methods:}}
);//子元件
vue.
component
("child",}
});new
vue(
)<
/script>
newvue(,
methods:,}
<
/script>
vue學習 筆記
v model 雙向繫結 v if v else if v else v on 繫結事件 v bind 繫結資料 v cloak 當vue未初始化完成前可不顯示為賦值的 vue屬性名稱 需要給v cloak設定 display none v for i迴圈次數 a資料中的資料 arr定義的陣列 最好...
vue學習筆記
vue學習筆記 從7月2日到7月4日三天的學習成果 一 vue的起步 及配置環境 3 使用vue cli快速搭建vue專案vue init webpack 為專案名 建立成功需要等待一段時間 4 輸入npm run dev編譯專案,成功後根據提示或根據修改的埠號登陸 lacalhost 5.看到下圖...
vue 學習筆記
1.v if v show區別 v if 是 真正 的條件渲染,因為它會確保在切換過程中條件塊內的事件 和子元件適當地被銷毀和重建。v if 也是惰性的 如果在初始渲染時條件為假,則什麼也不做 直到條件第一次變為真時,才會開始渲染條件塊。相比之下,v show 就簡單得多 不管初始條件是什麼,元素總...