|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
3 i$ o) A9 x3 q9 w4 V( v) eVuejs 挂载点 模板 实例和实例中的数据,事件和方法! v/ {) H Z6 `+ G
: N6 M: s- w: w& J5 a* [<!DOCTYPE html>8 r) O! N$ q- X& E* ?( j
<html lang="en">
) V$ F2 J/ N9 ?/ e& Y+ d/ l<head>
9 p! H, ^5 S n+ O <meta charset="UTF-8">9 `5 l7 e8 L3 P- z9 Q
<title>Vue start</title>
6 V: g; k+ c& f1 B' u3 k0 w <script src="./vue.js"></script>
: _) t8 E& w t8 w</head>
( `( B2 F9 s" h( n, ?: L
' K8 H) W3 e. t9 r. r<body>! i6 W0 ?, m* T% G$ B" }% l1 ^# C* }
<div id="root">{{message}}9 f/ a9 x2 x! l; p1 @
<h1 @click="changeword()">hello {{word}}</h1>/ c# g9 `- J* V
{{number}}
9 [& b* {( t+ [ <h1 v-text="number"></h1>* v. ?/ Z7 P/ R8 u5 u
<h1 v-html="content"></h1>6 }8 ^: \2 o& U8 j% N- v
</div>
# z! T5 |5 w; K: q <script># a5 t4 Y& q- L" S8 E5 l
new Vue({
) L" a/ k) Y( N8 [. g/ O el: "#root",; P( k% w8 N. O
// template:"<h1>template can be here<h1>",& g" m; [' b, U' d. U
data: {- q D5 M# \* L$ v2 Z
message: 'hello world',
# D( ], d8 Q2 D& ~! q4 N9 m) D word:'plmhome',
! S0 O6 I! J5 T$ g& P# D8 r( X4 p number: 123,, C& [) a* v- C7 {; v. }
content:"<h2>hello world<h2>"
, K+ G% M2 F/ f' U },
7 _) a3 K, N) X0 D methods: {
5 ] M2 P+ G4 u changeword(){3 @2 |2 L [/ U( Z8 r. R. _) Q1 v
this.word = "plmhome.com" //change the word
, ]. { D0 E# f/ O+ \5 g9 u }
' [& ]# {5 O2 o; V" M, U }( j, d& ^) ~2 `* u; `/ |) ^- b
})
( W, n% E9 }$ s4 h! J5 ` </script>0 T7 f o9 C. X; Q% ?2 P
. r$ a" E# B& `- y
</body>
R5 r6 Z' U$ V5 C
* Q5 `7 ?3 i" o0 p5 }6 c8 ]</html>
: @5 @# B, e! Q9 V4 ^" _3 _0 T* h- W/ @2 K* x7 S& l
m K) T) N. e( h& { |
|