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. JS获取当前页面URL的方法

    1.JS获取当前页面URL的方法小结 ①. document.URL;                           http://localhost:81/Test/1.htm/id/12 ② ...

  2. Linux操作命令（五）

    find . -name ”*.c" -exec ./command.sh {} \; 本次实验将介绍 Linux 命令中 find 和 xargs 命令的用法. find xargs 1. ...

  3. ExtJs之列表常用CRUD

    前端代码: Ext.onReady(function(){ Ext.define('Person', { extend: 'Ext.data.Model', fields: [{name: 'id', ...

  4. 【BFS/DFS/YY】派对灯

    [luogu1468]派对灯 题目描述 在IOI98的节日宴会上,我们有N(10<=N<=100)盏彩色灯,他们分别从1到N被标上号码. 这些灯都连接到四个按钮: 按钮1:当按下此按钮,将 ...

  5. bzoj 4430: [Nwerc2015]Guessing Camels赌骆驼

    4430: [Nwerc2015]Guessing Camels赌骆 Description Jaap, Jan, and Thijs are on a trip to the desert afte ...

  6. Problem F: 加密程序2

    #include<stdio.h> int main() { int i; ]; while(gets(a)!=NULL) { ;a[i]!='\0';i++) if('A'<=a[ ...

  7. 20172333 2017-2018-2 《Java程序设计》第2周学习总结

    20172333 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 1.了解print与println的用法区别. 2.有关于"+"的基本用 ...

  8. Codeforces Round #343 (Div. 2) D. Babaei and Birthday Cake 线段树维护dp

    D. Babaei and Birthday Cake 题目连接: http://www.codeforces.com/contest/629/problem/D Description As you ...

  9. Codeforces Round #127 (Div. 1) C. Fragile Bridges dp

    C. Fragile Bridges 题目连接: http://codeforces.com/contest/201/problem/C Description You are playing a v ...

  10. Android 权限处理

    概述: 为了保护系统的完整性和用户隐私权,Android 在访问受限的沙盒中运行每款应用. 如果应用需要使用其沙盒以外的资源或信息,则必须明确请求权限. 根据应用请求的权限类型,系统可能会自动授予权限 ...