【博客园cnblogs笔者m-yb原创，转载请加本文博客链接，笔者github: https://github.com/mayangbo666，公众号aandb7，QQ群927113708】

https://www.cnblogs.com/m-yb/p/10162346.html

Vue.js是web前端当下最火的框架之一, 作者是中国人 尤雨溪(Evan You),

官网地址:https://cn.vuejs.org

Vue的官网是学习Vue的较好途径之一,

今天笔者写了一个Vue的hello world 分享给大家:

笔者这里用sublime的代码文本编辑工具,

首先创建一个testVue.html文件,

用sublime编辑,

键入<html>

sublime会补全html的一些基本要素:

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

</body>

</html>

首先在body内部下方,引入官网推荐的Vue.js框架需要的CDN依赖, 选一个即可:

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

下面先贴上完整代码:

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <div id="he">

        <p>{{ message }}</p>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script type="text/javascript">

        new Vue({

            el: '#he',

            data: {

                message: 'hello, Vue~'

            }

        })

    </script>

</body>

</html>

下面分步讲解:

先写一个div容器,id为he,

容器里面在p标签里放入变量名, 并用{{}}包起来,

在下面script标签里new一个Vue对象,

对象里写的形式类似json,

　　　　　　{
            el: '#he',

            data: {

                message: 'hello, Vue~'

            }
　　　　　　}
　　
写完之后用浏览器打开html文件,就可以看到
hello, Vue~了
讲解完毕~

web前端框架之Vue hello world的更多相关文章

  1. Python-S9-Day99——Web前端框架之Vue.js

    01课程安排 02let和const: 03 箭头函数 04 对象的单体模式 05 Node.js介绍和npm操作 06 Webpack,babel介绍和Vue的第一个案例 01课程安排 1.1 ht ...

  2. React 还是 Vue: 你应该选择哪一个Web前端框架？

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  3. Web前端框架学习成本比较及学习方法

    就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...

  4. 国内5款优秀的WEB前端框架

    1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...

  5. Web前端框架与类库

    Web前端框架与类库的思考 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...

  6. Web前端框架与移动应用开发第八章

    Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...

  7. 三种Web前端框架比较与介绍--Vue, react, angular

    一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...

  8. 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

    ↓— Vue.js框架魅力 —↓ 前言       Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...

  9. 前端框架之vue初步学习

    Vue.js介绍: Vue.js是一个构建数据驱动的web界面的渐进式框架.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既有项目整合 ...

随机推荐

  1. RESTClient的基本使用

    1.本人使用的是火狐浏览器,其他浏览器应该也有(没试过),安装插件RESTClient. 2.1.打开RESTClient:

  2. 史上最全！Selenium元素定位的30种方式

    Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下. 这里将统一使用百度 ...

  3. javascript prop和attr的区别

    在网上找了一些资料,通过自己去寻找,尝试,此次做一次总结. 1/  attr()是jQuery 1.0版本就有的函数,    prop()是jQuery 1.6版本新增的函数.毫无疑问,在1.6之前, ...

  4. 在微信小程序中将获取到的经纬度（经度纬度）转地址（地名）

    var QQMapWX = require('qqmap-wx-jssdk') var qqmapsdk = new QQMapWX({ key: '填写你的key' // 必填 }) wx.getL ...

  5. ubuntu安装QGIS

    参考官网https://qgis.org/en/site/forusers/alldownloads.html#debian-ubuntu 但是官网写的太繁琐分散,没有按每个OS集中写cli安装完整过 ...

  6. Javaweb里“容器“为何出现，应用在哪，未来发展趋势

    容器是一个Java 所编写的程序,可当做一个工具,没有容器时必须自行编写程序以管理对象关系,现在容器都会自动做好. 有一说法:如果有一个类专门用来存放其它类的对象,这个类就叫做容器.另一说法:容器里存 ...

  7. Spring Cloud ----> 几个组件的总结

    Spring Cloud Eureka 多个服务,对应多个Eureka Client 只有一个Eureka Server ,充当注册中心的角色每个Eureka Client 有ip 地址和端口号,它们 ...

  8. Oracle中国移动经典面试题（附代码跟两种答案）

    /*中国移动sql面试题: create table test(   id number(10) primary key,   type number(10) ,   t_id number(10), ...

  9. C++函数指针与指针函数干货

    C++要是不常用,相信过四天你的指针函数与函数指针的概念就该忘个精光. 其实只要记住谁在后面谁就是哪个本质. 先了解下指针数组与数组指针吧 数组指针 就是指向数组的指针,它表示的是一个指针,它指向的是 ...

  10. Git版本库管理

    Step 1 查看哪些历史提交过文件占用空间较大 使用以下命令可以查看占用空间最多的五个文件: git rev-list --objects --all | grep "$(git veri ...