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脚手架。

文件结构

学习一个技术之前，一定要先对她有所了解，下面是文件目录的图解说明
在这里插入图片描述

  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文件夹图解
在这里插入图片描述

  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不留当前页面的历史记录，即跳转后不能返回当前页面
# javascript # vue.js # html
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue