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. (转)Linux PS 详解

    原文:https://cn.aliyun.com/jiaocheng/162702.html 摘要:原文地址:http://www.cnblogs.com/wangkangluo1/archive/2 ...

  2. js便签笔记（7）——style、currentStyle、getComputedStyle区别介绍【转载】

    转者语: 今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式. 因为elem.style.width只能获取elem的style属性里 ...

  3. MyCat配置文件详解--server.xml

    server.xml包含mycat的系统配置信息,它有两个标签,分别是user和system,掌握system标签的各项配置属性是mycat调优的关键. <?xml version=" ...

  4. solr(二) : 整合ik-analyzer

    一. 问题: 在使用solr时, 分词器解析中文的时候, 是一个一个字解析的. 这并不是我们想要的结果. 而在lucene中, 使用的中文分词器是 IKAnalyzer. 那么在solr里面, 是不是 ...

  5. Yarn和Mesos：资源管理调度平台

    目前得分布式系统中,对于资源管理都采用动态资源划分来取代静态资源划分.它有如下好处: 集群资源利用率高 增加数据共享能力,可以多种计算框架公用一份分布式存储数据. 资源管理抽象模型 概念模型 常见得资 ...

  6. new Thread与线程创建

    概要:new Thread 并不意味着已经创建了一个线程,只能说明创建一个类的对象实例而已.而真正创建线程的是start()方法,此方法将调用本地方法start0()创建本地线程,而Thread的ru ...

  7. -bash: warning: setlocale: LC_CTYPE: cannot change locale (zh_US.UTF-8): No such file or directory -bash: warning: setlocale: LC_COLLATE:

    前几天登录服务器发现出现了这些个警告,一直没时间去处理他,今天难得有空,处理一下并记录下来,希望可以帮助到有需要的朋友. 警告信息如下: Last :: from 10.0.0.1 -bash: wa ...

  8. angular ng-repeat元素swiper无法滑动问题解决

    前言 angular中ng-repeat元素swiper无法滑动,angular与swiper冲突. 1.问题 在项目中,我需要利用ng-repeat循环li,比如一个nav导航条,在加入swiper ...

  9. Storm1.0.6环境搭建

    1.配置 三台服务器搭建Storm集群:CentOS7One,CentOS7Two,CentOS7Three 在CentOS7One机器上配置 1.1 zookeeper配置 目录:/opt/zook ...

  10. 网络之XML解析－原生

    Json和XML都属于字符串,用于跨平台,前面总结了下Json,下面看下XML. XML定义这些百度比我说的清,不再啰嗦,直接代码,我喜欢把东西都放进注释. 一.首先看下要解析的XML内容 <? ...