vue脚手架学习总结，vue参数、基础指令、生命周期函数、组件、插槽（持续更新）
vue知识点，vue全家桶学习总结
本文主要编写了我在使用vue脚手架项目开发中的学习经验，还有一些就是遇到的困难和难点，我都会记录在里面。
在html中vue如何使用
- 在
script的src属性中引入vue.js文件点击下载vue.js - 创建一个id为app的
div容器 - 在
script标签里，添加以下内容
new Vue({
el:"#app", //指定模板目标
data:{
//数据内容(以对象形式)
msg:"又见面了Vue",
newMsg:"我和我的祖国",
flag:true,
title:"提示文本",
current:0
},
methods:{
//方法中心
say(){
alert("你好，Vue。")
}
},
})
如果想了解vue工程化开发，请移步到vue脚手架搭建项目
vue参数
el指定模板data数据存储methods方法中心computed计算属性,从现有数据计算出新的数据并返回
computed:{
"rmsg":function(){
return this.msg;
}
}
watch监听，用于监听一个数据的变化，并执行回调函数
watch:{
"obj":{
handler:function(nval){
},
deep:true
}
}
filters过滤（管道）
filters:{
price:(val,arg1,ag2){
return val;
}
}
components注册组件directives自定义指令
directives:{
"img":{
inserted:function(el,binding){
//el 当前指令所在的元素
//binding.value 当前元素的value值
}
}
}
vue生命周期钩子函数
- 创建前后
beforeCreatecreated（获取this）
- 挂载前后
beforeMountmounted（获取dom）
- 更新前后
beforeUpdateupdated
- 卸载前后
beforeDestroydestroyed（移除监听和事件）
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 被修饰的事件只执行一次
<button @click.once="say()">只执行一次</button>
.prevent阻止默认行为
<a href="http://www.baidu.com" @click.prevent="say()">a标签不会跳转</a>
.stop阻止冒泡行为
<div @click="say()">
<div @click.stop="once()">我执行单击，父元素不执行单击</div>
</div>
按键修饰符
@keyup.enter="" 当按下enter时触发
@keyup.esc="" 当按下esc时触发
@keyup.right="" 当按下→时触发
@keyup.left="" 当按下←时触发
@keyup.top="" 当按下↑时触发
@keyup.bottom="" 当按下↓时触发
vue组件
-
全局组件（所有vue实例对象指定的模板都可以使用）
全局组件可以省去注册组件的步骤- 定义：
var Counter = {template:"组件"} - 使用：
- 定义：
-
局部组件（谁注册，谁使用）
- 定义：
var Counter = {template:"组件"} - 注册：
components:{Counter} - 使用：
- 定义：
-
组件的数据传递
- 父向子
//父组件 <Counter :count="item"></Counter> //子组件 props:["count"] ------------------------------------------------------------------------------------------------- props:{ count:{ type:Number, default:0 } } //type:指定接受到参数的类型 //default:如果没有传参，默认为0- 子向父
//子组件 <child @click="$emit("data",'props')">子组件</child> //data是父组件监听的对象，props是子组件传过去的参数。这里传过去的是"props"字符串 //父组件 <parent @data="console.log($event)">父组件</parent> //data 是子组件声明的对象 //$event是固定值，里面是子组件传过来的数据，这里是"props"字符串 //当@data里的值是方法是，那么形参必须是$event才能接收到参数
组件的插槽：
默认插槽：
//html
<Parent>
<p>插槽内容</p>
</Parent>
//component
<Parent>
<slot></slot>
</Parent>
具名插槽：
//html
<Parent>
<p slot="str">具名插槽</p>
</Parent>
//component
<Parent>
<div>组件内容</div>
<slot name="str"></slot>
</Parent>
组件内slot标签加上name属性，在使用具名插槽的时候，加上slot="str"，就会出现在name="str"的具名插槽的位置。
vue动画
name动画名称- 动画名称+
enter-active（使用vue动画，会自动自动添加这些类） - 动画名称+
leave-active（使用vue动画，会自动自动添加这些类） move-class正在移动的class
动画产生的class
//以下是css样式选择器
v-enter{
//从什么状态进入
}
v-enter-to{
//进入到什么状态
}
v-enter-active{
//进入的过程
}
v-leave{
//从什么状态离开
}
v-leave-to{
//离开到什么状态
}
v-leave-active{
//离开的过程
}
代码演示：
<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>
关键帧动画
定义：
@keyframes name{
from{
} //从什么状态
to{
} //到什么状态
}
//使用百分比
@keyframes name{
0%{
} //从什么状态
//中间可添加多个进度 25% 50% 75%...
100%{
} //到什么状态
}
使用：
在css中添加animation:name 缓动函数 时长
下面是vue脚手架的学习笔记
vue-cli脚手架
vue脚手架工程化开发，无需引入
vue.js文件，并且可以安装各种流行插件，以便于项目的开发，下面我带大家详细了解vue-cli脚手架。
文件结构
学习一个技术之前，一定要先对她有所了解，下面是文件目录的图解说明
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路由
to="/home"：
路由配置：在/src/router/idnex.js 文件中配置
作用：用于连接router 组件页面，当浏览器地址匹配到当前路由的path，对应的component,就会替换router-view的内容
path：路由对应的地址name：路由的名称，在做路由跳转的时候可以使用namecomponent：地址对应的组件（显示在router-view中的组件）
{
path: '/category', //浏览器的hash值
name: 'Category', //路由名称
component: Category //对应的组件
},
子路由
简单的来说，就是路由页面里面在嵌套一个路由，并且嵌套的路由只能在当前路由里面显示
路由定义界面：
{
path: '/detail',
name: 'Detail',
component: Detail,
children:[
{
path:"arg",
component:Arg
},
{
path:"com",
component:Com
},
]
},
页面代码：
<div class="detail">
<h2>详情页面h2>
<router-link to="/detail/arg">参数router-link>|<router-link to="/detail/com">评论router-link>
<hr>
<router-view>router-view>
div>
路由传参
路由传参就是，在进行路由切换页面的时候，传递参数过去
params：
//router路由的配置
{
path:"/category/:id",
name:"Category",
component: Category
}
//跳转设置
<router-link to="/catagory/abc"> 有参数的跳转 <router-link>
//获取参数
$route.params.id
query查询参数：
//router路由的配置
{
path:"/category/:id",
name:"Category",
component: Category
}
//跳转设置
<router-link to="/catagory/abc?type='zzl'&age='18'"> 有查询参数的跳转 <router-link>
//获取参数
$route.query.type
$route.query.age
两者可以同时使用，但params必须在query前面 即
$router路由页面跳转
go(n)：n为-1则返回上一个页面，为1则前进一个页面，为0则刷新页面forward()：前进一个页面back()：返回上一个页面push(path)：跳转到path页面（path为路由地址）replace(path)：跳转到path页面，与上面不同的是。replace不留当前页面的历史记录，即跳转后不能返回当前页面