VUE学习笔记（一）：基础操作篇

基于狂神说vue记录笔记：https://www.bilibili.com/video/BV18E411a7mC

基本介绍

在线cdn

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

JavaScript框架

• jQuery: 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8
• Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)
• React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言
• Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点
• Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能

MVVM

MVVM (Model-View-ViewModel) 是一种软件架构设计模式，源自于经典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下:

• 向上与视图层进行双向数据绑定
• 向下与Model层通过接口请求进行数据交互

Vue优势

1. 低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
2. View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
3. 可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑
4. 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计
5. 可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

Vue的运用

Vue.js就是MVVM中的 ViewModel层的实现者 ，在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者

基本语法

v-bind

绑定元素属性

语法缩写

v-if v-else

逻辑判断

v-for

遍历数据

v-on

事件绑定，可以绑定一个事件来触发一个函数

语法缩写

v-model 双向绑定

双向绑定概念

数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化

使用

你可以用v-model指令在表单 < input >、< textarea> 及**< select>** 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

注意

v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，你应该通过JavaScript在组件的data选项中声明

Vue组件

用 Vue.component() 方法注册组件

Axios通信

概念

Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，她的主要作用就是实现AJAX异步通信

• 从浏览器中创建XMLHttpRequests
• 从node.js创建http请求
• 支持Promise API [JS中链式编程]
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF (跨站请求伪造)

为什么要用Axios

Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架

使用

1、模拟Json数据：

2、html

注意

1. v-cloak解决页面闪烁问题（不会出现{ {message}}这样的信息）
2. 在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
3. 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
4. 我们在data中的数据结构必须和Ajax响应回来的数据格式匹配！

slot 内容分发

基础用法

在Vue.js中我们使用元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中

自定义分发

通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题

语法：this.$emit (‘自定义事件名’,参数)

vue-cli

概念

• vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板
• 预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速

（以下最好都是管理员操作）

环境需求

1. Node.js：http://nodejs.cn/download/ (安装就是无脑的下一步就好，安装在自己的环境目录下)
2. Git：https://git-scm.com/doenloads (镜像：https://npm.taobao.org/mirrors/git-for-windows/)

node.js安装

1、上述安装操作完成测试

1. cmd下输入node -v，查看是否能够正确打印出版本号即可！
2. cmd下输入npm -v，查看是否能够正确打印出版本号即可！

2、安装Node.js淘宝镜像加速器（cnpm）

• -g 就是全局安装 npm install cnpm -g
• 或使用如下语句解决npm速度慢的问题 npm install --registry=https://registry.npm.taobao.org

安装完成是这样的：

vue-cli安装

在命令台输入 cnpm install vue-cli -g

查看是否安装成功 vue list

vue-cli应用实例

1、创建一个空文件夹

D:\Project\vue-study

2、基于webpack模板的vue应用程序

• 首先需要进入到对应的目录：cd D:\Project\vue-study
• 初始化webpack模板：vue init webpack vue-study

3、一路选择 no 就可以

4、进入vue-study目录下，敲入：npm install（有的时候需要修复）

5、项目结构层次，运行：npm run dev

webpack

概念

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle

安装Webpack

npm install webpack -g npm install webpack-cli -g

测试：

• webpack -v
• webpack-cli -v

使用

1. 创建项目（创建一个空文件夹，用idea打开）

2. 创建一个名为modules的目录，用于放置JS模块等资源文件

3. 在modules下创建模块文件，如hello.js，用于编写JS模块相关代码

   //暴露一个方法 
   exports.sayHi = function() {
             
       document.write("
   狂神说ES6
   ") 
   }
   

4. 在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性

   //require 导入一个模块，就可以调用这个模块中的方法了
   var hello = require("./hello"); 
   hello.sayHi();
   

5. 在项目目录下创建webpack.config.js配置文件

   module.exports = {
           
       entry:"./modules/main.js", 
       output:{
           	
           filename:"./js/bundle.js"
       }
   }
   

6. 在IDEA命令台输入 webpack 命令进行打包(先试一下行不行，不行的话IDEA要设置管理员启动)

   

7. 在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件

   doctype html>
   <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>狂神说Javatitle>
       head>
       <body>
           <script src="dist/js/bundle.js">script>
       body>
   html>
   

   

vue-cli应用实例

概念

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成， 让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于Vue js过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的CSS class的链接
• HTML5 历史模式或hash模式， 在IE 9中自动降级
• 自定义的滚动行为

安装

基于第一个 vue-cli 进行测试学习； 先查看node modules中是否存在vue-router插件包。

如若没有，打开命令行工具，进入你的项目目录，输入下面命令：

npm install vue-router --save-dev

使用

1、先删除没有用的东西

2、components目录下存放我们自己编写的组件

3、定义一个Content.vue 和 Main.vue组件

4、安装路由，在src目录下，新建一个文件夹：router，专门存放路由，配置路由index.js，如下

5、在 main.js 中配置路由

6、在 App.vue 中使用路由

由于水平有限，本博客难免有不足，恳请各位大佬不吝赐教！