|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
) R$ L; P( L" `& GVuejs 挂载点 模板 实例和实例中的数据,事件和方法
) k. V# K; n2 d+ L2 R9 s4 N( p. q6 M, @6 d
<!DOCTYPE html>8 f/ u6 P. e# u' a4 e1 V
<html lang="en">7 [, W" P7 j8 m* N' S5 s
<head>9 `' y0 b/ h) X- J/ d3 u. J/ ], M! S
<meta charset="UTF-8">% E2 a' k3 ?6 v* r0 k5 ?
<title>Vue start</title>9 R2 j! R. X3 _& v
<script src="./vue.js"></script>
* A: `: P1 W0 z</head>3 C! c8 D5 @& \2 T1 b9 |
# P, n5 ~8 } {# u
<body>3 `/ G( v% @) s0 s4 M. z _
<div id="root">{{message}}
3 e( H4 D+ l. [- j. d' B <h1 @click="changeword()">hello {{word}}</h1>& @0 ^4 ]/ ]! U5 N
{{number}}
8 }% H; }0 A& S7 k <h1 v-text="number"></h1>
& e. O% [/ j: X <h1 v-html="content"></h1>
; T4 f; m9 \9 A2 e; r7 ]: X$ e- j9 Y </div>
- p, E0 i7 y+ M& O/ m <script>! X$ `0 a# o: t! s% D
new Vue({" U$ E' p" c# ^6 Y9 ]. {; i
el: "#root",! X! Q2 O6 |5 K
// template:"<h1>template can be here<h1>",& H: a+ e- @5 @8 P
data: {5 @5 G2 e8 d( K( z1 B7 A
message: 'hello world',
, S# |+ t# y! Q8 i, P word:'plmhome',
- q: O- {$ P; J' ~& c: s5 ? number: 123,
7 k* ~" D- j7 k content:"<h2>hello world<h2>"
$ U) h& t' p9 {0 s1 @' a },, W; u) @* Q/ u/ ` \; q8 P
methods: {7 ~2 x. [5 o5 H0 q. T- `3 L
changeword(){
4 s: d; D T8 J: ? this.word = "plmhome.com" //change the word& J$ d u8 g! m
}
6 T9 b! G9 D" Y9 m }
# H% B0 F; F6 `0 ^# c' k4 ^ G& ] })9 G2 V6 X Q8 ~
</script># f+ |1 e! k) F
0 P$ h+ c5 m4 g7 q' @</body>
) w- d7 O5 W) q- {
& f* ^! ^, O& M5 L</html>
_5 v8 @, k' O# ^8 P: q
- s0 l0 ^1 Q/ O4 T8 U
2 |0 i. g* I$ |% w |
|