|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
. j4 B# u" M$ n/ S2 CVuejs 挂载点 模板 实例和实例中的数据,事件和方法; z+ u+ m+ K: H9 B
. | a+ c( M6 R7 Q6 _: v' k1 ?<!DOCTYPE html>' T; |! Z& f9 R1 v# ^
<html lang="en">; e" j: t& D3 J# j! Q
<head>
6 Q# l) l% x, @* ~; S2 B+ @" ~. `' [ <meta charset="UTF-8">
+ ^' M, d1 q- H <title>Vue start</title>
6 ^: q" Y" S- V+ h3 O <script src="./vue.js"></script>3 L+ F' x4 C/ j) i: [& J
</head>1 S$ s$ X" g' i# m* T. K
) y( ^ W/ X. G# G<body>
- [5 D }1 f' a5 K( X+ K <div id="root">{{message}}
! p; L" K0 i7 l- K <h1 @click="changeword()">hello {{word}}</h1>
" f/ @ w7 w$ B$ l% a; l% j8 Z {{number}}' I( B$ s! m. ?# g3 {9 |3 X
<h1 v-text="number"></h1>0 k K/ q* u9 l9 q+ d, Y1 u: f
<h1 v-html="content"></h1>2 l9 V" o4 z% v [! ^. h2 U O
</div>
# b, T. h* B5 F( A- u$ Q <script>
/ O0 E7 }/ K. i$ U5 y new Vue({
. Y: T/ t$ @# h1 i, E el: "#root",. J/ J- U, o& B8 l
// template:"<h1>template can be here<h1>",
3 ^0 F( }1 Q- I* L data: { n9 s: }- B4 q/ V6 Z' p
message: 'hello world',& C; y6 K: o2 y+ x0 p' L0 l
word:'plmhome',
9 X$ c% c/ Z) q! Q number: 123,
& e4 r: X3 r, Z q6 c, `3 e content:"<h2>hello world<h2>" o. y( ^1 g. U: @* ]9 w3 X: o
},& y2 x) V5 S) G$ S: Y4 j/ o
methods: {
! A- M H& C- e# V changeword(){
/ W+ H4 S4 i$ Q7 g* Y! P, w$ y this.word = "plmhome.com" //change the word" R- d, m7 k+ ^/ F5 b9 U
}
0 D% a: Q6 w: w1 w) A' ~; e6 Z0 x- _ }& O8 k( k# n8 P P" y, h5 v! q
}). l, w; h- N2 J3 r" _
</script>
2 r( } J: P+ @+ u( Q, N
8 E# w* L+ v. T9 E</body>
) L( w; d# [& s/ k- f
" X, c7 x/ U7 V4 Q+ V+ C5 q</html>8 P9 u! P4 _5 H: c
) @) D# R/ y S4 O, y+ b) ]: j- L6 c; h7 ~# i2 B) s
|
|