|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
7 Q) x" H) e. A# e6 ~" ZVuejs 挂载点 模板 实例和实例中的数据,事件和方法3 b* p2 C- N! X' U ]7 w0 f
& r5 a8 |/ W6 C<!DOCTYPE html>3 ~- ]: z$ ^% c" a1 Q& m
<html lang="en">
" @: ]/ S9 k6 A% X8 J<head>
( U# v2 I1 N/ l @8 H <meta charset="UTF-8">
! f& N/ q& G) h: [4 p <title>Vue start</title>- w4 g4 A5 ?7 O" @6 c6 f$ Q
<script src="./vue.js"></script>
8 @9 I% N- k# S. H* y7 z- t* M</head>6 l0 W# j |. d/ v
. @; E N6 N" D* i" U: Z2 G<body>8 N$ }& F9 k7 o. H
<div id="root">{{message}}4 l* l/ w% L1 E- w* ^
<h1 @click="changeword()">hello {{word}}</h1>5 @$ i k* n; A3 q$ ^( h
{{number}}
: v, E2 Q: q0 _" `; d <h1 v-text="number"></h1>
: V5 E1 H' P: L, p. ?# L <h1 v-html="content"></h1>
4 K# h& Y m" u6 g. ?' s </div>
. X; i4 f; S" l& m" n. F <script>4 R" W0 G, ?2 Q7 P9 k7 s. z
new Vue({
a. [1 j% ]' p; |5 B( a0 ~ el: "#root",
6 l; M" B2 b7 ~' M // template:"<h1>template can be here<h1>",
, s# N: x- H% H$ r5 ]& ] data: {/ S. }+ c4 ^8 K# t7 V
message: 'hello world',# e6 M; p& g, |( U t& Y
word:'plmhome',- t5 m- B }; n/ J0 C1 A9 _
number: 123,
% T* R$ K4 N2 ], ~/ K+ n# p* f0 N content:"<h2>hello world<h2>"
% S/ ~& q# @5 p, M },- A p1 o/ r0 i5 v& q
methods: {( |6 B( n$ W/ Z; E+ t
changeword(){
) y. p, H5 Q1 f& P) f7 p this.word = "plmhome.com" //change the word0 b$ K* |5 p, J' r# F
}5 s4 g' e2 P. R' _8 K8 B
}
, H. }* b8 `" }0 E) S+ Q })9 l. Q4 b( }$ ?
</script>
' `: D$ @$ ]- N) b/ m" D+ I. u9 f, V0 h. {5 W- v* h* u
</body>
; I T+ ~$ T6 T1 ~! _. t
0 Y W f4 r e% I; I! T0 R</html>
4 \, x$ Y/ Q: L" }) R. L! I" \* x2 g) o) [1 R, J- ?: W
. S9 H' h+ C0 u4 _& O9 ~6 ^ |
|