Vue初学

VUE

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

vue优点

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

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

vue实例对象和实例的选项

• 创建实例对象：
  var vm = new Vue({ el: #id, data:数据 , methods:方法})；
• 实例选项：

• el：指定vue实例管理的视图（标签），一般是id选择器
  不可以指定body和html
• data：数据信息
  访问方法：vm.属性名，vm.$data.属性名；
  数据响应式
• methods：方法
  this指向Vue实例，箭头函数不可以使用this
• mounted(){this.$refs;}：相当于window.onload，在vue中操作DOM元素
  给要操作的元素加ref属性，用来注册引用信息

• 术语：

• 插值表达式：{{}}，用来动态渲染数据
• 指令：v-，取代DOM操作

常用指令

• v-text,v-html:(相当于innerText,innerHTML)
  替换标签的内容
  推荐使用v-text,html会造成跨站脚本攻击
• v-if,v-show：条件渲染，根据表达式确定是否渲染该元素；本质改变display
• v-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是用来获取请求结果