Vue.js起步

清疚 2024-03-30 10:37 114阅读 0赞

在我们的第一章有提到过我的第一个示例，

  1. <div id="app">
  2. { { message }}

  3. </div>

  4. var app = new Vue({

  5. el: '#app',
  6. data: {
  7. message: 'Hello Vue!'
  8. }
  9. })

输出结果：Hello Vue!

我们这章节主要讲如何在npm初始化的项目中创建一个模块。

创建一个模块MyTemplate.vue

99b5c8970967035950da2efda33017c5.png

代码：

MyTemplate.vue

  1. <template>
  2. <div>
  3. 名称：{ {userName}}<br>
  4. 地址：{ {address}}
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'MyTemplate',
  10. data () {
  11. return {
  12. userName: '云 Vue.js 教程',
  13. address: 'www.dandelioncloud.cn'
  14. }
  15. }
  16. }
  17. </script>

修改App.vue代码

  1. <template>
  2. <div id="app">
  3. <MyTemplate/>
  4. </div>
  5. </template>
  7. <script>
  8. import MyTemplate from './components/MyTemplate'
  10. export default {
  11. name: 'App',
  12. components: {
  13. MyTemplate
  14. }
  15. }
  16. </script>
  18. <style>
  19. #app {
  20. font-family: 'Avenir', Helvetica, Arial, sans-serif;
  21. -webkit-font-smoothing: antialiased;
  22. -moz-osx-font-smoothing: grayscale;
  23. text-align: center;
  24. color: #2c3e50;
  25. margin-top: 60px;
  26. }
  27. </style>

查看效果图：

8f147957327045d0b7d1f30189bbabb8.png

发表评论

表情：
评论列表 （有 0 条评论，114人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Websocket起步

    1. 简介 现在很多网站为了实现推送技术, 所用的技术都是Ajax轮询, 轮询是在特定的时机由浏览器对服务器发出HTTP请求, 然后由服务器返回最新的数据给浏览器, 这种

    ゝ一世哀愁。ゝ一世哀愁。/ 0 赞/ 217 阅读

    相关 UML起步

            UML（Unifiled Modeling Languange）统一建模语言，综合通用建模语言，用于对诸如由计算机软件、固件或数字逻辑构成的离散系统建模。并适合

    妖狐艹你老母妖狐艹你老母/ 0 赞/ 240 阅读

    相关 Qt起步

    Qt起步 仅为官方文件翻译，原文地址：http://doc.qt.io/qt-5/gettingstarted.html Qt框架和工具可以在线安装也可以离线安装也可以从源

    快来打我*快来打我*/ 0 赞/ 255 阅读

    相关 nodejs ---- 起步

    跟着慕课敲了一波使用nodejs爬取慕课网 废话不多说，直接上代码，太晚了。安装的教程以及这篇的注释明天补上 爬取这个页面：[https://www.imooc.com/

    叁歲伎倆叁歲伎倆/ 0 赞/ 314 阅读