Vue基础系列（一）——Vue入坑第一篇

时间 2019-11-07

标签 vue 基础系列一篇繁體版

原文原文链接

写在前面的话：javascript

文章是我的学习过程当中的总结，为方便之后回头在学习。css

文章中会参考官方文档和其余的一些文章，示例均为亲自编写和实践，如有写的不对的地方欢迎你们和我一块儿交流。html

VUE基础系列目录

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

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

一.前言

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

二.搭建vue开发环境

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

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

三.开始使用vue

1.建立项目目录

2.在html中引入vue.js

#在index.html引入vue.js

　　在html中直接引入vue.js也有两种方式，一种是直接将文件下载到本地，一种是引用cdn上面的文件。此处咱们使用cnd的方式引入vue.js。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>
　　
</body>
</html>

3.建立第一个vue实例

　　建立vue实例须要经过构造函数建立的。ide

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构造函数外部，可使用访问数据 var name = vm.$data.name; console.log(name); // 'todo'

    var age = vm.$data.age; console.log(age); // 20
  </script>
</body>
</html>vm.$data

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基础系列（一）——Vue入坑第一篇

VUE基础系列目录

一.前言

二.搭建vue开发环境

三.开始使用vue

1.建立项目目录

2.在html中引入vue.js

#在index.html引入vue.js

3.建立第一个vue实例

4.DOM-el配置项

#el配置项的数据类型

#基本语法

#做用

#示例

5.数据-data配置项

#data配置项的数据类型

#基本语法

#做用

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

#基本语法

四.总结回顾

要加油鸭