资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Vue从Hello World到打包（后端适读）

Vue从Hello World到打包（后端适读）

ACb0y / 2436人阅读

摘要：从到上线简介是个框架。现在，我们完成一个项目后，需要打包，因为在开发环境下，运行所依赖的包达到好几百个，为了将文件体积缩减到正常范围，必须按需打包。

Vue从Hello World到上线 Vue 简介

Vue是个MVVM框架。

特点：简单易学、体积小、性能高。并且它的源码耦合性非常低，了解它的过程也就是思想进步的过程。

当然，只学这一个框架，无法完成前端的全部工作，除了Vue之外，还需要了解axios、Webpack，才能完成整个开发过程。

好了，我们开始！

Vue的Hello World

写Hello World已经成了传统，我们也不例外，尽管Vue的入门文档写的非常好，但是在这里还是按照我的思路来走吧！

首先，我们先写一个html页面：


   
Hello World

好了，现在我们已经写出了一个静态的Hello World，现在我们要用Vue将它改造成动态的。Vue的引入可以很简单，像极了jQuery，一个

然后我们再建一个

好了，现在我们只差一步了，Vue里面已经有了数据，只欠绑定，将

内的内容改成这样既可：{{ myData }}，那么最终的写法是这样：


   
{{ myData }}

现在Hello World已经写出来了，那就需要敲打一下了。el: "body"这个地方十分不建议写成这样，直接绑定body会有一些方法无法使用，建议写成这样：


    

        
{{ myData }}

在body内部添加一层并赋一个id是比较好的做法。放心，这或许是你整个Vue项目唯一需要写的ID属性，它不需要像jQuery一样命名一大堆ID。

添加事件

上面的Hello World其实就是一个数据绑定，那么我们深入一点，来了解事件绑定：

现在，有一个需求，需要在

{{ myData }}
这个块里添加一个点击事件，给你十秒钟想一想jQuery是怎么做的，是不是挺复杂的？而Vue有很简单的事件绑定写法：

{{ myData }}

// 是不是很像onClick事件？
// 其实是不一样的，在最终生成的代码里，你不会看到@click，它最终会被转换成DOM2级事件。

现在，我们点击这个

块的时候，就会触发myClick方法，咦，等等，myClick方法还没定义呢！

那我们回到js代码里，添加methods属性：

new Vue({
    el: "#app",    
    data: {     
        myData: "Hello World"
    },
    methods: {      // 这个methods也是不可以改的哦，记得加s
        myClick: function() {
            alert("你点" + this.myData + "干啥？");
            // 你可以尽情使用data里的数据，但是要加上this指向
        }
    }
})

好了，可以运行了，如果myClick方法需要加参数的话，也很简单：

{{ myData }}
，当然，下面的定义部分也需要配上形参：

myClick: function(data) {
    alert("你点" + data + "干啥？");
}

相信你看出来了，data里面是放数据的，methods里面是放方法的。

添加属性

理解了添加事件，那理解添加属性就更简单了。

例如，有个 ... new Vue({ el: "#app", data: { srcUrl: "../images/logo.png" } }) 

警告：如果这个标签的src属性值是动态的，那就不要添加原生的src属性，通过属性绑定的方式引入路径是最佳实践，其他属性绑定也是同理。
更强的数据绑定

如果我们有这样一段数据：

arr = [1, 2, 3, 4, 5, 6];

需要用

    和
  • 标签渲染，给你十秒钟想想jQuery是怎么做的？不管怎么做，做出来都是悲剧！

    我们看看Vue是怎么做的？

    data: {
    list: arr
}
...

      
    
    • {{ item }}
      •

    如此一来，数据就可以漂亮地渲染到页面上了。

    我们再来个复杂点的数据：

    json = [
    {
        "AirPortCode": "HGH", 
        "Temperature": "10℃", 
        "Visib": "很好", 
        "WeatherType": "晴", 
        "Wind": "东风 - 3级", 
        "city": "杭州"
    }, 
    {
        "AirPortCode": "CAN", 
        "Temperature": "17℃", 
        "Visib": "7000米", 
        "WeatherType": "多云", 
        "Wind": "北偏东北风 - 2级", 
        "city": "广州"
    }, 
    {
        "AirPortCode": "PEK", 
        "Temperature": "12℃", 
        "Visib": "很好", 
        "WeatherType": "晴", 
        "Wind": "南偏西南风 - 2级", 
        "city": "北京首都"
    }
]

    给你十秒钟想想……

    算了，还是直接上vue吧

    data: {
    list: json
}
...

      
    
    • {{ item.city }} {{ item.Temperature }}
      •

    在这里只显示了城市和温度两样东西。你愿意的话，可以显示更多。尽管数据好像复杂了很多，但是Vue应付起来并没有多吃力。

    好了，我想我们的页面已经足够动态了，但是还不够智能，怎么说呢？例如上面的数据里有个Wind的字段，将这个字段渲染到页面上的时候，我并不希望全部渲染，我只想渲染风力级别，那我需要将前面的风向给去掉，这时候就需要加过滤器。

  • {{ item.Wind | cutWind }}

Vue提供了内置的过滤器，但切割天气显然不是它内置的过滤器，因此我们现在需要自己定义一个：

Vue.filter( "cutWind" , function(value) {
    return value.split("-")[1];
});

本来还应该加一个去空格的处理，但现在为了演示就暂且无视空格吧……

Ajax

现在数据都可以动态渲染了，我们需要考虑的就是，应该怎么从服务端获取数据，ajax库有很多，Vue原本也自己实现了一个，但后来弃用了，原因是不想重复造轮子。现在官方推荐的Ajax库叫axios，它确实也是一个小巧而轻量的库，体积大约是11k，同样可以通过

/src目录是源码文件夹，里面的都是源码，开发环境都只打开这个文件。
/dist目录是发布文件夹，取自“distribution（发布）”这个单词，里面的代码都是正式代码，所有资源都经过压缩，因此不是给人看的。

对/src里的文件做了相应的修改后，可以查看package.json这个文件，找到

"scripts": {
    "build": "webpack --progress -p --watch"
},

不同的项目可能略有差别，但webpack命令就是我们需要的，这条命令的key是build，因此我们在项目的命令行运行npm run build，即可完成打包，如果没有报错信息，说明一切顺利，只需要将dist目录里的东西部署到线上即可。

服务器托管 专线服务 ubuntu hello world hello-world 网站字体打包到服务器 vue上传到云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82056.html

相关文章

  • 写给后端同学的vue

    摘要：有写后台的哥们说，怎么写，怎么新建一个项目，然后我想了想，觉得写一个面向后台同学的教程也是有必要，文章中几乎没讲和细节处理的相关内容，减少接受不必要的信息量，降低的学习成本。 安装环境 文章内，图片很多，占据了一定的篇幅。有写后台的哥们说，vue怎么写，怎么新建一个vue项目，然后我想了想，觉得写一个面向后台同学的vue教程也是有必要，文章中几乎没讲css和vue细节处理的相关内容，减...

    SoapEye 评论0 收藏0

  • webpack4.x升级摘要

    摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展 很久以前，互联网行业有个职位叫做 软件开发工程师 在那个时代，大家可能...

    levinit 评论0 收藏0

  • 基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战

    摘要：原作者原链接基于多入口生成模板用于服务端渲染的方案及实战法律声明警告本作品遵循署名非商业性使用禁止演绎未本地化版本协议发布。这是什么背景现代化的前端项目中很多都使用了客户端渲染的单页面应用。 原作者：@LinuxerPHL原链接：基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战 法律声明 警告：本作品遵循 署名-非商业性使用-禁止演绎3.0 未本地化版本（CC BY-...

    big_cat 评论0 收藏0

  • 基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战

    摘要：原作者原博文地址基于多入口生成模板用于服务端渲染的方案及实战法律声明警告本作品遵循署名非商业性使用禁止演绎未本地化版本协议发布。这是什么背景现代化的前端项目中很多都使用了客户端渲染的单页面应用。 原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战 法律声明 警告：本作品遵循 署名-非商业性使用-禁止演绎3.0 未本地化版本（...

    Lavender 评论0 收藏0

  • 最详细的Vue Hello World应用开发步骤

    摘要：运行命令，安装一个轻量级的服务器，该服务器用于应用开发完毕后的本地测试。到目前为止，这个基于的应用的开发和配置都结束了，是不是很简单我们可以来测试了。浏览器里访问，看到的输出，说明我们成功地走完了一个基于的应用开发流程。 很多Vue的初学者想尝试这个框架时，都被webpack过于复杂的配置所吓倒，导致最后无法跑出一个期望的hello word效果。今天我就把我第一次使用webpack打...

    stormzhang 评论0 收藏0

发表评论

登陆后可评论

0条评论

ACb0y

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
UCloud （优刻得科技股份有限公司）

UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。

Copyright © 2012-2023 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜ 沪ICP备12020087号-3｜
<