vue知识总结

最新推荐文章于 2022-11-23 23:40:22 发布

一个卖女孩的小火柴

最新推荐文章于 2022-11-23 23:40:22 发布

阅读量207

点赞数

分类专栏：前端文章标签： vue

原文链接：https://blog.csdn.net/weixin_48179599/article/details/106877390

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue脚手架学习总结，vue参数、基础指令、生命周期函数、组件、插槽（持续更新）

在html中vue如何使用

在script的src属性中引入vue.js文件点击下载vue.js
创建一个id为app的div容器
在script标签里，添加以下内容
vue参数
el 指定模板
data 数据存储
methods 方法中心
computed 计算属性,从现有数据计算出新的数据并返回

watch 监听，用于监听一个数据的变化，并执行回调函数
filters 过滤（管道）
components 注册组件
directives 自定义指令
vue 生命周期钩子函数
创建前后
1.beforeCreate
2.created（获取this）
2.挂载前后
beforeMount
mounted（获取dom）
3.更新前后
beforeUpdate
updated
卸载前后
beforeDestroy
destroyed（移除监听和事件）

vue常用指令

v-text 替换标签中的文本内容
v-html 替换标签中的文本内容（可以渲染html标签）
v-if 判断是否显示与隐藏（此指令是直接移除dom元素）
v-show 判断是否显示与隐藏（此指令是使用css中display:none隐藏）
v-model 数据的双向绑定
修饰符
.nubmer 转换为数字
.lazy 延迟更新
ref 获取dom元素，通过this.$refs.name使用dom元素
事件修饰符
.once 被修饰的事件只执行一次
.prevent阻止默认行为
.stop阻止冒泡行为

按键修饰符
@keyup.enter="" 当按下enter时触发

@keyup.esc="" 当按下esc时触发

@keyup.right="" 当按下→时触发

@keyup.left="" 当按下←时触发

@keyup.top="" 当按下↑时触发

@keyup.bottom="" 当按下↓时触发

vue组件
全局组件（所有vue实例对象指定的模板都可以使用）
全局组件可以省去注册组件的步骤

定义：var Counter = {template:"<div>组件</div>"}
使用：<Counter></Counter>
局部组件（谁注册，谁使用）

定义：var Counter = {template:"<div>组件</div>"}
注册：components:{Counter}
使用：<Counter></Counter>
<counter></counter>
<counter-Item></counter-Item>
组件的数据传递
父向子

组件的插槽：
默认插槽：
具名插槽：

组件内slot标签加上name属性，在使用具名插槽的时候，加上slot="str"，就会出现在name="str"的具名插槽的位置。

vue动画

<transition /> 包裹变化的元素
<transition-group />

动画组

name 动画名称
动画名称+enter-active （使用vue动画，会自动自动添加这些类）
动画名称+leave-active（使用vue动画，会自动自动添加这些类）
move-class 正在移动的class

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<script src="js/vue.js"></script>
<style>
@keyframes fadeIn{
from{ transform: translate(0,-30px);}
to{ transform: translate(0,0);}
}
@keyframes fadeOut{
0%{
opacity:1;
}
100%{
opacity:0;
}
}
.fade-enter-active{
animation: fadeIn ease .6s;
}
.fade-leave-active{
position:absolute;
animation: fadeOut ease 1s;
}
.move{
transition:all ease .6s;
}
.item{
line-height: 44px;
border-bottom: 1px solid #f0f0f0;
}
</style>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="list.unshift($event.target.value);$event.target.value=''">
<transition-group tag="div" name="fade" move-class="move">
<p class="item" v-for="(item,index) in list" :key="item">
{{item}}
<button @click="list.splice(index,1)">×</button>
</p>
</transition-group>

</div>
<script>
new Vue({
el:"#app",
data:{
list:["html","vue","angular"]
},
})
</script>
</body>
</html>

关键帧动画
定义：

使用：
在css中添加animation:name 缓动函数时长

文件结构
学习一个技术之前，一定要先对她有所了解，下面是文件目录的图解说明

node_modules ：项目依赖文件的下载地址（下载的插件都在这个文件夹内）
public ：项目的源文件和公用文件存放的位置
src ：项目源文件，大部分操作都在这个文件夹内
.gitignore ：里面配置过的文件，在git上传仓库的时候会忽略
babel.config.js ：ES6转ES5配置文件
package.json ：项目包的配置文件，可在其查看/修改项目启动命令
package-lock.json ：包管理锁定文件（防止依赖错误）
README.md ：项目说明文件
src文件夹图解

assets ：静态资源目录
components ：组件目录
router ：路由配置
store ：全局状态管理器（全局数据仓库）
views ：视图页面
App.vue ：主组件，最终页面都会渲染在这里
main.js ：页面的配置文件，可设置全局配置
vue路由
<router-link />：切换地址（浏览器的地址）
to="/home"： <router-link />的属性，跳转到/home页面
<router-view />：显示路由页面对应的组件
路由配置：在/src/router/idnex.js 文件中配置
作用：用于连接router 组件页面，当浏览器地址匹配到当前路由的path，对应的component,就会替换router-view的内容

path：路由对应的地址
name：路由的名称，在做路由跳转的时候可以使用name
component：地址对应的组件（显示在router-view中的组件）

子路由
简单的来说，就是路由页面里面在嵌套一个路由，并且嵌套的路由只能在当前路由里面显示

路由定义界面：

页面代码：

路由传参
路由传参就是，在进行路由切换页面的时候，传递参数过去

params：

query查询参数：

两者可以同时使用，但params必须在query前面即<router-link to="/catagory/abc?type='zzl'&age='18'">

$router路由页面跳转
go(n)：n为-1则返回上一个页面，为1则前进一个页面，为0则刷新页面
forward()：前进一个页面
back()：返回上一个页面
push(path)：跳转到path页面（path为路由地址）
replace(path)：跳转到path页面，与上面不同的是。replace不留当前页面的历史记录，即跳转后不能返回当前页面

一个卖女孩的小火柴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue知识总结

vue脚手架学习总结，vue参数、基础指令、生命周期函数、组件、插槽（持续更新）在html中vue如何使用在script的src属性中引入vue.js文件点击下载vue.js 创建一个id为app的div容器在script标签里，添加以下内容 vue参数 el指定模板 data数据存储 methods方法中心 computed计算属性,从现有数据计算出新的数据并返回 watch监听，用于监听一个数据的变化，并执行回调函数 filters过滤...
复制链接

扫一扫