Vue总结

Vue知识点总结

1.基本的使用

1.1基本概念

Vue的核心：

1. 数据的双向绑定
2. 组件化开发

MVVM：

https://blog.csdn.net/chengqiuming/article/details/106794252

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。ViewModel是连接View和Model的中间件。

• ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。
• ViewModel能够监听到视图的变化，并能够通知数据发生变化。

Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定。

1.2基本指令

在页面上使用数据，可以使用插值表达式{{ data }}。

<h2>{{message}}</h2>

v-html : 显示数据，会解析标签元素。
v-text : 显示数据，不会解析标签元素。
v-pre : 显示原始数据。
v-once : 只绑定一次数据。
v-on : 监听事件，不传参数时默认传event，可以显示传$event
v-bind : 给属性绑定值，要区分变量和字符串的写法。
v-if : 判断是否显示元素，删除作用。搭配v-else
v-show : 判断是否显示元素，隐藏作用。
v-for : 遍历数组，对象，注意要加:key防止元素复用。
v-model : 双向绑定，表单常用。

1.3修饰符

.stop : 阻止冒泡事件。
.prevent : 阻止默认动作。

.trim : 表单去空格。
.number : 输入框输入数字。
.lazy : 懒加载。

1.4绑定样式

class绑定：对象语法，数组语法

<p :class="{类名:boolean}">绑定：{{message}}</p>
<p :class="['blueColor','bigsize']">数组字符串：{{message}}</p>

style绑定：对象语法，数组语法

<p :style="{属性名:属性值}">{{message}}</p>
<p :style="[backcolor,fontnum]">{{message}}</p>

1.5表单使用

v-model : 原理

<input type = "text" :value="message" @input="message = $event.target.value">

v-radio : 单按钮
v-checkbox : 单选框为Boolean，复选框为选中的值。
v-select : 单选，多选。

2.组件化

2.1组件的注册和使用

全局和局部注册。

//全局注册
Vue.component('组件名',{vue对象}) 

//局部注册
components:{
	cpn
}

2.2父子组件

在组件中注册子组件，在vue中注册父组件即可。Vue实例为root组件。
父传子：使用props
子传父：使用$emit触发事件
子传子：自定义事件

const eventBus = new Vue() // 暴露一个vue实例
eventBus.$emit('msg-bus',this.msg)
eventBus.$on('msg-bus', (children1Msg) => {
	console.log("lili get msg")
})

2.3插槽

<slot></slot>
具名插槽：

<cpn>
    <span slot="left">替换左边的</span>
</cpn>

<template id="cpn">
    <div>
        <slot name="left">左边</slot>
        <slot name="center">中间</slot>
        <slot name="right">右边</slot>
    </div>
</template>

3webpack

webpack是一个现代的JavaScript应用的静态模块打包工具。

3.1webpack的配置

配置在webpack.config.js 或 分开的js文件中。有一个出口入口。
package.json中定义启动命令

3.2loader的使用

webpack处理我们写的js代码，但是css，图片或高版本的ES6语法转为ES5语法不支持。
需要给webpack扩展对应的loader。css-loader,style-loader, file-loader ,url-loader 等

3.3webpack中配置Vue

runtime-only和runtime-compiler的区别。
el和template区别。

3.4plugin的使用

plugin是什么？

• plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
• webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

loader和plugin区别？

• loader主要用于转换某些类型的模块，它是一个转换器。
• plugin是插件，它是对webpack本身的扩展，是一个扩展器。

3.5搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

4vue-cli

vue-cli3及以上版本搭建的vue项目实现零配置。
vue-cli2搭建的项目存在build和config目录，提供显示配置。

5vue-router

5.1vue-router基本使用

前端路由：页面改变url，不会向服务器请求新的资源。SPA ：单页面富应用。

• HASH方式
  添加锚点：location.hash = '/profile'
• History方式

history.pushState()
history.replaceState()

具体使用：

<router-link to="/home">home</router-link>
<router-view/>

5.2懒加载

const Home = () => import('../components/Home')

5.3参数传递

params的类型:

• 配置路由格式: /router/:id
• 传递的方式: 在path后面跟上对应的值
• 传递后形成的路径: /router/123, /router/abc

query的类型:

• 配置路由格式: /router, 也就是普通配置
• 传递的方式: 对象中使用query的key作为传递方式
• 传递后形成的路径: /router?id=123, /router?id=abc

//1.path
  {
    /*动态路由，获取App传来的值*/
    path: '/user/:userId',
    component: User
  }
//2.query
<router-link :to="{path:'/profile',query:{id:123,name:'lisi',age:'18岁'}}">profile</router-link>

  computed:{
    user(){
      /*
      this.$route 当前活跃的路由
      */
      return this.$route.query
    }
  }

5.4钩子函数

vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.

6vuex

6.1State

保存基础的共享数据。

6.2Getters

相当于计算属性。

6.3Mutations

提供更改State的同步方法。

6.4Action

提供更改State的异步方法。

6.5Modules

分模块。

7axios

axios返回的是一个Promise，所以可以使用链式编程，直接返回。

全局使用：

axios(config)
axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])

创建实例，针对不同的数据来源使用。
抽出基础的配置。
使用拦截器对请求和响应进行拦截。

7.1POST/JSON

axios({
    headers: {
      'Content-Type': 'application/json'
    },
    transformRequest: [function(data) {
      data = JSON.stringify(data)
      return data
    }],
    url: '/test/add',
    method: 'post',
    params: {},
    data: {
      'name': params.name,                      //传的参数
      'jobId': params.jobId,
      'department': params.department,
      'phone': params.phone,
      'position ': params.position,
      'permis': params.permis,
      'entryTime': params.entryTime
    }
  })

7.1GET

axios.defaults.baseURL = 'https://www.baidu.com:80'
axios.defaults.timeout = 10000

axios({
   url: 'http://123.123.123.123:8888/category'
})