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

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

[复制链接]

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

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

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

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

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

x

0 U* v6 g. U9 R/ TVuejs 挂载点 模板 实例和实例中的数据,事件和方法
$ g) l8 c8 y$ k6 P* g: {
8 w1 O6 T. X# P0 u9 d4 ]: R<!DOCTYPE html>% p" d1 X% X% i6 K- U8 \
<html lang="en">
. o; J% {4 v- B3 K% M% K<head>" n8 b" t& l, k$ E
    <meta charset="UTF-8">
! d) a8 a2 I; W: Z4 n' ]; L    <title>Vue start</title>5 Z& A  V! w8 j# Z% J" X# X* k
    <script src="./vue.js"></script>
: t% b/ n2 \8 e" V</head>, Z% O* k( ^3 c( `- |
# `- Q8 K5 [, ?6 {( E0 l& ]
<body>
( x& q. {" G6 F    <div id="root">{{message}}
4 ~- N8 h+ G+ P) `        <h1 @click="changeword()">hello {{word}}</h1>1 i. L  O# W9 R6 E) _7 E! z$ F3 |* U7 B! I
        {{number}}
5 |1 Q& F5 ^% ?% W' z+ M+ Z        <h1 v-text="number"></h1>
' ?8 C3 y# B- ]! F" R& i3 n, i& X        <h1 v-html="content"></h1># i4 O- E1 e& G3 P) w) l) k
    </div>+ B2 U, h7 c! o
    <script>6 m8 m, d, ]! i; W5 X
        new Vue({
% C5 N; A$ [& \. \2 I            el: "#root",! L$ s  Q" r3 L7 S) X# ]9 n( _
            // template:"<h1>template can be here<h1>",9 z; ~$ v5 w/ ]
            data: {
2 D# H4 \. L3 L. Y+ v, D- |                message: 'hello world',
+ i0 g, l% a* Z( v0 A                word:'plmhome',
% c  O6 Y% f- _: i                number: 123,# f4 S6 B, p4 y8 e+ R& a
                content:"<h2>hello world<h2>"
3 u1 i" H, s! X) s" n            },2 z+ T7 M+ W6 r' R1 G: `
            methods: {
, p" R+ M% {6 r2 {* C                changeword(){  a2 R' H( C: a$ L4 d# r- i
                   this.word = "plmhome.com" //change the word
- u% E: Q6 f' D- f3 M                }
1 U. Y2 j, n5 V; [            }! B1 G. n9 a3 Q$ R& U0 i) o# m
        })
* S7 r1 J3 i, y  V, u- x& b    </script>
& h5 ~# R9 z) }8 T
  P# q2 \* L7 u$ v. U5 G</body>
7 C9 F; R" }# G: b. H+ b
" P8 z; G- h* ]" |# [( N8 _</html>+ C# d+ c# E% |2 I: F+ \  u

: l4 P3 n6 v4 c( ]& G. R6 E0 v+ L: O2 B+ q/ b; o$ J3 [+ e5 p% U% E
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了