|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
" }" [( Q4 E6 {Vuejs 挂载点 模板 实例和实例中的数据,事件和方法
4 x4 c/ h' ]" U) r& \* \% _" u0 D2 t; U$ a: Z
<!DOCTYPE html>
( w$ r$ }& A, X# T" e<html lang="en">8 g/ _4 ~9 |% W1 [+ s
<head>
# d: U* K/ [5 O s# p J <meta charset="UTF-8">4 D8 b) L2 N; Q( \* p6 \) e
<title>Vue start</title>3 ~ A I* b& b" h
<script src="./vue.js"></script>- K: B8 U8 j& H5 z- N
</head>2 ^% L/ `. A* ]( ^ D
% C) y' t' |' f$ ]) B0 t<body># S5 C/ J' j( f& V4 Y3 ~
<div id="root">{{message}}5 Z2 [* t I5 ?% M2 ^0 b
<h1 @click="changeword()">hello {{word}}</h1>$ _1 `- B1 ~ v) k
{{number}}$ ~) C8 j5 _4 {8 V0 o% p( a9 n
<h1 v-text="number"></h1>/ V; J( g1 N$ a/ u
<h1 v-html="content"></h1>, x2 Z% c* K @, G; d) ~
</div>
' S" {' K$ M7 P <script>
[7 M, J# w6 t& q- R new Vue({
% v& Q: }+ r: ~/ b2 V# b* p el: "#root",: U7 m. o) d% g2 H
// template:"<h1>template can be here<h1>",/ J! e X; K! B+ }# w) H( S3 O- ?3 E
data: {
0 d, l/ y' m, F+ c5 Y6 W message: 'hello world',
1 `. b- a+ q2 U, c2 r# q$ } word:'plmhome',
/ |. j u& ^4 C! J" [1 Q number: 123,
8 w6 E; K) D( T M content:"<h2>hello world<h2>"
$ h* U% o5 ~* H. @* G },- F7 p X) O( M/ T" C& q
methods: {
7 j: i9 j& P3 u& X" s changeword(){$ R$ R" C6 U, G" C
this.word = "plmhome.com" //change the word
0 N" o; H% e& Y! Y& P }" C% Q8 q. _8 E( I; J
}; B3 ]) T+ `. N' b
})
5 Y( ^ A; z1 f2 t: W$ t4 H# n </script>
# u: H% F, V3 ^$ M, l; e7 F+ P% z: V* X2 L; o
</body>
$ |5 r# J8 k. w- }6 x
3 }) c {) w+ H8 e7 ]# O</html>( S$ E1 i5 C& C9 ~5 f& c: @) P8 i
9 A; u x" O* `
* y% d6 O4 J& ?* ]% y: H& C8 i9 T
|
|