|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
: \8 Q5 F* K6 z7 U/ s, b0 b
Vuejs 挂载点 模板 实例和实例中的数据，事件和方法& v3 J9 ]) I9 J
% S3 z" r2 S4 `/ v
<!DOCTYPE html>
" Q) M& \) ]: ^<html lang="en">
; M) { k+ \, ?7 M<head>
% Z( H9 W5 s- X& m) K. ?* c <meta charset="UTF-8">; A* S1 o% b+ S' z% |
<title>Vue start</title>* l/ z3 _4 q0 c! Q* J) R) H
<script src="./vue.js"></script>
7 T) Q. ?) I. e9 J3 w</head>
. y3 L3 G3 o/ d6 {
! X5 c6 L: [" d# `$ a( L8 K d<body>
`9 o- h- g$ b; N' { <div id="root">{{message}}
; Y2 }/ M% q c* ?3 @ <h1 @click="changeword()">hello {{word}}</h1>8 h c+ j/ U2 \8 ^- c
{{number}}5 w3 J9 N# P3 u1 H8 Z- p0 S
<h1 v-text="number"></h1>
9 ~' x/ `0 B0 U/ v( ` <h1 v-html="content"></h1>
3 W, b8 c0 B% t. P2 o( D </div>1 Z" p% g# d+ a! ]8 x2 C
<script>
( j4 _$ @, d- s- T+ g" ~) n new Vue({5 T. J" K: D' w6 M) D1 U4 R9 J
el: "#root",
* s, ]7 v/ G# l4 g // template:"<h1>template can be here<h1>",
, B5 k: y ^3 `9 K5 @6 }2 i9 F data: {6 z- C: W$ r" P/ |3 w4 O$ l
message: 'hello world',
7 F+ v9 H" }0 @$ F$ k& r: m% c word:'plmhome',5 h* K. D: S# O7 {4 @ J
number: 123,
6 n) ^+ M4 B' j7 f- G5 ?+ s* q& a content:"<h2>hello world<h2>"$ B) ` U& M7 i/ Q1 i3 O- U
},3 W4 _6 T3 ]9 c4 N0 V
methods: {
! m# |0 W, F) `8 D changeword(){) s9 _: ^# Y. [" A+ m4 `( K
this.word = "plmhome.com" //change the word! S' ?* Y2 h9 L4 a
}+ w* B6 k" {9 M" W9 u% B
}
: {& O6 x& B6 }- v })
8 {6 i8 r0 L! p9 l" M </script>
; q0 \+ q H3 B s& l, v1 Y8 S- I9 T3 Z9 l: K" {
</body>
Z, Q, A$ ?* o+ e: Y9 Y
% ~- z& j% L: u0 B; a</html> ]3 }4 x) A4 L' G6 I
1 s7 k( o+ h; M0 J, A! z
' ]* ^! k+ {6 f7 F
|
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
发表于 2019-8-6 15:53:51
