PLM之家PLMHome-国产软件践行者

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

[复制链接]

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

admin 发表于 2019-8-6 15:53:51 |阅读模式

admin 楼主

2019-8-6 15:53:51

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

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

x
$ I' z6 Q9 Q6 E, L
Vuejs 挂载点 模板 实例和实例中的数据,事件和方法# l6 ~6 x! t4 j4 Y4 m

) I7 |& z2 b1 w# I. _. M# M. B<!DOCTYPE html>
2 x, G: B3 A0 @  r9 ]<html lang="en">
# l, w3 ]1 ]* o2 z<head>5 i( ]8 b5 I7 C3 [
    <meta charset="UTF-8">
( j8 o" Y' D! @/ k    <title>Vue start</title>5 E7 w" G/ B8 h" h+ H
    <script src="./vue.js"></script>9 n3 k& Y+ e% a, l& }5 ?9 N) n
</head>+ s* D2 I2 C; c, @- U; A
: r2 F/ L/ |7 M
<body>
% c1 k: U4 ^; d6 ^7 L$ R& K    <div id="root">{{message}}
0 o3 B  [: g+ k" v" w, f6 }        <h1 @click="changeword()">hello {{word}}</h1>2 D* C/ T' J' t$ V" K6 I: l
        {{number}}
0 E5 b  r9 ~* R% U; l" d. _# k        <h1 v-text="number"></h1>' }, A/ q' V; v0 V  ~3 x
        <h1 v-html="content"></h1>
" \# ^' j2 a8 m4 |    </div>
# A$ O3 U& D5 Q6 x, g    <script>' t! i- e. b* k+ b& l
        new Vue({
# l: E0 C3 B- T7 v/ [6 F" H& ^9 e            el: "#root",. p1 k6 D) K9 \, K7 H; }
            // template:"<h1>template can be here<h1>",' @; t1 P: V6 m
            data: {
3 W( m/ `8 W- J& a7 }                message: 'hello world',8 C% o: i! V8 v; t3 _
                word:'plmhome',
. v" l- W2 ~% m. j                number: 123," a$ K  I" j/ q. G, t. B3 q
                content:"<h2>hello world<h2>"/ Y# I0 S, p2 w1 S' r
            },( C! g: W( I! V% p; z
            methods: {
, F) q1 F" Y1 w/ o, g' Q8 E                changeword(){
3 w1 I( N) g9 B0 j                   this.word = "plmhome.com" //change the word
3 M. ~( o9 h5 E- {7 `% k                }0 F. l4 @' v. N$ _  }/ I" {8 o
            }
. c, J( C5 e, l8 W! w        })
; [' C* u" {- L% Z0 E    </script>0 b3 @! ~- r3 D. F
, L7 n  [$ e- P3 O/ Y9 l
</body>4 E$ G  D1 h' t2 Y

5 m, a6 G3 M) x9 a</html>2 D# N5 F0 y' x7 p9 F/ S  `8 [0 z) Q1 G

( d& \; _% b% i5 ^0 u6 H* |1 o# [
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

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

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

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

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

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

    我知道了