|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
' s+ y$ H- A* l5 n( f4 HVuejs 挂载点 模板 实例和实例中的数据,事件和方法# p% m) U* T8 B( j" |
4 Z7 L; w% h8 D. X<!DOCTYPE html> X l$ ], C; U4 S
<html lang="en">
+ ?1 X. v8 Y0 U. G! x6 s! ^<head>
0 b. `1 \( L) f! w' G <meta charset="UTF-8">
# g3 g+ ?0 T. E* P H) X2 n- } <title>Vue start</title>
/ h7 x4 T1 x+ H( s. Z <script src="./vue.js"></script>
* I4 u7 ~* s2 a' k% x</head>
J; R4 \: k8 M& j1 P
9 B. b2 c* P. R) |! e1 f<body>5 u1 m F' ] D6 b
<div id="root">{{message}}
+ E- s) z& W# E+ q( A3 E. B' ] <h1 @click="changeword()">hello {{word}}</h1>
3 @( d$ |7 @* V3 V' Q# I {{number}}) I6 R# g: G0 p1 R- ?
<h1 v-text="number"></h1>
1 Z, ?/ \, T, ^$ j9 V <h1 v-html="content"></h1>; b1 p+ z6 Y. v& m0 x
</div>
0 j* i7 e. T @' \* n5 [$ M <script>) q; ^1 {4 l! `% z( b% V
new Vue({7 W" J! t! h* y( B- g
el: "#root",0 Y! A) l- k+ ~
// template:"<h1>template can be here<h1>",& }) o: Z, m# l4 m: c1 V
data: {( G3 u+ O$ B6 C) L: R
message: 'hello world',* x! g$ ~" t% N4 d
word:'plmhome',
* j. w" s. c; C! `8 B, p number: 123,: u9 @. l% m3 H7 M* p
content:"<h2>hello world<h2>"
* e7 Y7 _2 w9 h& b5 r. M& R* s9 t },
1 W4 X- m/ J8 s% G! g methods: {
. O2 Z. ?& Y5 _& r changeword(){& L+ W" K- D% I. S
this.word = "plmhome.com" //change the word, x! M5 `$ | j3 Z
}6 A8 N E1 P% P: l h3 ]0 M8 ]
}
) N! i& w3 r* T/ e3 h- e3 p$ { })' p+ m6 b0 W( p9 X1 n
</script>
& P: N9 E( B6 f" ?
( O; a; {- R: j; G! M+ w</body>( r0 w' N( ^) e; j
: @* t) G. ~) g
</html>+ S) Z) C3 r3 f: P: b/ N
: ]& `+ f, N* B/ t2 o* Q" }# E; e: H+ W2 k7 v5 G" S4 o) | l
|
|