VUE

库和框架：库提供API调用；框架提供完整的解决方案，符合框架规范

vue优点

大程度的减少了DOM操作适合SPA项目开发

使用 直接在页面中用script引入

vue实例对象和实例的选项

创建实例对象： var vm = new Vue({ el: #id, data:数据 , methods:方法})；实例选项： el：指定vue实例管理的视图（标签），一般是id选择器 不可以指定body和htmldata：数据信息 访问方法：vm.属性名，vm.$data.属性名； 数据响应式methods：方法 this指向Vue实例，箭头函数不可以使用thismounted(){this.$refs;}：相当于window.onload，在vue中操作DOM元素 给要操作的元素加ref属性，用来注册引用信息 术语： 插值表达式：{{}}，用来动态渲染数据指令：v-，取代DOM操作

常用指令

v-text,v-html:(相当于innerText,innerHTML) 替换标签的内容 推荐使用v-text,html会造成跨站脚本攻击v-if,v-show：条件渲染，根据表达式确定是否渲染该元素；本质改变displayv-on（简写@）： 语法：@事件名=“方法”若方法中有参数，$event为默认实参事件名+修饰符，常用.once,.prevent v-for：列表渲染，当页面出现重复标签结构 语法：v-for = “(item,index) in list”使用该指令时，建议给标签加唯一key属性 v-bind：绑定标签的任何属性，当属性不确定时 语法：v-bind:属性名=“”可简写：绑定对象，数组 v-model：绑定表单元素的value值 双向绑定v-cloak：解决加入插值表达式页面闪烁 给闪烁标签+，无值，用属性选择器在css里设置display属性v-once：标签只渲染一次

过滤器和自定义指令

过滤器：

用于处理数据格式，文本格式化 用于插值表达式和v-bind绑定属性值后的格式化，| 后面加过滤器

全局注册：

在new Vue实例之前进行全局注册，Vue.filter(名，function(v)) function中实现具体格式处理，自带参数是过滤器的调用者

局部注册：

在Vue实例对象的选项中设置，filters(){}

传参数： 可以传参，第一个参数必是调用过滤器的数据 串联使用 可以同时加多个过滤器

自定义指令

全局定义：

在new Vue之前定义，Vue.directive(‘名’,{inserted(e){}}) inserted()是自定义指令自带的，自动触发

局部定义：

在Vue实例选项中定义，directives(){}

计算属性

应用场景：数据B依赖于数据A,数据B很复杂，使用计算属性 computed:实例选项，包含函数名和带有返回值的函数。 特点：

带有返回值的函数一般依赖于data中的数据使用和data数据一样，用插值表达式当计算属性不依赖于data中数据时，第一次使用会把结果进行缓存，后面再使用，都会去第一次结果中查找

侦听属性

watch(实例选项）：去监听已经存在的属性，当检测属性发生变化时，会自动触发该属性对应的方法。 使用场景：数据发生变化时执行异步操作

组件

vue提供的全局特性 使用场景：页面有重复的标签，属性，方法时，组件进行封装 特点：

封装复用html,css,js是一个特殊的vue实例，特有选项template每用一次组件，就会有一个新的vue实例被创建，互不影响组件中的data要求必须是一个函数，并且有返回一个对象每个组件的模板有且只有一个根元素

组件定义不显示的问题： template模板中要在外套一个div标签； 定义完组件后，需要创建vue实例，el=标签名 组件注册：全局和局部，类过滤器和自定义指令 父子组件之间通信-props 子组件需要使用来自父组件的数据

来源于父组件的数据要写在新的选项props中，data中的数据只能来源于自己语法：props:[]props中的值以属性的形式出现在组件标签中，v-bind绑定的格式

过渡与动画

使用场景： 在插入、更新、移除DOM元素时，v-if条件渲染使用步骤： 给希望加过渡效果的元素的外层包裹transition组件在生成的类名中自己写过渡效果

生命周期钩子函数

vue实例总无到有，到销毁的过程会触发不同的钩子函数 最常用created,mounted

Vue-router插件

注意： 在使用时，要先引入vue，再引入vue-router； 若在一个模块化工程中使用，必须要通过Vue.use(VueRouter)明确安装路由功能

使用步骤： <router-link,to属性，设置链接<router-view,设置渲染容器组件信息实例化路由，路由配置 -在vue实例中挂载 动态路由：配置路由路径时，路径是’/:id’ 获得路由配置中的path值，$route.params.id,$route是路由配置对象 路由重定向：redirect:vue-router 的js编程式导航 this.$router.push({path;''}) ,$router是路由对象 嵌套路由：二级路由 二级路由要写在一级路由的组件模板中，渲染到页面中配置二级路由：在一级路由routes选项中，加一个children属性来配置二级路由，用法和routes一致实例化和挂载不变

Vue-cli脚手架

用于生成标准的vue项目目录，全局命令行工具

创建项目： npm install -g @vue/cli-init 桥接工具，用于桥接旧版本

vue-cli的指令名是vue

vue init webpack-simple(项目模板）heros(项目名称） cd 项目目录 npm install npm run dev 项目目录： webpack.config.json:如果有什么不能识别，在这里面更改(更改配置文件需要重启项目）src（主要写代码的地方）: main.js:程序入口文件，用来导包 App.vue:项目的根组件 assets:项目所需的静态资源

Axios

用来发送请求的库，非vue插件 既可以在浏览器端，又可以在node.js中用来发送http请求的库，支持promise,不支持jsonp。若遇到jsonp请求，可以使用jsonp插件。 跨域：8种实现方式 特点：不等待，后面的代码会继续执行

axios可以本地用script标签引入 axios语法：

get： 数据获取成功 axios.get('url').then((res)=>{const {status,data} = res； if(status===200){}})

数据获取失败

axios.get('url').catch((err)=>{}) post： axios.post('url',{要添加的数据}).then((res)=>{}) put和post类似delete和get类似

then是用来获取请求结果