Vue前端学习V2V3 JSTS笔记

最新推荐文章于 2024-04-08 09:59:59 发布

冗码一生

最新推荐文章于 2024-04-08 09:59:59 发布

阅读量861

点赞数 21

文章标签： vue.js 前端学习

本文链接：https://blog.csdn.net/weixin_43872830/article/details/135276914

版权

Vue前端框架学习V2->V3 JS->TS

Vue的提示插件安装Vue3 Snippets Vetur 快捷生成vue模板 <v+enter

**只要是箭头函数它里面的this就是向外一层查找，Vue所管理的函数写成普通函数，非vue所管理的函数例如定时器回调函数，ajax回调函数，promise回调函数等写成箭头函数那么向外层查找这个this就是vue实例
**
数据劫持如果data里面的数据属性都被遍历了一遍都有getter setter了那么修改数据就会被setter劫持来进行数据修改以及重新解析模板

标签属性动态拥有值只需要在标签属性xxx前加上:xxx

nanoid库是uuid库的基础上精简的

切记切记 v-model不能绑定从props传递过来的值即不能直接修改props上的值

改了配置需要重启服务器

**
第三方成型的css 一般建议放在assets/css下引入方式一般在App下面引入
但是如果第三方资源里面还用到了其他第三方资源就不建议放在这下面引入public公共样式在public下面建立css文件夹然后在index.html页面里面引入
**
this.obj = {…this.obj,…this.obj2} 表示通过字面量去合并对象属性位置可以随便变换相同属性的值以后面的为准

bootcdn第三方库网站

Cookie-Editor插件批量导入导出Cookie

1.渐进式
2.组件化(每一个.vue文件就是一个组件一个.vue文件里面写的就是html css js) 提高代码复用率封装性
3.声明式编码无需直接操作DOM 提高效率原来采用js是命令式编码需要循环拼接现在直接一个v-for即可
4.虚拟DOM+Diff算法复用DOM节点
JS需要掌握的
{
ES6语法规范/模块化
包管理器 npm
原型原型链
数组常用方法
axios
promise
}
https://cn.vuejs.org/

Vue2

Vue-devtools 从github下载下来编译安装然后安装google插件

删除 yarn.lock 和 node_modules
安装 yarn 工具 $ npm install yarn -g
用 yarn 安装依赖 $ yarn install
用 yarn 构建 $ yarn run build

选择 packages\shell-chrome文件夹

Vue.config

是一个对象，包含 Vue 的全局配置

productionTip 2.2.0 新增默认为true设置为 false 以阻止 vue 在启动时生成生产提示

容器DIV和Vue实例的对应关系一一对应关系

一个Vue实例只能对应一个DIV容器
一个DIV容器只能对应一个Vue实例

模板语法

插值语法 {{}}

指令语法 v-xxx

数据绑定

单向数据绑定v-bind

v-bind:value=“” 简写 :value=“”

双向数据绑定v-model

v-model:value=“” 简写 v-model=“”

Vue实例下的el和data的两种写法

el 是指定Vue所服务的容器还可以采用$mount挂在方式
data 指定数据还可以采用函数式 data:function(){} 或data(){}

注意！！！！由vue管理的函数一定不要写成()=>写成箭头函数箭头函数没有自身的this,就外部的window

MVVM(Model View ViewModel)

Model:模型数据
View:Dom视图
ViewModel:两者结合 vue里面就表示vue的实例对象里面包含DataBindings(把Model数据值绑到View上)和DOMListeners(监听View的变化把改变反馈到Model上设置新的数据值)

注意 data中的数据都出现在了vm身上数据绑定的时候所有vm上和vue原型上出现的内容都可以进行绑定
在这里插入图片描述

Object.defineProperty方法

数据代理通过一个对象代理对另一个对象中属性的操作

Vue中的数据代理

Vue实例选项里面的data 可以在浏览器Console中查看为_data 其实_data和data就是同一个对象
可以使用._data访问
在_data和vue实例里面做了一个代理 _data里面的属性 vue中都有一份使用getter获取_data对应属性值使用Setter设置属性值对_data也里面的值进行改变

事件处理v-on

v-on:可以简写为 @ 例如v-on:click可以简写为@click

事件修饰符

就是在原来事件的处理默认行为/传播行为等通过在属性后面加上.xxx来简化实现这些行为

键盘事件

按键别名

        回车  =>  enter

        删除  => delete (捕获"删除”和“退格”键)

        退出 => esc

        空格 => space

        换行 => tab （不适合用keyup事件 适合用于keydown事件）

        上 => up

        下 => down

        左 => left

        右 => right

        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
            例如CapsLock 需要使用caps-lock 即两个英文字母之间需要下划线隔开

        3.系统修饰键（用法特殊）: ctrl、alt、 shift、meta(即win键)


        (1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

        (2).配合keydown使用:正常触发事件。


        4.也可以使用keyCode去指定具体的按键（不推荐)


        5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名
        
        6.多个键也可以连用 表示多个同时按下

计算属性computed 用于data属性值的加工

监视属性watch 监视data和computed中的属性

watch和computed对比

当对于需要延迟显示等要求的场景时候使用watch合适

computed计算属性里面无法开启异步任务执行

样式绑定

条件渲染 v-show v-if v-else-if v-else template与v-if配合使用

列表渲染 v-for

v-for中 Key的原理与作用

不写key 默认使用index作为key

使用index作为v-for的key 当数据顺序打乱会发生真实dom(一旦存在输入类型的表单控件)的错乱
在虚拟dom之间会互相进行diff算法比较

v-for中数据列表过滤

Vue监视数据变化的原理

data到_data _data对data进行了重新的加工通过一个Observer对象来实现监测值的变化

Vue.set的使用

Vue.set向对象上增加新的响应式的属性可以观测到的属性
Vue实例上还有一个$set是一样的功能

Vue.set只能给data中的某一个对象增加响应式属性，但是不能给data身上添加响应式属性数据

表单数据不同类型的数据收集方式不一样

过滤器

其他内置指令 v-text v-html v-cloak v-once v-pre

自定义指令函数式对象式 directives

vue生命周期 8个 4组

Vue组件化编程

组件：css/html片段/js等内容形成一个组件，在可复用的地方直接引入即可

Vue组件的创建

非单文件组件（一个组件中包含有n个组件）

单文件组件（一个文件只包含一个组件）

.vue文件需要通过 webpack或vue的脚手架编译成浏览器可以识别的html js css等

脚手架

Vue脚手架是官方提供的标准化开发工具

npm install -g @vue/cli

OR

yarn global add @vue/cli

切到要创建项目的目录
vue create my-project

安装过程分析 babel是es6转es5相关的 eslint语法检查

OR

vue ui

然后npm run serve

脚手架创建的项目分析

babel.config.js babel的控制文件es6转es5
package.json 包管理文件
package-lock.json 包版本控制文件

src

main.js 开始入口

/*
 *整个项目入口文件 
 */

//引入vue
import Vue from 'vue'
//引入app组件 是所有组件的父组件
import App from './App.vue'

//关闭Vue的生产提示
Vue.config.productionTip = false

//创建Vue的实例对象
//$mount装载到容器
new Vue({

  //el:"#app",
  //???将App组件放入到容器中
  render: h => h(App),

}).$mount('#app')