|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
$ I' z6 Q9 Q6 E, L
Vuejs 挂载点 模板 实例和实例中的数据,事件和方法# l6 ~6 x! t4 j4 Y4 m
) I7 |& z2 b1 w# I. _. M# M. B<!DOCTYPE html>
2 x, G: B3 A0 @ r9 ]<html lang="en">
# l, w3 ]1 ]* o2 z<head>5 i( ]8 b5 I7 C3 [
<meta charset="UTF-8">
( j8 o" Y' D! @/ k <title>Vue start</title>5 E7 w" G/ B8 h" h+ H
<script src="./vue.js"></script>9 n3 k& Y+ e% a, l& }5 ?9 N) n
</head>+ s* D2 I2 C; c, @- U; A
: r2 F/ L/ |7 M
<body>
% c1 k: U4 ^; d6 ^7 L$ R& K <div id="root">{{message}}
0 o3 B [: g+ k" v" w, f6 } <h1 @click="changeword()">hello {{word}}</h1>2 D* C/ T' J' t$ V" K6 I: l
{{number}}
0 E5 b r9 ~* R% U; l" d. _# k <h1 v-text="number"></h1>' }, A/ q' V; v0 V ~3 x
<h1 v-html="content"></h1>
" \# ^' j2 a8 m4 | </div>
# A$ O3 U& D5 Q6 x, g <script>' t! i- e. b* k+ b& l
new Vue({
# l: E0 C3 B- T7 v/ [6 F" H& ^9 e el: "#root",. p1 k6 D) K9 \, K7 H; }
// template:"<h1>template can be here<h1>",' @; t1 P: V6 m
data: {
3 W( m/ `8 W- J& a7 } message: 'hello world',8 C% o: i! V8 v; t3 _
word:'plmhome',
. v" l- W2 ~% m. j number: 123," a$ K I" j/ q. G, t. B3 q
content:"<h2>hello world<h2>"/ Y# I0 S, p2 w1 S' r
},( C! g: W( I! V% p; z
methods: {
, F) q1 F" Y1 w/ o, g' Q8 E changeword(){
3 w1 I( N) g9 B0 j this.word = "plmhome.com" //change the word
3 M. ~( o9 h5 E- {7 `% k }0 F. l4 @' v. N$ _ }/ I" {8 o
}
. c, J( C5 e, l8 W! w })
; [' C* u" {- L% Z0 E </script>0 b3 @! ~- r3 D. F
, L7 n [$ e- P3 O/ Y9 l
</body>4 E$ G D1 h' t2 Y
5 m, a6 G3 M) x9 a</html>2 D# N5 F0 y' x7 p9 F/ S `8 [0 z) Q1 G
( d& \; _% b% i5 ^0 u6 H* |1 o# [
|
|