Vue.js从入门到“卸载” Vue教程

本文参考vue官网文档和尚硅谷Vue网络课程，加入了一些自己的理解，如果觉得我说得麻烦也可以直接去vue官网看文档和尚硅谷视频

第一章 Vue介绍

1.1 什么是Vue

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（照搬vue官网，官网说的很全可以直接去查文档）

1.2 Vue 的特点

1. 遵循 MVVM 模式

2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

1.3 Vue常用的周边库

1. vue-cli: vue 脚手架

2. vue-resource

3. axios

4. element-ui: 基于 vue 的 UI 组件库

5. vue-router: 路由

6. vuex: 状态管理

第二章 Vue起步

2.1Vue的安装

进入Vue官网 介绍 — Vue.js

 点击安装会跳转到这个页面

 初学建议安装开发版本

开发版本和生产版本的区别：

开发版本容量会大一些，但是会附带警告和调试模式；

生产版本容量会小一些，一般都是调试完代码之后再使用生产版本；

 我们学习的过程中建议使用开发版本

下载完成之后我们会得到一个vue.js文件

 这个文件就是Vue框架了

如果想使用vue的话我们需要把这个文件引入到我们的文件中（引入方法如下）

<!-- 引入Vue -->
<script src="../js/vue.js"></script>

这样引入Vue文件之后我们就可以进行Vue操作了

2.2 Vue插值表达式的使用

（此节我们正式学习Vue的操作和语法）

插值表达式

功能：

1.用于解析标签体的内容

2.语法：语法: {{xxx}} ，xxxx 会作为 js 表达式解析

定义：使用{{ }}的形式将数据显示在页面中

<div>{{msg}}</div>

我们先在body中创建一个容器如下图

<!-- 准备好一个容器 -->
<div id="demo">
        <h1>Hello，{{name}}，{{address}}</h1>
    </div>

（此容器为模板）

{{name}}和{{address}}为插值

插值语法可以让我们把任意数值或文字传给{{name}}和{{address}}使他们在页面中显示

在进行传值之前我们需要创建一个Vue实例

如下代码为创建Vue实例的方法

//创建Vue实例
new Vue({
})

Vue实例中我们需要设置几个属性

//创建Vue实例
new Vue({
      el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
      data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
           name: 'LMMMH',
           address: '哈尔滨'
            }
})

如上代码为我们需要的Vue实例和属性

其中有两个类似对象的属性

el属性

el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。

（其用法我们可以理解为原生Js中的document.querySelector('#demo')）

这里的el有两种写法，我们以后会说到

data属性

data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。

若想要把自己定义的值传到{{}}中我们需要在data:{}中设置我们想要传输的值

例：我们想要让{{name}}变成LMMMMH在页面中显示那我们在设置模板的同时还要在data{}中创建一个name:''把值设置为LMMMMH

详情为如下代码

//创建Vue实例
new Vue({
      el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
      data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
           name: 'LMMMH',
           address: '哈尔滨'
            }
})

 这里的data{}也有第二中写法我们同样以后会说到

这样设置好我们打开页面就会发现原本{{name}}和{{address}}的位置已经变成我们设置好的值了

此专栏持续更新

如有说的不清楚的地方欢迎指正