（Vue）vue整体

最新推荐文章于 2024-04-29 23:14:15 发布

Earnest～

最新推荐文章于 2024-04-29 23:14:15 发布

阅读量548

点赞数 3

分类专栏： Conclusion(总结) 文章标签： vue

本文链接：https://blog.csdn.net/qq_43763494/article/details/112859991

版权

Conclusion(总结) 专栏收录该内容

33 篇文章 21 订阅

订阅专栏

整体

第 1 部分 Vue.js 基础入门

1.1 初识 Vue

1.2 搭建 Vue 开发环境

1.2.7 Hello World 案例

1.3 webpack 打包工具

1.3.2 webpack 简单使用
- 打包成 test.js
- ```
webpack example.js -o test.js
```
  - 这是打包之前
  - 这是打包之后

第 2 部分 Vue 开发基础上

2.1 Vue 实例（实例配置选项）

2.1.2 el 唯一根标签
2.1.3 data 初始数据
2.1.4 methods 定义方法
2.1.5 computed 计算属性
- totalPrice 在 data 中没有，是个计算属性
2.1.6 watch 状态监听
- 就很神奇，
  cityName 是个 data，用 v-model 双向绑定了一下
2.1.7 filters 过滤器
- toUpcase 是 filters 中的方法，
- 借助 v-bind 对 div 属性进行操作，dataId 是个 data

2.2 Vue 数据绑定

2.2.1 绑定样式
- 绑定内联样式
  - 对应 data
- 绑定样式类
  
  绑定于 data
2.2.2 内置指令
- v-model
- msg 也可以是组件中的 data 里的
- v-text
- v-html
- v-bind
- v-on
- v-for
- v-if
  v-show
2.2.3 学生列表案例

2.3 Vue 事件

2.3.1 事件监听
- v-on 监听 DOM 事件
- 为 v-on 添加按键修饰符来监听按键，submit ()
2.3.2 事件修饰符全是加在 v-on / @后的
- .stop 阻止事件冒泡
- .prevent 阻止默认事件行为（链接的默认事件行为是跳转？）
- .capture 捕获：反向冒泡
- .self 可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行
- .once 只执行一次

2.4 Vue 组件

2.4.1 什么是组件
- 就是 my-component 标签（Vue.component('comname', {template: '',})方法）
2.4.2 局部注册组件
- 局部组件（定义一个对象{template: '',}，后在 components: {comName: com1} 中声明即可【注意小驼峰】）
2.4.3 template 模板
- 定义模板，直接引用即可 template: '#tmp1'（不要放在 div 中…与 script 同级的）
2.4.4 组件之间的数据传递
- props，道具：接受父组件定义的数据【父传子】
  从外到内的单向数据流传递
- $emit，触发父组件中定义的事件【子传父】
  - 父组件中定义的 transContent 方法
2.4.5 组件切换
- 通过 v-if 控制组件切换
- 通过 is 属性控制组件切换，相当于<comName></comName>

2.5 Vue 的生命周期

按顺序来的

2.5.2 实例创建
- Vue 实例创建 beforeCreate created
2.5.3 页面挂载
- beforeMount mounted 挂载点 el 把 Vue 实例挂上去
2.5.4 数据更新
- 更新 beforeUpdate updated
  - $refs 属性：获取相应的 DOM 元素
2.5.5 实例销毁
- 销毁之后无法操作 DOM 元素（虽然还能获取，但点击更新按钮已经没反应了）

第 3 部分 Vue 开发基础下

3.1 全局 API

3.1.1 Vue.directive
- 自定义内置指令 Vue.directive
  inserted 钩子函数，el：当前元素，binding：指令信息
- 用自定义指令 v-focus
3.1.2 Vue.use
- 1.自定义插件对象 let，2. 写其 install 方法，3. 安装插件 use
  - install 方法的两个参数，参数 1 是 Vue 构造器，参数 2 是一个可选的配置对象
3.1.3 Vue.extend
- extend，为 Vue 构造器创建一个子类
3.1.4 Vue.set
- 向响应式对象中添加一个属性，确保其也是响应式的（obj 本就是响应式的，在 obj 中再加一个响应式的）
  - Vue 核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，数据改变后，通知视图也自动更新
3.1.5 Vue.mixin
- myOption 是个自定义属性

3.2 实例属性

3.2.1 vm.$props

接收上级组件向下级传递的数据
3.2.2 vm.$options

Vue 实例初始化时传的自定义选项
3.2.3 vm.$el

访问根 DOM 元素
3.2.4 vm.$children

当前实例的直接子组件
3.2.5 vm.$root

组件树的根 Vue 实例
3.2.6 vm.$slots

插槽就是定义在组件内部的 template 模板
- 就是可以把组件内容显示出来
具名插槽，加一个 name 属性
- 只要不是具名的，就归为默认
- 在控制台查看插槽内容
3.2.7 vm.$attrs
- 组件属性

3.3 全局配置

3.3.1 productionTip
- 关闭提示信息
  - vue.js:9055 还在
3.3.2 silent
- 忽略日志、警告
3.3.3 devtools
- 关闭 devtools 调试

3.4 组件进阶

3.4.1 mixins
- 将 mixin 对象引入组件中
  - data 优先 vue 实例的
  - 钩子函数 mixin 优先
3.4.2 render

操作虚拟 DOM，比 template 创建 HTML 可编程性更强一些
3.4.3 createElement

createElement 函数返回的是一个 VNode 虚拟结点，虚拟 DOM 是 Vue 组件树建立起来的 VNode 树的称呼
- 参数1：HTML标签名或组件选项对象
- 参数2：可选传一个数据对象
- 参数3：子集

第 4 章 Vue 过渡和动画

4.1 过渡和动画基础

4.1.2 transition 组件
- 把需要添加过渡的 div 放入，name 设置前缀，默认前缀是 v
  - 初始状态不能少
4.1.3 自定义类名
- 通过属性来设置（自定义类名结合 animate.css 动画库）
- appear 初始渲染动画（每次刷新页面）
4.1.4 使用@keyframes 创建 CSS 动画
- 动画和过渡的区别就在于，动画可以改中间内容，一帧一帧的改

传送门：第4章 Vue 过渡和动画

第 5 章 Vue 路由

从零开始简单的路由

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

传送门：第 5 章 Vue 路由

$\color{blue}{End.}$

Earnest～

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
（Vue）vue整体

整体第 1 部分 Vue.js 基础入门1.1 初识 Vue1.2 搭建 Vue 开发环境1.3 webpack 打包工具第 2 部分 Vue 开发基础上==2.1 Vue 实例（实例配置选项）==2.2 Vue 数据绑定==2.3 Vue 事件====2.4 Vue 组件====2.5 Vue 的生命周期==第 3 部分 Vue 开发基础下==3.1 全局 API====3.2 实例属性==3.3 全局配置==3.4 组件进阶==第 4 章 Vue 过渡和动画4.1
复制链接

扫一扫