前端-Vue知识点总结(持续更新)

Vue 概述

1、what

是一个渐进式的构建用户界面的js框架

2、where

小到的简单的表单处理,大到复杂的数据操作比较频繁的单页面应用程序

3、why

1.中文文档很完善,很方便阅读社区活跃
2.学习曲线比较缓和
3.体积小
4.基于组件化的开发方式,增强复用协作
5.代码的可读性、可维护性得到了提高
6.各类UI库支持如 elementUI 快速搭建可观性强的前端界面 如后台管理系统 有丰富的成型的组件

4、how

工作方式:可以通过丰富的指令扩展模板,可以通过各种各样的插件来增强功能

搭建环境:
方式1
     全局安装 vue-cli
    $ npm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
    # 安装依赖,走你
    $ cd my-project
    $ npm install
    $ npm run dev
方式2:
    直接引入对应的js文件

Vue中基础知识

1、双花括号

mustache(胡子)/interpolation(插值表达式)

语法:
// <any>{{表达式}}</any>
作用:
将表达式执行的结果 输出当调用元素的innerHTML中;还可以将数据绑定到视图

2、指令-循环指令

基本语法1:
// <any v-for="tmp in array"></any>
基本语法2:
// <any v-for="(value,index) in array"></any>

作用:在遍历array这个集合时,将临时变量保存在tmp中,创建多个any标签

3、指令-选择指令

语法:
  <any v-if="表达式"></any>
  <any v-else-if="表达式"></any>
  <any v-else="表达式"></any>
作用:
  根据表达式执行结果的真假,来决定是否要将当前的这个元素 挂载到DOM树

4、指令-事件绑定

语法:
    <any v-on:eventName="handleEvent"></any>
作用:
    给指定的元素 将handleEvent的方法绑定给指定eventName事件

5、指令-属性绑定

基本语法:
//
补充,支持简写:

作用:
将表达式执行的结果 绑定 到当前元素的myProp属性

 // 动态样式绑定
   <p :style="{backgroundColor:myBGColor}">动态样式绑定</p>

 // 动态样式类绑定
  <h1 :class="{myRed:false}">动态样式类的绑定</h1>

6、指令-双向数据绑定

方向1:数据绑定到视图
方向2:将视图中(表单元素)用户操作的结果绑定到数据

基本语法:
  <表单元素 v-model="变量">
  </表单元素>

7、自定义指令

全局注册

Vue.directive('test', {
    //指令选项
})

局部注册

var app = new Vue({
    el: '#app',
    directieve: {
    test: {
        //指令选项
    }
   }})

钩子函数

    bind: 只调用一次,在绑定到元素时调用,通常是在绑定时执行一次初始化的动作。
    inserted: 被绑定元素插入父节点时调用,如上面例子中使用的,元素在初始化时自动获取焦点。
    update: 被绑定元素所在的模板更新是调用,不论绑定值是否有变化。
    componentUpdated:被绑定元素所在的模板完成一次更新周期时调用。
    unbing: 只调用一次,指令与元素解绑时调用。

常用属性

1、watch

1. 表单元素的双向数据绑定

v-model=”myValue”

2.监听

    watch:{
    myValue:function(newValue,oldValue){

    }}

2、computed

计算属于是用于在模板中,搞定复杂的业务逻辑,因为有依赖缓存。

1.指定计算属性

    computed:{
      myHandle:function(){
       return 数据
      }
    }

2.调用

    <any>{{myHandle}}</any>

vue组件化 及组件间的通信

组件:组件就是可被反复使用的,带有特定功能的视图

所谓的组件化,就像玩积木一样,把封装的组件进行复用,把积木(组件)拼接在一起,构成一个复杂的页面应用程序。

组件树就是由各个组件构成的一种数据结构,它存在的意义是为了帮梳理应用程序

1、组件的创建

全局组件
Vue.component(‘my-com’,{
template: <h2>it is a header</h2>
})
局部组件
new Vue({
components:{
‘my-footer’:{
template:’’
}
}
})

2、组件使用

作为普通的标签去使用
<my-com></my-com>

3、注意事项

组件间的通信

1、父与子通信 (props down)

1.发送
    <son myName='zhangsan'>
    </son>
2.接受
    到son组件:
    Vue.component('son',{
      props:['myName'],
      template:`
       <p>{{myName}}</p>
      `
    })

2、子与父通信 (events up)

 1.绑定
methods:{
 handleEvent:function(msg){}
}
<son @customEvent="handleEvent"></son>
2.触发子组件内部:
// this.$emit(‘customEvent’,100);

3、ref(reference 引用/参考 外号)

帮助在父组件中 得到子组件中的数据、方法。
1.指定ref属性

    2.根据ref得到子组件实例
    this.$refs.mySon

4、$parent
this.$parent得到父组件的实例

5、兄弟组件通信
    1.var bus = new Vue();
    2.接收方
    bus.$on('eventName',function(msg){})
    3.发送方
    bus.$emit('eventName',123);

6、vux共享组件状态

Vue 生命周期

四个阶段:
create 准备工作 (数据的初始化。。。)
mount 挂载前后针对元素进行操作
update 数据发生变化,
destroy 清理工作 (关闭定时器、集合清空..)

beforeCreate/created
beforeMount/mounted
beforeUpdate/updated
beforeDestroy/destroyed

Vue 推荐的请求 axios

1.axios的get方法

export const getAjax= function (getUrl,getAjaxData) {
return axios.get(getUrl, {
params: {
'getAjaxDataObj1': getAjaxData.obj1,//obj1为getAjaxData的一个属性
'getAjaxDataObj2': getAjaxData.obj2
}
})
}
2.axios的post方法

export const postAjax= function (getUrl,postAjaxData) {
return axios.get(postUrl, {

'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性
'postAjaxDataObj2': postAjaxData.obj2
})
}

3.axios的拦截器
主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为[]可以转化为0

1.请求拦截:将当前城市信息放入请求头中

axios.interceptors.request.use(config => {
config.headers.cityCode = window.sessionStorage.cityCode
//jsCookie.get('cityCode')
return config
},

2.响应拦截:处理reponse的结果

axios.interceptors.response.use((response) =>{
let data = response.data
if(response.request.responseType === 'arraybuffer'&&!data.length){
reponse.date=0
}
})
上一篇

打造自己的js库