vue - helloWorld
1.cdn概念:cdn全称内容分发网络,也是加速服务之一.
2.数据绑定:{{data}}
3.el属性(挂载对象):el:标签任意(例如:#app,.app,app)
4.data:{} => 小程序的data:存放数据.
5.如果使用cdn,建议采用require.js,否则建议vue.js本地文件存放.
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Step1.对于vue,可以用cdn -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head> <body> <!-- Step2.绑定 -->
<div id="app">
<!--
Vue的模板的绑定数据的方法,用两对花括号进行绑定Vue中的数据对象的属性,和小程序一样的步骤.
-->
{{message}}
</div> <!--Step3:创建Vue的对象,并把数据绑定到上面创建好的div上去。-->
<script type="text/javascript">
var app = new Vue({ // 创建Vue对象,Vue的核心对象。
el: '#app', // el属性:把当前Vue对象挂载到 div标签上,#app是id选择器
data: { // data: 是Vue对象中绑定的数据
message: 'hello World!' // message 自定义的数据信息,如小程序的data:{}
}
})
</script>
</body> </html>
vue - helloWorld的更多相关文章
- Vue Loader
介绍 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug(模板 ...
- Vue笔记:webpack项目vue启动流程
VUE启动流程 1. package.json 在执行npm run dev的时候,会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件,包含项目的名称 ...
- 【vue】index.html main.js app.vue index.js怎么结合的? 怎么打包的?搜集的信息
转载:https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的: 一.启动项目 第一步:cmd进入项目文件里,运行npm ...
- vue组件间的数据传递
父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. App.vue HelloWorld.vue 在子组件部分: 如果需要从父组件获取 logo 的值,就需要使用 p ...
- 纯小白入手 vue3.0 CLI - 2.1 - 组件 ( component )
vue3.0 CLI 真小白入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study ...
- vue-parcel打包入门
what 快速,零配置的 Web 应用程序打包器 why 快捷,配置比较少 使用 Parcel 打包的 vue HelloWorld 应用.GitHub 地址: https://github.com/ ...
- 在npm发布自己造的轮子
提到封装组件,发布到npm,很多同学都会觉得很神秘.但其实,npm包无非就是我们平时写的比较独立且可复用的模块.当然,想要发布,除了基础组件的编写外,还要进行一些包装.下文通过一个简单的案例,和大家一 ...
- 【Vue】VS Code+Vue入门 Helloworld
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue入门之HelloWorld
对于新学习一门技术,一门语言比如JAVA.Python等都是从编写Hello World开始的,这样一来有益于初学者的人门,并给予初学者一定的信心,所以我也从HelloWorld开始讲起. 干货: 对 ...
随机推荐
- shell脚本学习(四)
shell printf命令 printf是shell的另一个输出命令,默认printf不会自动添加换行我们可以手动添加\n. 语法: printf format-string [arguments. ...
- spark sql遇到的问题
项目背景:计算平台架构hadoop spark spark on yarn,支持多种sql引擎如hive.spark sql.impala等. 问题描述:SPARK SQL在做insert ove ...
- Java流(一)
流: 概念:Java中对文件的操作是以流的方式进行的.流是Java内存中的一组有序数据序列.Java将数据从源(文件.内存.键盘.网络)读入到内存中,形成了流,然后将这些流还可 以写到另外的目的地(文 ...
- nodemon 基本配置与使用
在开发环境下,往往需要一个工具来自动重启项目工程,之前接触过 python 的 supervisor,现在写 node 的时候发现 supervisior 在很多地方都有他的身影,node 也有一个 ...
- [NOIp2016提高组]换教室
题目大意: 有n节课,第i节课在c[i]上课,同时d[i]也有一节课d[i]. 你有权利向教务处发出m次申请把自己的教室改到d[i],相应的批准概率是k[i]. 教室是图上的一些点,其中每条边都有边权 ...
- trim()函数 mysql中的强大字符串过滤函数
mysql中功能强大的trim()函数. 去除两边空格: mysql> select trim(' hello world '); +-----------------------+ | tri ...
- 关于applicationContext.xml cannot be opened because it does not exist的解决
初学Spring在用Resource rs=new ClassPathResource("applicationContext.xml");时老是遇到这个错误.后来发现用 Appl ...
- php-scandir()报错
l linux下 vim /usr/local/php/etc/php.in l 直接斜杠找 /disable_functions 回车 l 按i键 l ...
- Winfrom 使用TabControl控件模拟程序向导步骤
.NET : 隐藏TabControl的标签栏 在给应用程序添加一个向导的做法有很多,但其中比较简便易行的是使用TabControl.如下图所示 但有一个小小的美中不足,就是:作为向导而言,我们可 ...
- TabControl控件和TabPage
TabControl控件和TabPageTabControl控件可以支持在一个控件里面放置多个选项卡,每个选项卡又可以放置多个控件 由于在控件属性窗口添加选项卡相对比较容易,下面说一下动态创建选项卡 ...