|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
9 d8 _% k1 J8 _4 F9 d( zVuejs 挂载点 模板 实例和实例中的数据，事件和方法
$ e. e4 R- s# _0 Q F5 U& a2 a5 v; `0 \: y2 @* s. B C; y. h- ~
<!DOCTYPE html>) _8 S7 \8 _6 y6 @- t
<html lang="en">
2 o$ S' o7 [) ~6 D7 R; @/ u3 g<head>; o; ? m* N' b( L
<meta charset="UTF-8">
' i1 }6 `( a5 z( U3 X. L% Y% S+ g1 O <title>Vue start</title>4 P. W$ h! f, @( z" X
<script src="./vue.js"></script>7 ^( j2 t1 _2 t1 f; x; Z5 e
</head>, ^* }9 F+ C8 ?) b. [4 C. m$ y
k% Q& S. L4 r2 e9 R9 X<body>5 [2 ]: @% K3 D8 [% r
<div id="root">{{message}}, b" P- S: p# w6 A" C" ]2 B$ E' v
<h1 @click="changeword()">hello {{word}}</h1>4 U+ c# G: h2 s0 O* J# U8 |; v* g
{{number}}9 u' o( y. U2 M* t4 i- y& \' S
<h1 v-text="number"></h1>
$ a. P8 a( T& O5 v5 j" ^: ~, G <h1 v-html="content"></h1>
" [( l; i- |1 H& Q! U+ [5 x0 ?' M </div>
$ m+ Z! ?- Q3 M1 B: h <script>
, K' Q. s$ R- H# d# D) m4 h new Vue({
& p# ` k3 C; T* Z: S: }2 Q# @ el: "#root",3 w- a" }6 C7 W8 H) d* w4 A
// template:"<h1>template can be here<h1>",! b% t$ M4 ^* x; k& I' D4 g
data: {4 a2 I1 G, L( H6 D0 H! ]
message: 'hello world',5 ]5 C9 x. m! e2 t' t
word:'plmhome',- ~; e/ k" M: }5 g$ Q/ {
number: 123,
5 k: Q9 w) ]. P* W( V8 U content:"<h2>hello world<h2>"
. v9 `+ O$ j8 F, z: a' V. L },
% U2 `$ G8 h) e" W methods: {8 S) F$ o# `+ p/ `
changeword(){3 t5 m( e6 s" \0 t+ L
this.word = "plmhome.com" //change the word$ n Y, \% O5 T, I
}" g" @& g6 Q" }1 S
}! K8 o0 n* D) }- P" E
})5 l$ X4 d' K6 D9 n% n9 N. N; m& ^' v
</script># J! r f; Q- t; g
% \. u# W' m8 o/ U9 f, [
</body>
/ D# g" h' N# h+ l2 ~( W" F) Z" T ?! Y
</html>
" X- g5 T4 R4 W: D6 n
' Y5 b/ t7 \- w2 G( b% \! i& w) v }/ @1 ~
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
