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上去。

接下来是步骤：

  1. 第一步： 创建一个文件夹并创建一个html文件 比如：index.html.
  2. 当如你可以选择你自己的编辑器，我就用VSCode。
  4. 第二步：引入Vue库
  5. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  6. 当然了你可以直接下载Vue的js文件，推荐你直接用上面的cdn即可。
  8. 第三步：创建一个Div，给它一个id，比如：app
  10. 第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。

最终的代码如下：

  1. <!DOCTYPE html> <!--第一步：创建文件夹及html文件-->
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Vue入门之Helloworld</title>
  6.   <!--第二步：引入Vue库-->
  7.   <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10.   <!--第三步:创建一个Div-->
  11.   <div id="app">
  12.     <!--Vue的模板的绑定数据的方法， 类似于很多其他前端的模板，可以用两对花括号进行绑定Vue中的数据对象的属性 -->
  13.     {{ message }}
  14.   </div>
  16.   <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
  17.   <script>
  18.     var app = new Vue({         // 创建Vue对象。Vue的核心对象。
  19.       el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
  20.       data: {                   // data: 是Vue对象中绑定的数据
  21.         message: 'Hello Vue!'   // message 自定义的数据
  22.       }
  23.     });
  24.   </script>
  25. </body>
  26. </html>

最终的结果就是：

  1. 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. windows cmd窗口提示“telnet”命令不能内部或外部命令，也不是可运行的程序

    windows cmd窗口提示“telnet”命令不能内部或外部命令,也不是可运行的程序 原因:C:\Windows\System32目录下没有telnet.exe,path系统变量的值包含了C:\W ...

  2. [转]cximage双缓冲绘图 .

    1.起因 本来是想用gdi绘图的,但是一想到用gdi+libpng,还要自己处理一些比如alpha的效果之类的巨麻烦(而且涉及到处理每一个像素点的计算,一般都很耗时),我对自己处理像素点的能力一直持有 ...

  3. 全网最详细的Windows系统里Oracle 11g R2 Client客户端（64bit）安装后的初步使用（图文详解）

    不多说,直接上干货! 前期博客 全网最详细的Windows系统里Oracle 11g R2 Client(64bit)的下载与安装(图文详解) 命令行方式测试安装是否成功 1)   打开服务(cmd— ...

  4. tomcat配置说明，配置不用访问工程名

    # 配置项目访问不用输入项目名称 # [重要]亲测 <Host>中的 appBass="" 一定不能带目录,必须为空,因为启动tomcat会启动appBass下面的所有 ...

  5. 「每日一码」a&b赋值问题

    每日一码 将每天看到的优秀的代码或者特别的实现,记录下来 a&b赋值问题 2019-2-18 var a = {n: 1}; var b = a; a.x = a = {n: 2}; Q&am ...

  6. Entity Framework 6.x 学习之 - 创建带连接表的实体模型 with Database First

    一.Modeling a Many-to-Many Relationship with No Payload 1. 创建数据库表 CREATE TABLE [Album] ( , ), ) COLLA ...

  7. DOS在这里

    转自: http://blog.csdn.net/rheostat/article/details/8043835 在右键菜单中添加Dos快捷通道-dos在这里 在右键菜单中添加 Dos 窗体 不用每 ...

  8. docker搭建rabbitmq

    Docker部署rabbitmq 1.     准备docker环境: # yum  -y  install  docker # docker ps @如果有输出 CONTAINER ID   IMA ...

  9. Python模板库Mako的用法

    官网地址:http://www.makotemplates.org/ 文档地址:http://docs.makotemplates.org/ 中文文档基本用法地址:http://www.open-op ...

  10. 在iframe窗体内 获取父级的元素；；在父窗口中获取iframe中的元素

    在iframe中获取父窗口的元素 $(‘#父窗口中的元素ID’, parent.document).click(); 在父窗口中获取iframe中的元素 $(“#iframe的ID”).content ...