|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
7 u( Q" Z4 T! D5 v+ O, TVuejs 挂载点 模板 实例和实例中的数据,事件和方法
. S6 F8 Z7 K/ Q! S
0 \/ }/ {( q8 K7 g: `! m: S<!DOCTYPE html>
5 q( A9 n; u, Q8 D<html lang="en">: F ?, T5 Q* x/ t
<head>; X" I' M. y! S% |
<meta charset="UTF-8">
# ?$ K3 u0 X- ?/ r+ ~, d <title>Vue start</title>
" N: v+ [6 M( `2 k2 n <script src="./vue.js"></script>
- V- n/ W% p: \& ]</head>
( o8 h* y1 ^0 n7 O1 X; _ y: H+ ?0 V" U1 K
<body>4 Y m. I0 u2 U5 b: g6 P0 ]
<div id="root">{{message}}
4 O% L- I- `2 T: b4 }4 f" Y <h1 @click="changeword()">hello {{word}}</h1>
7 Y1 L' _# v1 m4 ` {{number}}
9 X, F- y2 [& ^ <h1 v-text="number"></h1>$ A* l0 q2 E; c3 H
<h1 v-html="content"></h1>
! V' ]! D# U# D; P3 s) |, h' W </div>
' Z8 z7 B# Y( k/ K' b. B <script>
* n, n* z t) e4 b) m* u new Vue({
3 l9 C" g) c4 W/ j. N+ Z el: "#root",
1 {* }1 {3 p. |; y: } // template:"<h1>template can be here<h1>",% P/ A. o5 {$ k: x; X' |
data: {
0 L- I! a: L- L4 J message: 'hello world',3 ^5 H" f& E% N2 T( z4 V% e
word:'plmhome',1 v) [5 b b2 O( A7 u$ z+ T; z
number: 123,
* f2 c4 F4 T- R( R9 o/ v content:"<h2>hello world<h2>"
% F/ z' ~" t' b0 {% D2 N" \4 s K },
+ D) O0 [+ F# n8 T0 U' L methods: {
; o% g: j: C+ Q+ ~4 r$ o, i, u e changeword(){* {2 x' E& i# ^1 s+ G: {
this.word = "plmhome.com" //change the word2 r+ k( V$ U& w( h) X
}* F" ?: w: r! l
}
! ]# {. t* _6 B+ ` })' `" I V! ^; X I- M0 w- Q3 b
</script>% a9 F+ I* {* s8 }3 ~
% M0 g5 t6 K6 l) T</body>: k9 c$ ^7 n4 [) G. P
3 v. D7 w* z+ P C% }$ C$ A</html>' G7 A6 K: a# n0 h( {0 ^
9 p4 p1 \) x0 D, \3 @' \0 X! C: A! }! N% t
|
|