写在前面的话：

文章是个人学习过程中的总结，为方便以后回头在学习。

文章中会参考官方文档和其他的一些文章，示例均为亲自编写和实践，若有写的不对的地方欢迎大家和我一起交流。

VUE基础系列目录

《VUE基础系列（一）——VUE入坑第一篇》

《VUE基础系列（二）——VUE中的methods属性》

《VUE基础系列（三）——VUE模板中的数据绑定语法》

《VUE基础系列（四）——VUE中的指令（上）》

《VUE基础系列（五）——VUE中的指令（中）》

一.前言

本篇作为vue入门的一篇总结，目地在使用vue一些简单的特性去打开vue的学习之门。

二.搭建vue开发环境

　　搭建vue的开发环境一般有两种方式，一种是使用vue-cli脚手架，这个需要具备Node的一些基础知识；第二种方式是在我们编写的html页面中引入vue.js文件，就可以使用vue了。后续vue基础的学习会用使用第二种方式搭建vue的开发环境。

　　注意：后面引入的vue文件都是基于vue.2x版本的，大多数的知识点和特性的介绍都是参考官方文档。官方文档地址：https://vuejs.bootcss.com/v2/guide/

三.开始使用vue

1.创建项目目录

2.在html中引入vue.js

#在index.html引入vue.js

　　在html中直接引入vue.js也有两种方式，一种是直接将文件下载到本地，一种是引用cdn上面的文件。此处我们使用cnd的方式引入vue.js。

<!-- index.html -->

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>初识vue入门第一课</title>

  <!-- 按照官方文档，引入开发环境的vue.js，准确的版本为 v2.6.10 -->

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

　　

</body>

</html>

3.创建第一个vue实例

　　创建vue实例需要通过构造函数创建的。

var vm = new Vue({

});

　　使用构造函数创建vue实例时，我们可以传入一个包含多个键值对的字典对象，完整的键值对配置可以参考官方文档。后面的部分我们只总结了最基础几个的配置项。

4.DOM-el配置项

#el配置项的数据类型

　　el配置项的值可以是两种类型，一种是字符串，一种是HTMLElement。当是字符串时，它表示一个css选择器；当是HTMLElement时，它表示文档中的某个元素。

#基本语法

var vm = new Vue({

  el:'css选择器' | HTMLElement,

});

#作用

　　它主要的作用是将vue实例挂载到文档中的DOM节点上，挂载完成后的DOM节点就是一个vue容器，在这个容器里我们就可以使用vue的一些特性；

　　备注：在vue构造函数外部，可以使用vm.$el去访问挂载的这个DOM节点。

#示例

下面我们写一个示例体验一下。

<!-- index.html -->

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>初识vue入门第一课</title>

  <!-- 按照官方文档，引入开发环境的vue.js，准确的版本为 v2.6.10 -->

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

  <div id="box">

  </div>

  <script type="text/javascript">

    var vm = new Vue({

      el: '#box'

    });

    //在构造函数外部访问vue挂载点dom节点

    var vueEle = vm.$el;

    console.log(vueEle);

  </script>

</body>

</html>

#打印结果

5.数据-data配置项

#data配置项的数据类型

　　data的数据类型同样是两种：javascript原生的Object类型或者一个返回原生对象的函数。

　　函数类型一般用于在定义组件的时候，因为组件是会被复用的，这样每一个复用组件的实例都会拥有这个data数据的副本，而不会互相影响。

#基本语法

var vm = new Vue({

  data: {

    属性名: 属性值 

  },

});

#作用

　　它主要是给vue示例提供数据支撑。

　　备注：在vue构造函数外部，可以使用vm.$data访问这个数据。

#示例

<!-- index.html -->

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>初识vue入门第一课</title>

  <!-- 按照官方文档，引入开发环境的vue.js，准确的版本为 v2.6.10 -->

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

  <div id="box">

  </div>

  <script type="text/javascript">

    var vm = new Vue({

      el: '#box',

      data:{

        name: 'todo',

        age: 20,

      }

    });

    //在vue构造函数外部，可以使用vm.$data访问数据

    var name = vm.$data.name;

    console.log(name);   // 'todo'

    var age = vm.$data.age;

    console.log(age);   // 20

  </script>

</body>

</html>

6.vue模板语法渲染数据-文本插值

　　上面我们介绍了如何在vue实例中定义数据，那么如何将vue实例中的数据展示到我们的页面中呢，这就需要使用vue的模板渲染语法，模板渲染语法包含很多种形式，这里我们只讲双花括号形式的文本插值。

　　双花括号的文本插值法，就是将vue中的数据以文本的形式解析到html中。在html中直接访问vue实例里data对象中的属性即可获取到对应的值。而且当data对象中的属性值发生变化，模板中插入的值也会自动发生变化。

#基本语法

{{ 变量名 }}

#示例

<!-- index.html -->

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>初识vue入门第一课</title>

  <!-- 按照官方文档，引入开发环境的vue.js，准确的版本为 v2.6.10 -->

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

  <div id="box">

    <!-- 使用双花括号将vue中的数据以文本的形式展示 -->

    <h1>{{name}}</h1>

    <h1>{{age}}</h1>

  </div>

  <script type="text/javascript">

    var vm = new Vue({

      el: '#box',

      data:{

        name: 'todo',

        age: 20,

      }

    });

  </script>

</body>

</html>

#界面展示结果

四.总结回顾

　　到此vue入坑第一篇学习结束，这里总结一下前面讲过的内容

  • 使用构造函数的方式可以创建一个vue示例
  • el属性将vue挂载到DOM节点上
  • data属性给vue示例提供数据
  • 双花括号可以访问实例中data对象的属性

要加油鸭

Vue入坑第一篇的更多相关文章

  1. VueRouter爬坑第一篇-简单实践

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  2. Vue入坑教程（二）——项目结构详情介绍

    之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...

  3. Vue入坑日记: day - 01

    前言 最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery ...

  4. web前端入坑第二篇：web前端到底怎么学？干货资料！ 【转】

    http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...

  5. netty入坑第一步:了解netty和编写简单的Echo服务器和客户端

    早期java API通过原生socket产生所谓的"blocking",大致过程是这样 这种的特点是每次只能处理一个请求,如果要实现多个请求并行,就还要分配一个新的线程来给每个客户 ...

  6. vue学习指南：第十一篇(详细) - Vue的 路由 第一篇 ( router )

    一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...

  7. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  8. Vue学习【第一篇】：Vue初识与指令

    什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...

  9. Vue入坑教程（一）——搭建vue-cli脚手架

    1. Vue简介 详细内容可以参考官网Vue.js 1)兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMA ...

随机推荐

  1. _self.$scopedSlots.default is not a function报错

    问题: 当同一页面有elementUI的多个table表格时,如果用到v-if来动态展示表格,切换时出现如下报错: 原因: 是因为表格是element-ui通过循环产生的,而vue在dom重新渲染时有 ...

  2. 从零开始入门 K8s | 应用存储和持久化数据卷：存储快照与拓扑调度

    作者 | 至天 阿里巴巴高级研发工程师 一.基本知识 存储快照产生背景 在使用存储时,为了提高数据操作的容错性,我们通常有需要对线上数据进行 snapshot ,以及能快速 restore 的能力.另 ...

  3. centos7 安装 docker

    一.概念 1.Docker引擎 (docker engine) 也称docker daemon,也称为docker服务,只要启动服务,就可以通过docker client发送相关docker命名,与d ...

  4. QR 码详解（上）

    关于二维码,我查了下资料,现在基本都在用日本的 QR 码,PDF417以及汉信码日常基本看不到.原因在于各方面来说,的确是 QR 码最为优秀.所以我准备写一篇介绍 QR 码的文章,如果是写书,可能不方 ...

  5. 【linux】jdk安装及环境变量配置

    登录linux后,切换目录到 /usr/local cd /user/local 在/usr/local目录新建文件夹java用于存放jdk文件 mkdir java 在文件夹java中下载jdk文件 ...

  6. 【Visual Studio】关于vs 打开网站时报错 配置iis express失败 无法访问IIS元数据库...

    关于vs 打开网站时报错 配置iis express失败 无法访问IIS元数据库... 我安装了vs2015,一开始创建项目,网站都没问题,有一次突然打开项目时报错,瞬间懵逼,我啥都没干啊!!! 网上 ...

  7. (4)一起来看下mybatis框架的缓存原理吧

    本文是作者原创,版权归作者所有.若要转载,请注明出处.本文只贴我觉得比较重要的源码,其他不重要非关键的就不贴了 我们知道.使用缓存可以更快的获取数据,避免频繁直接查询数据库,节省资源. MyBatis ...

  8. SDN网络IPv6组播机制支持实时视频业务海量用户扩展

    以 OpenFlow 技术为核心的软件定义网络(SDN)框架具有集中控制的功能能够自己感知网络拓扑的变化,在细粒度的路径选择.接入控制.负载均衡方面有着天然的优势,为 IPv6 组播功能的实现提供了好 ...

  9. 02-20 kd树(鸢尾花分类)

    [TOC] 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:https://www.cnblogs.com/nickchen121/ ...

  10. 项目代码管理工具Git的总结

    在项目的开发中,代码的同步管理很重要,团队的几个人可以通过免费的github管理自己的开源项目代码,高效方便.下面说说,开发中经常用到的git指令操作,基于github平台. 0.配置提交者的账户和邮 ...