value笔记

最新推荐文章于 2024-07-16 12:22:44 发布

知名男模zzq

最新推荐文章于 2024-07-16 12:22:44 发布

阅读量305

点赞数

文章标签：笔记

本文链接：https://blog.csdn.net/A56562379/article/details/131461667

版权

1.Vue数据绑定

1.v-bind单向数据绑定

2.v-model双向数据绑定（只能应用在表单类元素（输入类元素）简单说就是有value值上）

v-model默认收集的就是value值

2.el与data的两种写法

3.Vue中的MVVM模型

3.数据代理

4.事件的基本使用

5.时间修饰符

6.键盘事件

tab必须配合keydown去使用

7.computed计算属性

8.watch监视属性

深度监视

监听属性与计算属性的区别

9.绑定样式

Vue是什么?

渐进式javacript框架, 一套拥有自己规则的语法

Vue-cli作用以及简单使用
开箱即用
0配置webpack
babel支持
css, less支持
开发服务器支持

vue的特点

渐进式
声明式渲染
数据驱动视图 (响应式)
极少的去写DOM操作相关代码
双向绑定
组件系统
不兼容IE8及以下浏览器

vue指令 v-model 目标: 把value属性和vue数据变量, 双向绑定到一起

v-model : 是实现vue变量和表单标签value属性, 双向绑定的指令双向数据绑定数据变化 -> 视图自动同步视图变化 -> 数据自动同步语法: v-model=“vue数据变量”

总结：修饰符给事件扩展额外功能

//字符串转成数组 split("")方法 let arr = this.msg.split("") //翻转数组 arr.reverse() //数组转字符串 arr.join("")

重点复选框

面试题

1.mvvm和mvc区别是什么?

MVC: 也是一种设计模式, 组织代码的结构, 是model数据模型, view视图, Controller控制器, 在控制器这层里编写js代码, 来控制数据和视图关联 MVVM: 即Model-View-ViewModel的简写。即模型-视图-视图模型, VM是这个设计模式的核心, 连接v和m的桥梁, 内部会监听DOM事件, 监听数据对象变化来影响对方. 我们称之为数据绑定

2. Vue常用修饰符有哪些?

.prevent: 提交事件不再重载页面； .stop: 阻止单击事件冒泡； .once: 只执行一次这个事件

6. 对Vue渐进式的理解

渐进式代表的含义是：主张最少, 自底向上, 增量开发, 组件集合, 便于复用

2.过滤器

转换格式, 过滤器就是一个函数, 传入值返回处理后的值

过滤器只能用在, 插值表达式和v-bind动态属性里

语法:

Vue.filter("过滤器名", (值) => {return "返回处理后的值"})
filters: {过滤器名字: (值) => {return "返回处理后的值"}
过滤器_传参和多过滤器

语法:

：代表动态 |代表过滤器
过滤器传参: vue变量 | 过滤器(实参)
多个过滤器: vue变量 | 过滤器1 | 过滤器2

//过滤器传参 Vue.filter("reverse", (val, s) => { return val.split("").reverse().join(s) })

vue计算属性

vue计算属性-computed

语法:computed: { "计算属性名" () { return "值" } }

computed: { num(){ return this.a + this.b } }

vue计算属性-缓存

总结: 计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高

Day03

1.2_vue组件_基础使用

目标: 每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件

口诀: 哪部分标签复用, 就把哪部分封装到组件内

步骤:

创建组件 components/Pannel.vue

封装标签+样式+js - 组件都是独立的, 为了复用

<template>
<div>
 <div class="title">
   <h4>芙蓉楼送辛渐</h4>
   <span class="btn" @click="isShow = !isShow">
     {{ isShow ? "收起" : "展开" }}
   </span>
 </div>
 <div class="container" v-show="isShow">
   <p>寒雨连江夜入吴,</p>
   <p>平明送客楚山孤。</p>
   <p>洛阳亲友如相问，</p>
   <p>一片冰心在玉壶。</p>
 </div>
</div>
</template>

<script>
export default {
data() {
 return {
   isShow: false,
 };
},
};
</script>

<style scoped>
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 0 1em;
}
.title h4 {
line-height: 2;
margin: 0;
}
.container {
border: 1px solid #ccc;
padding: 0 1em;
}
.btn {
/* 鼠标改成手的形状 */
cursor: pointer;
}
</style>

全局 - 注册使用

全局入口在main.js, 在new Vue之上注册

(2) 在main.js中注册

（3）全局注册panl组件名后, 就可以当做标签在任意Vue文件中template里用

单双标签都可以或者小写加-形式, 运行后, 会把这个自定义标签当做组件解析, 使用==组件里封装的标签替换到这个位置==

局部 - 注册使用

语法:

任意vue文件中中引入, 注册, 使用

组件使用总结:

(创建)封装html+css+vue到独立的.vue文件中
(引入注册)组件文件 => 得到组件配置对象
(使用)当前页面当做标签使用

GIT

插入文件

随便输入aaaa

ESC

yy p复制

: wq

git 后端仓库创建

第一步 gitee 新建仓库

第二步创建文件夹(新建仓库会自己创建) 复制地址

右键 git-bash.exe 输入命令 git clone 地址

第三步打开idea 打开open 找到创建文件夹的地址

第四步安装gitee 插件点击setting 搜索plu 搜索gitee

第五步 add添加提交commit pull拉取 push 推送

git前段仓库创建

第一步gitee新建仓库

第二部创建文件夹(新建仓库会自己创建) 复制地址

右键 git-bash.exe 输入命令 git clone 地址

第三步打开 vscode 打开找到创建文件夹的地址中间配置点击下方设置里面的设置git.path 输入git的路径

第四步提交框里打字点击提交拉取推送

前端克隆

创建个vite 把新创建的vite里的node_moudle留下其他删掉把克隆的前端文件复制到vite里面

前段vscode实现登录注册流程

vue-router路由的使用流程

1.下载路由npm i vue-router@3

在main.js

2.导入路由 import VueRouter from 'vue-router'

3.使用路由插件

Vue.use(VueRouter)

4.创建路由规则数组

// 路由规则配置 const routes = [ { path: '/find', //默认hash值路径 name: 'Find', //重定向到/find component: Find // 浏览器url中#后的路径被改变成/find-重新匹配数组规则 }, { path: '/my', //路由路径 name: 'My', //路由名称 component: My //路由对应的组件名称 }, { path: '/friend', name: 'Friend', //路由级代码拆分 //这将为此路由生成一个单独的块（Friend.[hash].js） //其在访问路由时被延迟加载。 component: () => import('../views/Friend.vue') } ]

5.创建路由对象-传入规则

const router = createRouter({ history: createWebHashHistory(), routes })

6.路由对象抛出

export default router

（7）components换成router-view