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

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

[复制链接]

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

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

admin 楼主

2019-8-6 15:53:51

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

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

x

) R$ L; P( L" `& GVuejs 挂载点 模板 实例和实例中的数据,事件和方法
) k. V# K; n2 d+ L2 R9 s4 N( p. q6 M, @6 d
<!DOCTYPE html>8 f/ u6 P. e# u' a4 e1 V
<html lang="en">7 [, W" P7 j8 m* N' S5 s
<head>9 `' y0 b/ h) X- J/ d3 u. J/ ], M! S
    <meta charset="UTF-8">% E2 a' k3 ?6 v* r0 k5 ?
    <title>Vue start</title>9 R2 j! R. X3 _& v
    <script src="./vue.js"></script>
* A: `: P1 W0 z</head>3 C! c8 D5 @& \2 T1 b9 |
# P, n5 ~8 }  {# u
<body>3 `/ G( v% @) s0 s4 M. z  _
    <div id="root">{{message}}
3 e( H4 D+ l. [- j. d' B        <h1 @click="changeword()">hello {{word}}</h1>& @0 ^4 ]/ ]! U5 N
        {{number}}
8 }% H; }0 A& S7 k        <h1 v-text="number"></h1>
& e. O% [/ j: X        <h1 v-html="content"></h1>
; T4 f; m9 \9 A2 e; r7 ]: X$ e- j9 Y    </div>
- p, E0 i7 y+ M& O/ m    <script>! X$ `0 a# o: t! s% D
        new Vue({" U$ E' p" c# ^6 Y9 ]. {; i
            el: "#root",! X! Q2 O6 |5 K
            // template:"<h1>template can be here<h1>",& H: a+ e- @5 @8 P
            data: {5 @5 G2 e8 d( K( z1 B7 A
                message: 'hello world',
, S# |+ t# y! Q8 i, P                word:'plmhome',
- q: O- {$ P; J' ~& c: s5 ?                number: 123,
7 k* ~" D- j7 k                content:"<h2>hello world<h2>"
$ U) h& t' p9 {0 s1 @' a            },, W; u) @* Q/ u/ `  \; q8 P
            methods: {7 ~2 x. [5 o5 H0 q. T- `3 L
                changeword(){
4 s: d; D  T8 J: ?                   this.word = "plmhome.com" //change the word& J$ d  u8 g! m
                }
6 T9 b! G9 D" Y9 m            }
# H% B0 F; F6 `0 ^# c' k4 ^  G& ]        })9 G2 V6 X  Q8 ~
    </script># f+ |1 e! k) F

0 P$ h+ c5 m4 g7 q' @</body>
) w- d7 O5 W) q- {
& f* ^! ^, O& M5 L</html>
  _5 v8 @, k' O# ^8 P: q

- s0 l0 ^1 Q/ O4 T8 U
2 |0 i. g* I$ |% w
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了