Vue介绍

vue

vue是前端开发框架，用于降低UI复杂度

完整学习vue：html+css、JavaScript、css3、HTML5、第三方库、网络通信、ES6+、webpack、模块化、包管理器、css预编译期

vue特点

渐进式
响应式
组件化

vue开发工具及常用插件

开发工具：Visual Studio Code

常用插件

Auto Rename Tag：自动改变结束标签

Live Server：自动搭建本地服务器

Prettier-Code formatter：代码美化

Vetur：vue组件格式化支持

vscode-icons：美化文件图标

ES6知识补充

速写属性

速写方法

var person={name:"zhangsan",age:18}
//传统字符串拼接
var str1="name is "+person.name+"\n age is "+person.age;
//es6字符串拼接
var str2=`name is ${person.name}
 age is ${person.age}`

箭头函数

注入

配置对象中的部分内容会被提取到vue实例中：data、methods

该过程称为注入

注入的目的两个：

（1）完成数据响应式

vue2.0通过Object.defineProperty方法完成了数据响应式，vue3.0通过Class Proxy完成的数据响应式

（2）绑定this

vue实例

通过new Vue({…})创建头像

配置对象中的部分内容会被提取到vue实例中：

data
props
methods
computed

模板内容

静态内容
差值，mustache语法
指令

v-html:绑定元素的innerHTML

v-bind：属性名：绑定属性

v-on:事件名：绑定事件

v-if 判断是否需要渲染

v-show 判断袁术是否需要显示

v-for 循环生成元素

v-bind:key 重新渲染时元素的对比，通常与v-for配合使用

v-model 双向绑定

配置对象

1 data：对象

2 template：字符串，配置模板

3 el：配置挂载区域

4 methods 配置方法

5 computed 配置计算属性

计算属性和方法的区别：

1计算属性使用时，是当成属性使用，而方法是需要调用的

2 计算属性会进行缓存，如果依赖不变，直接使用缓存结果，不会重新计算

3 计算属性可以当成属性赋值

箭头函数

任何可以书写匿名函数的位置均可以书写箭头函数

箭头函数将会绑定this为函数书写位置的this值

模块化

没有模块化的世界：全局变量污染、难以管理的依赖

常见的模块化标准：commonjs、ES6 Module、AMD、CMD、UMD

组件概念

常见模块化标准：ES6 Module、 CommonJS

将一个页面中区域功能细分，而一个区域成为以个组件，每个组件包含：

功能（JS代码）
内容（模板代码）
样式（CSS代码）

组件开发

组件是根据一个普通的配置对象创建的，所以要开发一个组件，只需要写一个配置对象即可：

var myComp={
    data(){
        return {
            
        }
    },
    computed:{
        
    },
    methods:{
        
    },
    template:
}

脚手框架

淘宝源：npm config set registry http://registry.npm.taobao.org

安装vue-cli：npm install -g @vue/cli

vue-cli的使用：

在终端中进入某个目录，通过

1	`vue create 工程名`

创建工程

安装依赖：

1 2	`cd 工程名 npm i`

vue-cli继承前端技术：

webpack

babel 兼容性

eslint

http-proxy-middleware

typescript

css pre-prosessor

css module..

插件安装

live server

vetur

可以快速生成

vue学习基础介绍