写在前面的话：

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

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

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。

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>初识vue入门第一课</title>
  7.   <!-- 按照官方文档，引入开发环境的vue.js，准确的版本为 v2.6.10 -->
  8.   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. </head>
  10. <body>
  11. 　　
  12. </body>
  13. </html>

3.创建第一个vue实例

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

  1. var vm = new Vue({
  2.  
  3. });

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

4.DOM-el配置项

#el配置项的数据类型

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

#基本语法

  1. var vm = new Vue({
  2.  
  3.   el:'css选择器' | HTMLElement,
  4.  
  5. });

#作用

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

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

#示例

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

  1. <!-- index.html -->
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.   <meta charset="utf-8">
  7.   <title>初识vue入门第一课</title>
  8.   <!-- 按照官方文档，引入开发环境的vue.js，准确的版本为 v2.6.10 -->
  9.   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10. </head>
  11. <body>
  12.   <div id="box">
  13.   </div>
  14.   <script type="text/javascript">
  15.     var vm = new Vue({
  16.       el: '#box'
  17.     });
  18.  
  19.     //在构造函数外部访问vue挂载点dom节点
  20.     var vueEle = vm.$el;
  21.     console.log(vueEle);
  22.   </script>
  23. </body>
  24. </html>

#打印结果

5.数据-data配置项

#data配置项的数据类型

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

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

#基本语法

  1. var vm = new Vue({
  2.   data: {
  3.     属性名: 属性值 
  4.   },
  5. });

#作用

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

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

#示例

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>初识vue入门第一课</title>
  7.   <!-- 按照官方文档，引入开发环境的vue.js，准确的版本为 v2.6.10 -->
  8.   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. </head>
  10. <body>
  11.   <div id="box">
  12.  
  13.   </div>
  14.   <script type="text/javascript">
  15.     var vm = new Vue({
  16.       el: '#box',
  17.       data:{
  18.         name: 'todo',
  19.         age: 20,
  20.       }
  21.     });
  22.     //在vue构造函数外部，可以使用vm.$data访问数据
  23.     var name = vm.$data.name;
  24.     console.log(name);   // 'todo'
  25.  
  26.     var age = vm.$data.age;
  27.     console.log(age);   // 20
  28.   </script>
  29. </body>
  30. </html>

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

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

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

#基本语法

  1. {{ 变量名 }}

#示例

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>初识vue入门第一课</title>
  7.   <!-- 按照官方文档，引入开发环境的vue.js，准确的版本为 v2.6.10 -->
  8.   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. </head>
  10. <body>
  11.   <div id="box">
  12.     <!-- 使用双花括号将vue中的数据以文本的形式展示 -->
  13.     <h1>{{name}}</h1>
  14.     <h1>{{age}}</h1>
  15.   </div>
  16.   <script type="text/javascript">
  17.     var vm = new Vue({
  18.       el: '#box',
  19.       data:{
  20.         name: 'todo',
  21.         age: 20,
  22.       }
  23.  
  24.     });
  25.   </script>
  26. </body>
  27. </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. JavaScript系列：高级函数篇

    前言: 本篇主要是介绍 JavaScript使用函数的高级方法,函数是JavaSCript中最有趣的部分,利用Function特性可以编写出很多非常有意思的代码,本篇主要包括:函数回调,高阶函数以及函 ...

  2. Vue/React圆环进度条

    数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...

  3. java中的Collection和Collections

    Collection是集合类的上级接口,继承他的接口主要有Set和List. Collections是针对集合类的一个帮助类,他提供一系列静态方法实现对各种集合的搜索.排序.线程安全化等操作.

  4. A-02 梯度下降法

    目录 梯度下降法 一.梯度下降法详解 1.1 梯度 1.2 梯度下降法和梯度上升法 1.3 梯度下降 1.4 相关概念 1.4.1 步长 1.4.2 假设函数 1.4.3 目标函数 二.梯度下降法流程 ...

  5. atomic_inc(&v)原子操作简述

    atomic_inc(&v)对变量v用锁定总线的单指令进行不可分解的"原子"级增量操作,避免v的值由于中断或多处理器同时操作造成不确定状态. 原子操作 所谓原子操作,就是该 ...

  6. pycharm 安装第三方包步骤

    pycharm 安装第三方包步骤: 完成.

  7. Linux上的Nginx上设置支持PHP的解析

    当前的运行环境为,PHP7.2.2以 FastCGI 模式运行,默认端口为:9000,Nginx1.15.6 打开nginx配置文件 vi /usr/local/nginx/conf/nginx.co ...

  8. Oracle VM VirtualBOX桥接网卡

    1.在VirtualBOX设置中的网络菜单,连接方式选择桥接网卡 2.启动系统,设置静态IP sudo vim /etc/network/interfaces auto enp0s3         ...

  9. 一个“Hello World”理解JVM运行时数据区

    先上一张JVM体系结构图: 1)运行时数据区:经过编译生成的字节码文件(class文件),由class loader(类加载子系统)加载后交给执行引擎执行.在执行引擎执行的过程中产生的数据会存储在一块 ...

  10. java猜数游戏

    java随机数的产生 int number=(int)(Math.random()*10+1) Math.random()*n //n个随机数,从0开始 do{}while循环 //猜数,1到10的随 ...