|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
- l2 c0 @! s3 u, u0 Z
Vuejs 挂载点 模板 实例和实例中的数据,事件和方法; z X g% }: T
5 b" w2 L0 {9 c/ w7 i' n% _: |9 G<!DOCTYPE html>
" n8 ]; Z0 n, n& v9 Y% d7 p) Q<html lang="en">" Z6 i' w/ |8 N* V7 |( }
<head>7 g% R4 `3 b% T% E$ J+ g, t
<meta charset="UTF-8">
& ]; `2 J9 e, m) p1 u; o; o- m <title>Vue start</title>' M* e+ T5 b: }$ H1 p
<script src="./vue.js"></script>
- ^' V x4 O8 E$ g! h</head>
: K/ I5 D6 `2 V' x: ^; @
& k2 v6 @7 B! [0 {<body> ~9 Z ^" [4 K9 e7 U1 w. F) y9 t
<div id="root">{{message}}
5 ~- W) k4 b' S$ A <h1 @click="changeword()">hello {{word}}</h1>
& S! d7 g, L8 y4 S# }" [5 S, z' P {{number}}0 S* Q: z: p, ^0 y7 q
<h1 v-text="number"></h1>2 O( o0 `# [9 e6 G( [
<h1 v-html="content"></h1>: G' \7 @: y9 t$ b, n/ b& _
</div>
& h% v6 ]8 S8 q* O$ ~! t <script>
0 C5 a) i7 `, V' o: i new Vue({) C4 [! v0 }) P9 X5 o: p( n8 h
el: "#root",5 x# L% ^- c0 L- c5 @
// template:"<h1>template can be here<h1>",
, @( Q, U& M0 e$ y, E data: {
5 m0 N' H! @5 F( ~) j. ~- X* ~ v7 f0 S message: 'hello world',9 Z5 \: R! u8 V; B4 J; @, R4 l
word:'plmhome',& c; R+ q0 V# d2 b8 u2 s0 n" S
number: 123,% ?/ z4 j: |4 o4 K5 i& c
content:"<h2>hello world<h2>"( ]3 d/ U; q3 n+ s
},5 a7 _# @2 S6 _0 t
methods: {+ l! M+ G6 K# w' R! _
changeword(){0 r# P9 p$ F" ]+ Z
this.word = "plmhome.com" //change the word
. X, Z3 l& x% ]( |$ q- B' v2 x }
7 G- [7 Y ?# \0 n) {7 N9 M }4 [. ~8 W( `, c6 c
})
L! L8 Z k( D& v, Z' ]6 @ </script>; X! _+ V4 ^8 ~3 K+ k# O" E, b
+ `+ F. J* i6 c" Y) k7 o( ] G</body>
: c- r3 C6 Z. i( w: c W6 G8 a2 a1 y: A4 U5 P- H
</html>
5 h& o5 p5 |- R% _- L6 ]- G2 V, w- A. M1 }, ~
& z# k9 e; u) j4 v
|
|