|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
& t6 Z8 v7 \( Q& ^2 W
Vuejs 挂载点 模板 实例和实例中的数据,事件和方法4 R7 v, E1 V; s% K# O, p( T* _
% B3 m* \: ]. K- D e6 @8 I<!DOCTYPE html>; O. k) B+ I, D% d
<html lang="en">$ E7 i0 ]* `5 R" q! h
<head>
% D; y# d# K% I* g <meta charset="UTF-8">
1 n" \6 O+ w: ^ <title>Vue start</title>
! q7 \: S# b+ M' t7 c9 H <script src="./vue.js"></script>, ]& K" x: X- M8 U$ [
</head>
% `- N$ R' G% i; t% t+ n0 {: Y8 G/ Z# |
<body>
+ M8 _1 }! P R1 e3 W <div id="root">{{message}}8 J) ]$ w' G( o f
<h1 @click="changeword()">hello {{word}}</h1>+ o$ U, ^2 r2 f. P
{{number}}
! {: O% b( l9 M. r" ^: a <h1 v-text="number"></h1>
+ B' |- w, }! C) I$ o' e3 V <h1 v-html="content"></h1>3 \6 K" Z1 L2 o& I1 m% M& h. P. d
</div>8 H$ C8 g" C- B9 `; H1 J9 @
<script>
& I& q/ U" D, e3 n new Vue({
4 i) [' ~* a4 w4 _* [ el: "#root",+ x- E6 Y6 N3 u8 T+ O
// template:"<h1>template can be here<h1>",
5 h+ e. R- M; O; H: C/ P8 { data: {
: ]' F" c- L, r5 Q message: 'hello world',
9 v0 k/ O* [2 s$ ~- T7 ~ word:'plmhome',% k9 Q) O2 @6 L. L
number: 123,
' v/ @- f; B+ d content:"<h2>hello world<h2>"
T% e4 @2 ?% h# e8 C# a },; c+ K) L9 C% V2 @; H# v. y
methods: {
. o1 \& M; h5 \1 D. @2 j changeword(){8 r) G+ H$ d" h$ W3 ]5 A* t! s
this.word = "plmhome.com" //change the word
O: [* n1 ~8 X! A5 V2 ?# h( J" [' k }4 V- N7 @0 ~( a/ `& Q2 h
}! `9 }9 f' N; o5 N& A
})$ \& W, E9 f" h! F
</script>
( S& r% m# Z8 [; ]* |% f/ n) \% B! x
</body>8 N" ]% R' e# T+ n. H5 o. m& V4 z
9 K! X" l$ f7 i, J& w8 g6 ~/ C
</html>
, ^) ]+ |7 u: L1 A9 m
" H; k9 A0 H4 W4 B% D
( V6 G# L, R) @# t4 r$ [ |
|