|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
- r0 Y# A' F# P) c; J8 @6 aVuejs 挂载点 模板 实例和实例中的数据,事件和方法& j% _% t0 }8 n
" m& K* I( I: k8 w3 ]
<!DOCTYPE html>" J' W9 E. j) h" G/ a9 O" a
<html lang="en">+ j( u( `$ w" K0 t
<head>' q6 O& }; l: O$ Y2 j
<meta charset="UTF-8">
7 l4 q5 n/ n( q- F: I1 W <title>Vue start</title>
. o+ A( o7 X6 T/ Z1 Z$ L <script src="./vue.js"></script>$ }# A+ b9 Y6 I) F( Z3 Y
</head>
& ~# l0 b: A2 E. T1 r" L) B
N1 @: Q7 o C+ s; j<body>
4 r( ?" m; u* D4 @ <div id="root">{{message}}
- u$ O' C! g6 P8 X <h1 @click="changeword()">hello {{word}}</h1>" G; E* p/ E4 v2 u- [ U
{{number}}
$ k ?, p+ A! \6 }! c3 ? <h1 v-text="number"></h1>
4 H" N0 a- K0 ?3 v! n6 U1 o% ~. P <h1 v-html="content"></h1>
" V" a5 t, X' {: h5 M </div>2 d" @8 p7 u- r' K- E
<script>
/ \% V1 _4 }% }4 C8 P; @2 t- q new Vue({, _3 R7 M- D* N
el: "#root",
% C2 b( G3 Q$ ?7 o- B& u1 C$ F // template:"<h1>template can be here<h1>",
6 r. c; ~+ c) j, Q& X8 ~* J& d7 z data: {
7 L$ T/ Q% `7 H4 W- S0 s( ^% j/ p message: 'hello world',
. x B( _4 l9 J* M" f word:'plmhome',
5 B' `7 ^3 l' U number: 123,' c" O; f$ j- G1 G. S" \
content:"<h2>hello world<h2>"
0 H) Q R! y7 h* B },4 ^" c7 s" F) {
methods: {
; a( G2 e5 e6 e6 U. t! ` changeword(){# v* p* M' L8 i. H, F. v
this.word = "plmhome.com" //change the word& y9 G8 M( K: r0 E O) x8 l
}
1 o o; C3 }! z" `- @! o }+ Y# V$ Z* N- ~
}), h5 H$ Q6 s3 s1 H5 o
</script>
6 a% ~5 t" n2 h- {3 q, F
; A: ^4 n5 J6 K, q) j</body>6 J4 v8 D' z- a
/ y) U7 U) _" ^8 y& r! z</html>$ w& [( |& z: B7 X9 A
+ E5 s& b M7 V: S, O) T
+ e* K4 i# M0 U0 f1 N |
|