当前位置: 首页>后端>正文

vue2

一、Vue核心

模板语法

1.插值语法:
功能: 用于解析标签体内容
语法: {{xxx}} ,xxxx 会作为js表达式解析
2.指令语法:
功能: 解析标签属性、解析标签体内容、绑定事件
Vue 中有有很多的指令,v-bind 举个例子

数据绑定

1.单向数据绑定:
语法:v-bind:href = "xxx" 或简写为 :href
特点:数据只能从 data 流向页面
2.双向数据绑定
语法:v-model:value="xxx" 或简写为v-model="xxx"
特点:数据不仅能从 data 流向页面,还能从页面流向 data

MVVM模型

  1. M:模型(Model) :对应 data 中的数据

  2. V:视图(View) :模板

  3. VM:视图模型(ViewModel) : Vue 实例对象

    vue2,第1张

事件处理

1.绑定监听

  • v-on:xxx = "fun"
  • @xxx = "fun"
  • @xxx = "fun(参数)"
  • 默认事件形参:event
  • 隐含属性对象 $event
    2.事件修饰符
  • .prevent : 阻止事件的默认行为 event.preventDefault()
  • .stop : 停止事件冒泡event.stopPropagation()
  1. 按键修饰符
  • keycode:操作的是某个keycode值的键
  • keyName:操作的是某个按键名的键

计算属性与监视

1.计算属性-computed

  • 要显示的数据不存在,要通过计算得来。
  • 在 computed 对象中定义计算属性。
  • 在页面中使用{{方法名}}来显示计算的结果。
    2.监视属性-watch
  • 通过 vm 对象的$watch()或 watch 配置来监视指定的属性
  • 当属性变化时, 回调函数自动调用, 在函数内部进行计算

class与style绑定

在应用界面中, 某个(些)元素的样式是变化的, class/style 绑定就是专门用来实现动态样式效果的技术
1.class绑定:

  • :class='xxx'
  • 表达式是字符串: 'classA'
  • 表达式是对象: {classA:isA, classB: isB
  • 表达式是数组: ['classA', 'classB']

2.style绑定:

  • :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  • 其中 activeColor/fontSize 是 data 属性

条件渲染

1.条件渲染指令:

  • v-if v-else
  • v-show

2.比较v-if 与 v-show
如果需要频繁切换 v-show 较好,当条件不成立时, v-if 的所有子节点不会解析(项目中使用

列表渲染

遍历数组: v-for / index
遍历对象: v-for / key

过滤器

功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 是产生新的对应的数据

自定义指令

  • 注册全局指令:
    Vue.directive('my-directive', function(el, binding){el.innerHTLM = binding,value.toupperCase()})

  • 注册局部指令:
    directives:{}

  • 使用指令:
    v-my-directive = 'xxx'

Vue 实例生命周期

  • 初始化显示:
    beforeCreate()
    created()
    beforeMount()
    mounted()

  • 更新状态:this.xxx=value
    beforeUpdate()
    updated()

  • 销毁vue实例:vm.$destory()
    beforeDestory()
    destoryed()

二、vue组件化编程

模块与组件

  • 模块:
    向外提供特定功能的js程序,一般就是一个js文件

  • 组件
    用来实现局部功能效果的代码集合(html/css/js/image...)

  • 非单文件组件:
    模板编写没有提示
    没有构建过程, 无法将 ES6 转换成 ES5
    不支持组件的 CSS
    真正开发中几乎不用

单文件组件

  • 模板页面
    template
  • js模块对象
    script
  • 样式
    style

基本使用:
引入组件、映射成标签、使用组件标签

三、使用Vue脚手架

Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。
全局安装 npm install -g @vue/cli
创建项目 vue create xxxx
启动项目 npm run serve

  • 模板项目的结构

    vue2,第2张

ref与props

  • ref
    作用:用于给节点打标识
    读取方式:this.$refs.xxxx

  • props
    作用:用于父组件给子组件传递数据
    读取方式:
    只指定名称:
    props: ['name', 'age', 'setName']
    指定名称和类型:
    props: {
    name: String, age: Number, setNmae: Function
    }
    指定名称/类型/必要性/默认值
    props: {
    name: {type: String, required: true, default:xxx}, }

混入:

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

插件:

Vue 插件是一个包含 install 方法的对象
通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令

Vue中的自定义事件

  • 绑定事件监听
    @method
    或者 refs.xxx.$on("method",this.method)

  • 触发事件
    this.$emit('method',data)

  • Vue 原型对象上包含事件处理的方法

  1. $on(eventName, listener): 绑定自定义事件监听
  2. $emit(eventName, data): 分发自定义事件
  3. $off(eventName): 解绑自定义事件监听
  4. $once(eventName, listener): 绑定事件监听, 但只能处理一次

全局事件总线

  • 所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象

  • Vue.prototype.[图片上传失败...(image-8e9536-1653963322386)]

    bus 这个属性对象

  • Vue.prototype.[图片上传失败...(image-89aab5-1653963322386)]

    bus 这个属性对象

  • 指定事件总线对象
    new Vue({
    beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作
    Vue.prototype.[图片上传失败...(image-77e986-1653963322386)]

    mount('#root')
    绑定
    this.[图片上传失败...(image-7ace7-1653963322386)]

    on('deleteTodo', this.deleteTo
    分发
    this.[图片上传失败...(image-735826-1653963322386)]

    emit('deleteTodo', this.index
    解绑
    this.[图片上传失败...(image-c1022d-1653963322386)]

    emit('deleteTodo', this.index

消息订阅与发布

它包含以下操作:
(1) 订阅消息 --对应绑定事件监听
(2) 发布消息 --分发事件
(3) 取消消息订阅 --解绑事件监听

过度与动画

操作 css 的 trasition 或 animation
vue 会给目标元素添加/移除特定的 class
过渡的相关类名:

  1. xxx-enter-active: 指定显示的 transition
  2. xxx-leave-active: 指定隐藏的 transition
  3. xxx-enter/xxx-leave-to: 指定隐藏时的样式

四、Vue中的ajax

解决开发环境 Ajax 跨域问题

使用代理服务器

vue 项目中常用的 2 个 Ajax 库

  • axios
  • vue-resource

slot 插槽

父组件向子组件传递带数据的标签,当一个组件有不确定的结构时, 就需要使用
slot 技术,注意:插槽内容是在父组件中编译后, 再传递给子组件的。

  1. 默认插槽
  2. 命名插槽
  3. 作用域插槽

五、vuex

概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应
用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方
式,且适用于任意组件间通信。

Vuex 工作原理图

vue2,第3张

state

是vuex管理的状态对象,他应该是唯一的

actions

值为一个对象,包含多个响应用户动作的回调函数
通过 commit( )来触发 mutation 中函数的调用, 间接更新 state
如何触发 actions 中的回调?
在组件中使用: $store.dispatch('对应的 action 回调名') 触发
可以包含异步代码(定时器, ajax 等)

mutations

值是一个对象,包含多个直接更新 state 的方法
谁能调用 mutations 中的方法?如何调用?
在 action 中使用:commit('对应的 mutations 方法名') 触发
mutations 中方法的特点:不能写异步代码、只能单纯的操作 state

getters

值为一个对象,包含多个用于返回数据的函数
如何使用?—— $store.getters.xxx

modules

  1. 包含多个 module
  2. 一个 module 是一个 store 的配置对象
  3. 与一个组件(包含有共享数据)对应

六、vue-router

vue 的一个插件库,专门用来实现 SPA 应用

路由的理解

  • 什么是路由?
  1. 一个路由就是一组映射关系(key - value)
  2. key 为路径, value 可能是 function 或 component
  • 路由分类
    后端路由:
  1. 理解:value 是 function, 用于处理客户端提交的请求。
  2. 工作过程:服务器接收到一个请求时, 根据请求路径找到匹配的函数
    来处理请求, 返回响应数据。
    前端路由:
  3. 理解:value 是 component,用于展示页面内容。
  4. 工作过程:当浏览器的路径改变时, 对应的组件就会显示。

编写使用路由的 3 步

  1. 定义路由组件
  2. 注册路由
  3. 使用路由

https://www.xamrdz.com/backend/3k41941014.html

相关文章: