|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
# T0 t# K+ M q) t6 p
Vuejs 挂载点 模板 实例和实例中的数据,事件和方法
; h% a) H% S3 i" D8 X l1 \" P4 O" b: f6 N
<!DOCTYPE html>
$ o+ i8 Q6 u6 v* v+ M7 e3 h<html lang="en">
, z- F. x3 N( R7 U1 M6 V- q" h8 Z g<head>. H" d' g& s' i" t' } a" s4 ^
<meta charset="UTF-8">9 R k- C1 Y$ x/ j! J
<title>Vue start</title>
% y$ ^% z+ G6 A" | <script src="./vue.js"></script>+ p: z8 @2 `) p k
</head>. l8 h& J+ ]6 e; _( {
2 l% M4 W6 a: ` s$ d1 T/ z<body>1 y6 d1 `; R0 U
<div id="root">{{message}}
5 d$ m! \9 ^" Y$ b* j* A: r <h1 @click="changeword()">hello {{word}}</h1>1 k. A+ i! f+ B$ y4 D/ B+ O+ F
{{number}}
4 a* }3 D! |- O% E7 ] <h1 v-text="number"></h1>" j2 ?/ V, j& y! R9 A
<h1 v-html="content"></h1>
" \- y4 o: F+ X2 J </div>
O# A/ e1 Y y, b& N" Y <script>8 ^8 C- U1 p- u$ @$ k! r8 ?0 x4 h
new Vue({* {6 i+ T4 j" G( O
el: "#root",
* P8 X! F: A& o' y // template:"<h1>template can be here<h1>",/ L: {% w- T, \0 z' C
data: {5 P& d2 W8 X7 X9 h
message: 'hello world',
) v: ?# T/ b* ?7 Q. x3 h word:'plmhome',
1 z; i4 R! J3 i number: 123,
+ W8 t9 q6 G9 W7 G, ~! u) b content:"<h2>hello world<h2>"& r. b- h$ L4 W. i% j$ E) t+ ?
},
2 c' E* i, e# S+ s4 Q! u& t( j1 r4 @ methods: {
$ Q) N5 R6 r; y changeword(){
& Y" O) y, n) k) V9 I% c this.word = "plmhome.com" //change the word! b/ Q8 ?* Y' l. r
}
8 k4 i% ]: o/ M" K) ^ }
# s0 s* }7 q% U% t6 k8 B1 u2 s })3 X" w! K5 G( H6 b2 f4 ^+ ]
</script>
4 V- T% Y5 g! E: f+ e" R' ~* L8 Q
0 M4 Q$ O" C' X- H</body>( x4 b* B5 i& u6 b5 u6 d
/ M% v- A# {4 z. {</html>: U, t m2 @" I
0 a; Y; X9 }. x: V2 B4 e
1 _' C1 U: q0 U) [, e+ L( I0 C; R |
|