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:"我和我的<b>祖国</b>",
        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生命周期钩子函数

创建前后
- beforeCreate
- created（获取this）
挂载前后
- beforeMount
- mounted（获取dom）
更新前后
- 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 被修饰的事件只执行一次

<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:"<div>组件</div>"}
- 使用：<Counter></Counter>
局部组件（谁注册，谁使用）
- 定义：var Counter = {template:"<div>组件</div>"}
- 注册：components:{Counter}
- 使用：<Counter></Counter>
  <counter></counter>
  <counter-Item></counter-Item>

组件的数据传递

父向子

//父组件
<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动画

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

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{
	//离开的过程
}

代码演示：

<!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>

关键帧动画
定义：

@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路由

<router-link />：切换地址（浏览器的地址）
- to="/home"： <router-link />的属性，跳转到/home页面
<router-view />：显示路由页面对应的组件

路由配置：在/src/router/idnex.js 文件中配置
作用：用于连接router 组件页面，当浏览器地址匹配到当前路由的path，对应的component,就会替换router-view的内容

path：路由对应的地址
name：路由的名称，在做路由跳转的时候可以使用name
component：地址对应的组件（显示在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