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

时间:2020-6-30 作者:admin


vue知识点,vue全家桶学习总结

本文主要编写了我在使用vue脚手架项目开发中的学习经验,还有一些就是遇到的困难和难点,我都会记录在里面。

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

在html中vue如何使用

  1. script的src属性中引入vue.js文件点击下载vue.js
  2. 创建一个id为app的div容器
  3. 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生命周期钩子函数

  1. 创建前后
    • beforeCreate
    • created(获取this)
  2. 挂载前后
    • beforeMount
    • mounted(获取dom)
  3. 更新前后
    • beforeUpdate
    • updated
  4. 卸载前后
    • 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脚手架

文件结构

学习一个技术之前,一定要先对她有所了解,下面是文件目录的图解说明
vue脚手架学习总结,vue参数、基础指令、生命周期函数、组件、插槽(持续更新)

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

src文件夹图解
vue脚手架学习总结,vue参数、基础指令、生命周期函数、组件、插槽(持续更新)

  1. assets :静态资源目录
  2. components :组件目录
  3. router :路由配置
  4. store :全局状态管理器(全局数据仓库)
  5. views :视图页面
  6. App.vue :主组件,最终页面都会渲染在这里
  7. 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

两者可以同时使用,但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不留当前页面的历史记录,即跳转后不能返回当前页面
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:87074139@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。