PLM之家PLMHome-工业软件践行者

[前端框架] Vuejs 挂载点 模板 实例和实例中的数据,事件和方法

[复制链接]

2019-8-6 15:53:51 1891 0

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

积分
82166
QQ
发表于 2019-8-6 15:53:51 | 显示全部楼层 |阅读模式

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有账号?注册

x
, j7 n; P  Y5 }9 u( S* g- s
Vuejs 挂载点 模板 实例和实例中的数据,事件和方法- ^% c, D, M8 T8 f
, U% X# w) K5 h3 c4 O! \3 u; {0 ?
<!DOCTYPE html>
7 q) X* e7 ~  Z  Q<html lang="en">& b' i5 K6 g5 K7 Q: q- D7 s
<head>* C) _$ K* J( b8 G8 n
    <meta charset="UTF-8">
+ D* Q. q5 k8 R7 [5 x& I    <title>Vue start</title>) Q: R( n* }! O. ^  s: E& C- h
    <script src="./vue.js"></script>. S( t, O( X2 m: X* ~' }0 Y) b) p
</head>. g5 h; n- `$ D4 y: h& }
, u# J3 p; [; N& S+ k) N
<body>
, G; G$ n8 D) }# N$ k$ M% E- P5 f    <div id="root">{{message}}
: W5 Q8 L# H" c* {        <h1 @click="changeword()">hello {{word}}</h1>) n( ]" W8 M' j" y
        {{number}}
% a: I" R6 d4 F4 W/ K( M, o        <h1 v-text="number"></h1>% {$ Q! R4 u: a* ]2 Z* h
        <h1 v-html="content"></h1>
$ }/ Y  l4 x7 W9 H0 ]! I: X8 I    </div>/ p9 L: g/ |' N; \+ _* ?# W
    <script>
& [: S! t' j6 ^& Q' s        new Vue({
! u  X+ o- D3 J! n! O: [            el: "#root",, e2 ^8 N- E# W  d2 t
            // template:"<h1>template can be here<h1>",
- c1 y- s! H2 ?! U            data: {) @7 F/ M' g2 `) H5 E" Y( B
                message: 'hello world',
$ f4 V8 C9 \5 |1 [0 C% ?/ {3 M                word:'plmhome',
. O4 v4 _! V4 t; b                number: 123,
# V7 l/ b3 X$ |; ~, U/ M                content:"<h2>hello world<h2>"1 T  D7 _8 ]8 H' [
            },
3 e6 E: ~# v$ E7 f# k. t. r, m            methods: {7 E; O2 {4 K: i* \7 O: `  H5 z# h! ^& Y
                changeword(){" u8 o- \  t! A, S  S
                   this.word = "plmhome.com" //change the word# v$ ~( Q7 U- n' s' _! ~  h5 D9 U
                }* }( w) T9 h( I& q
            }" e. m% _8 \7 D" l5 A5 R+ s' M
        })
0 N' I% ^- D$ v. _0 ]; N$ v    </script>2 K- X5 K# Q9 ^4 a3 v9 m- _3 _

) _- V  _6 ^, i" }1 E</body>
5 |1 i( K. d. W, M
  U, T: y+ l! h. B+ \</html>3 g1 @/ u2 i- [; `' K7 C: B7 m' l

' f% C0 Q/ }6 v- `$ t
) w: y! G6 d; }6 q& y$ L
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了