web前端框架之Vue hello world
【博客园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依赖, 选一个即可:
下面先贴上完整代码:
<!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的更多相关文章
- Python-S9-Day99——Web前端框架之Vue.js
01课程安排 02let和const: 03 箭头函数 04 对象的单体模式 05 Node.js介绍和npm操作 06 Webpack,babel介绍和Vue的第一个案例 01课程安排 1.1 ht ...
- React 还是 Vue: 你应该选择哪一个Web前端框架？
学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西 ...
- Web前端框架学习成本比较及学习方法
就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...
- 国内5款优秀的WEB前端框架
1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...
- Web前端框架与类库
Web前端框架与类库的思考 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...
- Web前端框架与移动应用开发第八章
Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...
- 三种Web前端框架比较与介绍--Vue, react, angular
一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...
- 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】
↓— Vue.js框架魅力 —↓ 前言 Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...
- 前端框架之vue初步学习
Vue.js介绍: Vue.js是一个构建数据驱动的web界面的渐进式框架.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既有项目整合 ...
随机推荐
- XP下 无法定位程序输入点WSAPoll于动态链接库ws2_32.dll 的解决办法
最近在给手机启用黑阈服务的时候出现了无法定位程序输入点WSAPoll于动态链接库ws2_32.dll这个错误,上网查了一下是因为SDK Platform Tools版本过高不能兼容windows xp ...
- EvansClassification
EvansClassification In his excellent book Domain Driven Design, Eric Evans creates a classification ...
- SpringBoot后台接收前台的字符串数据
需求 将前台传入的字符串数据转为int类型. 操作 在pom.xml中添加引用. <dependency> <groupId>org.apache.commons</gr ...
- 在线预览-Java 使用 Print2Flash 实现Office文档在线阅读
近期项目上遇到一个需求是用户上传的文档进行在线浏览,之前有过一篇使用 OpenOffice 将 word 转换成 html 页面进行展示的.现在介绍一个新的工具那就是 Print2Flash . ...
- java非阻塞NIO和阻塞IO
1 非阻塞NIO和阻塞IO 1.1 定义 阻塞IO:线程被阻塞,去处理一个读取和写入,中间如果有等待时间,则线程被占用,也不能处理其他任务: 非阻塞IO(new I ...
- 使用npm私有服务器保存公司内部强业务类型组件(二):vue-webpack框架
一套基于vue webpack element-ui的npm私有服务器开发组件框架 下载 在配置的有两个地方需要注意: 1:配置library library选项: 如果设置此选项,会将bundle导 ...
- Cookie、Session和自定义分页
一.cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响, ...
- 记录下自己VUE项目用Hbuider打包后启动白屏问题
刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...
- Educational Codeforces Round 5F. Expensive Strings
题意:给n个串ti,ps,i是s在ti中出现的次数,要求找到s,使得\(\sum_{i=1}^nc_i*p_{s,i}*|s|\)最大 题解:sam裸题,每次插入时相当于在fail链上到1的位置加ci ...
- JavaScript中函数立即调用的写法
第一:在含数前面加一元运算符: //方法1 +function (i) { console.log('+'); }(1); //方法2 -function (i) { console.log('-' ...