Vue官网：

https://cn.vuejs.org/v2/guide/forms.html#基础用法

【入门系列】

(一)  http://www.cnblogs.com/gdsblog/p/7804785.html

(二)   http://www.cnblogs.com/gdsblog/p/7804770.html

(三)   http://www.cnblogs.com/gdsblog/p/7804758.html

（四） http://www.cnblogs.com/gdsblog/p/7804758.html

（五） http://www.cnblogs.com/gdsblog/p/7804686.html

【本文转自】

　　http://www.cnblogs.com/fly_dragon

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

Github地址：源码下载

Vue.js入门系列（一）的更多相关文章

  1. Vue.js入门系列教程（二）

    过滤器:filter 全局过滤器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. Vue.js入门系列教程（一）

    基本的Vue代码结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  3. Vue.js入门系列教程（三）

    序言

  4. vue 快速入门 系列 —— 虚拟 DOM

    其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...

  5. vue 快速入门 系列 —— 初步认识 vue

    其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...

  6. vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [基本实现] 在 初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中 ...

  7. vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...

  8. vue 快速入门 系列 —— vue 的基础应用（上）

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  9. vue 快速入门 系列 —— vue 的基础应用（下）

    其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...

随机推荐

  1. Python获取二维数组的行列数

    import numpy as np x = np.array([[1,2,5],[2,3,5],[3,4,5],[2,3,6]]) # 输出数组的行和列数 print x.shape # (4, 3 ...

  2. (转)Python中的上下文管理器和Tornado对其的巧妙应用

    原文:https://www.binss.me/blog/the-context-manager-of-python-and-the-applications-in-tornado/ 上下文是什么? ...

  3. 全网最详细的Windows系统里PLSQL Developer 32bit的下载与安装过程（图文详解）

    不多说,直接上干货! 注意的是: 本地若没有安装Oracle服务端,Oracle server服务端32位,是远程连接,因此本地配置PLSQL Developer32位. PLSQL Develope ...

  4. 如何用R来处理数据表的长宽转换（图文详解）

    不多说,直接上干货! 很多地方都需用到这个知识点,比如Tableau里.   通常可以采取如python 和 r来作为数据处理的前期. Tableau学习系列之Tableau如何通过数据透视表方式读取 ...

  5. php -- 配置与安装

    1.php与apache安装路径 2.安装Apache服务 httpd -k install 开启关闭重启服务 http -k start/stop/restart 3.php.ini-develop ...

  6. Google CodeJam 2016 round3-A.Teaching Assistant

    题目描述: 原题是纯英文,大意是:你每天可以选择一门课去学习,选题和提交答案.题目为Coding或者Jamming.选的题目如果和老师选的一致,提交答案也匹配,最后可以得10分,若选题不一致只能得5分 ...

  7. CCF 201509-3 模版生成系统

    试题编号: 201509-3 试题名称: 模板生成系统 时间限制: 1.0s 内存限制: 256.0MB 问题描述 成成最近在搭建一个网站,其中一些页面的部分内容来自数据库中不同的数据记录,但是页面的 ...

  8. 前端组件化Polymer入门教程(2)——Hello world

    本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素 组件页 <link rel="import" href="../polymer- ...

  9. elk-nginx输出json格式的日志

    把Nginx日志的格式输出成JSON格式展示在Kibana面板,生产环境中基本都是这么使用. 1, 配置nginx 主要修改nginx的访问日志格式,这里定义成json格式,以便后面logstash更 ...

  10. spring boot 与 自定义interceptor

    前面学习过过滤器, 但是过滤器是针对servlet的, 用在springmvc和spring boot里面, 功能上, 感觉并不是很好用. 那这里来学习一下拦截器. 一. 拦截器的执行顺序 1. 目录 ...