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的更多相关文章

  1. Vue Loader

    介绍 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug(模板 ...

  2. Vue笔记:webpack项目vue启动流程

    VUE启动流程 1. package.json 在执行npm run dev的时候,会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件,包含项目的名称 ...

  3. 【vue】index.html main.js app.vue index.js怎么结合的? 怎么打包的?搜集的信息

    转载:https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的: 一.启动项目 第一步:cmd进入项目文件里,运行npm ...

  4. vue组件间的数据传递

    父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据.   App.vue HelloWorld.vue 在子组件部分: 如果需要从父组件获取 logo 的值,就需要使用 p ...

  5. 纯小白入手 vue3.0 CLI - 2.1 - 组件 ( component )

    vue3.0 CLI 真小白入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study  ...

  6. vue-parcel打包入门

    what 快速,零配置的 Web 应用程序打包器 why 快捷,配置比较少 使用 Parcel 打包的 vue HelloWorld 应用.GitHub 地址: https://github.com/ ...

  7. 在npm发布自己造的轮子

    提到封装组件,发布到npm,很多同学都会觉得很神秘.但其实,npm包无非就是我们平时写的比较独立且可复用的模块.当然,想要发布,除了基础组件的编写外,还要进行一些包装.下文通过一个简单的案例,和大家一 ...

  8. 【Vue】VS Code+Vue入门 Helloworld

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue入门之HelloWorld

    对于新学习一门技术,一门语言比如JAVA.Python等都是从编写Hello World开始的,这样一来有益于初学者的人门,并给予初学者一定的信心,所以我也从HelloWorld开始讲起. 干货: 对 ...

随机推荐

  1. shell脚本学习(四)

    shell printf命令 printf是shell的另一个输出命令,默认printf不会自动添加换行我们可以手动添加\n. 语法: printf format-string [arguments. ...

  2. spark sql遇到的问题

    项目背景:计算平台架构hadoop spark   spark on yarn,支持多种sql引擎如hive.spark sql.impala等. 问题描述:SPARK SQL在做insert ove ...

  3. Java流(一)

    流: 概念:Java中对文件的操作是以流的方式进行的.流是Java内存中的一组有序数据序列.Java将数据从源(文件.内存.键盘.网络)读入到内存中,形成了流,然后将这些流还可 以写到另外的目的地(文 ...

  4. nodemon 基本配置与使用

    在开发环境下,往往需要一个工具来自动重启项目工程,之前接触过 python 的 supervisor,现在写 node 的时候发现 supervisior 在很多地方都有他的身影,node 也有一个 ...

  5. [NOIp2016提高组]换教室

    题目大意: 有n节课,第i节课在c[i]上课,同时d[i]也有一节课d[i]. 你有权利向教务处发出m次申请把自己的教室改到d[i],相应的批准概率是k[i]. 教室是图上的一些点,其中每条边都有边权 ...

  6. trim()函数 mysql中的强大字符串过滤函数

    mysql中功能强大的trim()函数. 去除两边空格: mysql> select trim(' hello world '); +-----------------------+ | tri ...

  7. 关于applicationContext.xml cannot be opened because it does not exist的解决

    初学Spring在用Resource rs=new ClassPathResource("applicationContext.xml");时老是遇到这个错误.后来发现用 Appl ...

  8. php-scandir()报错

    l       linux下 vim /usr/local/php/etc/php.in l       直接斜杠找 /disable_functions   回车 l       按i键 l     ...

  9. Winfrom 使用TabControl控件模拟程序向导步骤

    .NET : 隐藏TabControl的标签栏   在给应用程序添加一个向导的做法有很多,但其中比较简便易行的是使用TabControl.如下图所示 但有一个小小的美中不足,就是:作为向导而言,我们可 ...

  10. TabControl控件和TabPage

    TabControl控件和TabPageTabControl控件可以支持在一个控件里面放置多个选项卡,每个选项卡又可以放置多个控件 由于在控件属性窗口添加选项卡相对比较容易,下面说一下动态创建选项卡 ...