01-Vue.js入门系列

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地址：源码下载

01-Vue.js入门系列的更多相关文章

Vue.js入门系列（一）
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
Vue.js入门系列教程（二）
过滤器:filter 全局过滤器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
Vue.js入门系列教程（一）
基本的Vue代码结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
Vue.js入门系列教程（三）
序言
vue 快速入门系列 —— Vue(自身) 项目结构
其他章节请看: vue 快速入门系列 Vue(自身) 项目结构前面我们已经陆续研究了 vue 的核心原理:数据侦测.模板和虚拟 DOM,都是偏底层的.本篇将和大家一起来看一下 vue 自身这个项目 ...
vue 快速入门系列 —— 虚拟 DOM
其他章节请看: vue 快速入门系列虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...
vue 快速入门系列 —— 初步认识 vue
其他章节请看: vue 快速入门系列初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...
vue 快速入门系列 —— 侦测数据的变化 - [基本实现]
其他章节请看: vue 快速入门系列侦测数据的变化 - [基本实现] 在初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中 ...
vue 快速入门系列 —— 侦测数据的变化 - [vue 源码分析]
其他章节请看: vue 快速入门系列侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...
vue 快速入门系列 —— vue 的基础应用（上）
其他章节请看: vue 快速入门系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

随机推荐

如何判断ScrollView滑动方形
1/判断滚动视图左右滚动 { CGFloat startContentOffsetX;//滚动开始的坐标 CGFloat willEndContentOffsetX; //滚动即将停止的坐标 CGFl ...
html中使用js实现内容过长时部分
有时数据内容太长时我们并不希望其全部显示出来,因为这样可能会导致用于显示这些内容的标签被撑开影响美观. 这时就希望能够实现默认只显示部分内容,在鼠标放上去的时候再将全部的内容显示出来. 这里提供一个简 ...
工作当中实际运用（2）——js原生实现全选/反选
老规矩直接上代码代码中详细注释: function checkAll(){ var alls=document.getElementById('tab-stp').getElementsByTa ...
PAT/简单模拟习题集（一）
B1001.害死人不偿命的(3n+1)猜想 (15) Description: 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉 ...
对非线程安全类List<T>的一些总结
一个项目的一个功能点,需要从接口接受返回数据,并对返回的数据进行一些业务处理,处理完成之后,添加到一个List<T>中,然后在View中循环这个List<T>,展示所有的数据. ...
Linux及文件系统基本介绍
Linux及文件系统基本介绍 1 互联网行业现状在服务器端市场: 超级计算机 2014年11月的数据显示前500系统中的485个系统都在运行着 Linux 的发布系统,而仅仅只有一台运行着 Wi ...
用1、2、2、3、4、5这六个数字，用java写一个main函数，打印出所有不同的排列，如：512234、412345等，要求："4"不能在第三位，"3"与"5"不能相连。
最近在看算法,看到这个题,觉得挺经典的,收起. 分析: 1 .把问题归结为图结构的遍历问题.实际上6个数字就是六个结点,把六个结点连接成无向连通图,对于每一个结点求这个图形的遍历路径,所有结点的遍历路 ...
SQLServer 随机生成指定范围的日期
一个分页的问题,DTCms3.0中,分页是根据时间分页的,如果当添加时间(add_time)都是同一个数值时,不管点击第几页,显示的数据都是同一个的内容,于是就有了需要把同一个时间改指定随机日期的功能 ...
jQuery 绑定事件到动态创建的元素上
在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...
[每天默写一个算法]KMP
[每天默写一个算法]KMP 作业要求:默写String的KMP算法. KMP是经典的字符串匹配算法.复杂度为O(n+m) public static class StringKMP { /// < ...