【01】Vue 之hello wolrd

1.1. Vue简介

Vue是一个前端的双向绑定类的框架，发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计，当然也有自己独特的地方，比如Vue的单文件组件开发方式都很有创新，另外Vue自身的一些绑定的语法、用法等都非常精炼，很容易上手，而且第三方的插件都非常丰富，社区非常活跃，最新的文档都有中文版本。而且Vue配合官方的和第三方的库可以实现单文件的组件化开发、SPA等现代化前端开发。

1.2. Vue的入门demo

Vue 可以直接把它当做一个js库使用，所以它可以很容易的接入到你的项目或者单个页面中。甚至你可以只使用它的双向绑定功能。所以它很容易上手。

比如：我们有一个需求，一个网页上一个Div标签，我们有一个json对象存储数据，把json对象上的数据放到Div上去。

接下来是步骤：

第一步： 创建一个文件夹并创建一个html文件 比如：index.html.

当如你可以选择你自己的编辑器，我就用VSCode。

第二步：引入Vue库

<script src="https://unpkg.com/vue/dist/vue.js"></script>

当然了你可以直接下载Vue的js文件，推荐你直接用上面的cdn即可。

第三步：创建一个Div，给它一个id，比如：app

第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。

最终的代码如下：

<!DOCTYPE html> <!--第一步：创建文件夹及html文件-->

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Vue入门之Helloworld</title>

  <!--第二步：引入Vue库-->

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

  <!--第三步:创建一个Div-->

  <div id="app">

    <!--Vue的模板的绑定数据的方法， 类似于很多其他前端的模板，可以用两对花括号进行绑定Vue中的数据对象的属性 -->

    {{ message }}

  </div>

  <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->

  <script>

    var app = new Vue({         // 创建Vue对象。Vue的核心对象。

      el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器

      data: {                   // data: 是Vue对象中绑定的数据

        message: 'Hello Vue!'   // message 自定义的数据

      }

    });

  </script>

</body>

</html>

最终的结果就是：

Hello Vue!

1.3. Vue的Helloworld总结

Vue构造函数的：选项el属性，就是element缩写，当前Vue对象挂载到哪个标签上的语法，支持CSS选择器或者dom对象，一般用id选择器选择当前页面的标签。
Vue的选项：data属性是自定义数据。这里我们只是演示了一个message属性，vue会把自定义的数据可以与html的模板数据进行绑定。
Vue 数据绑定的方式就是用 {{}}，类似于handlebars.
上面这个demo就是演示了Vue的绑定数据的基本模型。注意点，标签先创建好了之后，再创建Vue对象，具体你应该懂吧。

其他详情请参考：http://aicoder.com/vue/preview/all.html

转载地址：http://www.cnblogs.com/fly_dragon/p/6218551.html

【01】Vue 之hello wolrd的更多相关文章

vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
vue.js及项目实战[笔记]— 01 vue.js
一. vue基础 1. 历史介绍 angular 09年,年份较早,一开始大家是拒绝的 react 2013年,用户体验较好,直接拉到一堆粉丝 vue 2014年,用户体验较好前端框架与库的区别 j ...
01: vue.js安装
1.1 vue.js安装与基本使用官网:https://cn.vuejs.org/ 1.使用之前,我们先来掌握3个东西是用来干什么的 1. npm: Nodejs下的包管理器. 2. webpack ...
01.VUE学习一
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
（生鲜项目）01. Vue环境搭建
第一步: nodejs安装 https://nodejs.org/en/download/ 说明安装成功第二步: cnpm 由于npm需要很多的依赖包,这些包下载都很慢,所以就有了cnpm : ht ...
01 vue入门
vue简介官网上有介绍,这里粘出来 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心 ...
01.vue数据绑定
Vue特点渐进式: 渐进, 可以理解成一步一步的. 在使用Vue的时候, 我们不需要把整个Vue框架的东西都用上, 可以一步一步的根据需要慢慢的替换之前的代码. 自底向上逐层应用: 由底层开始, 把 ...
01 . Vue简介,原理,环境安装
简介 vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立的功能或库 ...
01.Vue前端路由学习目标
路由的基本概念与原理 vue-router的基本使用 vue-router嵌套路由 vue-router动态路由匹配 vue-router命名路由 vue-router编程式导航基于vue-rout ...

随机推荐

去除select下拉框默认样式
去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #; /*很关键:将默认的select选 ...
linux下避免僵尸进程的几种方法
linux下我们可以调用fork函数创建子进程,创建的子进程将会得到父进程的数据空间.堆.栈......副本(采用写时复制机制),子进程将会继承父进程的信号掩码.信号处理方式.当前工作目录.会话id. ...
64位系统InlineHook
APIHook64Class.h #ifndef APIHOOK64CLASS_H_ #define APIHOOK64CLASS_H_ #include <Windows.h> clas ...
SVG path
在网页上画一图形,比如星星或波浪线,开始是想着图形软件画一个的,后来发现SVG这绘图程序的语言,感觉甚是可以,就发了些时间学了一下,在此做一简单分享和记录. 菜鸟上是这么介绍的(SVG 是使用 XML ...
【php】session_start 报 no such file
如果是yum安装修改php-fpm.conf 里面的 session.save_path 如果是编译的,修改php.ini 的session.save_path (此条未测试)
JZOJ 3508. 【NOIP2013模拟11.5B组】好元素
3508. [NOIP2013模拟11.5B组]好元素(good) (File IO): input:good.in output:good.out Time Limits: 2000 ms Mem ...
python3 练习题100例（七）
题目七:将一个列表的数据复制到另一个列表中. #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ 题目七:将一个列表的数 ...
web开发框架Flask学习二
jinja2模板规范在当前项目中创建一个文件为templates的文件夹,将其设置为模板文件夹,新建的html为模板页面, 在视图函数中使用render_template(".html的文 ...
DFS：HDU1518-Square（剪枝较多的DFS）
题目: Square Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
PAT basic 1086
1086 就不告诉你 (15 分) 做作业的时候,邻座的小盆友问你:“五乘以七等于多少?”你应该不失礼貌地围笑着告诉他:“五十三.”本题就要求你,对任何一对给定的正整数,倒着输出它们的乘积. 输入格式 ...