【VUE】VUE基础，简单整理

最新推荐文章于 2025-08-07 10:34:05 发布

原创最新推荐文章于 2025-08-07 10:34:05 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #前端基础 #vue基础

本文详细介绍了如何使用Vue.js脚手架搭建项目，包括不同版本的选择与配置，组件的安装与使用方法，以及路由、插槽、动态组件和过滤器等功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整体

1 环境

低版本vue-cli：

vue init 【template-name】【project-name】

init：表示我要用vue-cli来初始化项目

<template-name>：表示模板名称，vue-cli官方为我们提供了5种模板，

*webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。

*webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。

*browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。

*browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。

*simple-一个最简单的单页应用模板。

<project-name>：标识项目名称，这个你可以根据自己的项目来起名字。
*如果不写会出来一个选项, 问是否把当前目录当作项目目录

vue-cli 3.0：

vue create 【project-name】

接下来的自己选就好了。

先执行一遍

npm i

切记

再然后安装组件

举例：如果要使用less

npm i less less-loader -D

如果是低版本脚手架：

安装成功后，打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面添加一段：

module.exports = {
    //  此处省略无数行，已有的的其他的内容
    module: {
        rules: [
          //  此处省略无数行，已有的的其他的规则
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
          }
        ]
    }
}

不是所有组件都需要进行配置，具体的操作参考组件api

如果是3.0，那就直接安装完就行了。

2 路由跳转

首先要在总路由index.js中配置路由, 类似于angular

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/pages/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/home', // 路径名称
      name: 'Home', // name
      component: Home   // 页面
    }
  ]
})

如果要在url中添加参数,需要写成

    {
      path: '/home:id', // 路径名称
      params: {
          id:2
      }
      name: 'Home', // name
      component: Home   // 页面
    }

然后新建page文件夹下的Home.vue

一般一个vue组件分为三部分

<template></template> // 视图
/*
    正常写html格式就行 如果有变量需要用{{}}扩起来就行,比如
    i am {{ title }}！
    
    标签内有几个指令需要记住
    1.v-if/v-else 
        参数是boolean
        false就移除这个节点
        
    2.v-show
        参数是boolean
        false就隐藏这个节点
    
    3.v-model
        参数是字符串,是state
        数据双向绑定
        
    4.v-for
        参数是字符串,格式通常为'(item, i) in/of Array' Array应在data中声明
        循环渲染标签
        
    5.v-text/v-html
        v-text="state"会在节点内创建一个{{ state }} 但是不能解析标签
        v-html="<h1>state</h1>"会在节点内创建一个<h1>state</h1> 可以解析标签
        
    6.v-bind
        参数是字符串,是state
        用于动态绑定值
        缩写为 ':'
        
    7.v-on
        参数是函数指针,
        用于绑定事件,@click
        缩写为 "@"
        
*/

<script></script> // 方法
/*script应该是一个vue实例， 并且需要给出默认接口
    
    export default {
    
    }
    
    vue实例中需要给出这样几组属性
    
    1.name
        组件名称，必须是字符串
        通常情况下必写
    
    2.props
        组件获得的参数，一般情况下对象
        对象中声明参数的
            type : String,//声明该属性必须为string类型
            required : true ,//声明该属性为必填
            default : false //默认值
            
        有一点要注意，如果传入的数据类型是array，那么最好能够设置一个默认值，
        且默认值应为function return的
        
        类似于：
            props: {
                list:{
                    type: Array,
                    default: ()=>{
                        return []
                    }
                }
            }
            
    
    3.data
        组件自有的参数， 一般情况下是函数
        函数需要返回自有的参数
                data(){
                    return {
                        title: "商品"
                    }
                }

    4.components
        声明组件，如果想要在页面中去使用组件，需要在script标签内引用，并且在components中声明
            components: {
                Header
            }
            
    5.methods
        声明方法，如果要写方法，如被点击等，要写在这里面
            methods:{
                getEvt(){
                    console.log(`${this.title}yoooo`)
                }
            }
            
    6.computed
        声明逻辑， 如果需要对值进行处理，可以写在这里面
            computed: {
                test(){
                    if(this.num < 10){
                        return false
                    }else{
                        return true
                    }
                }
            }
            
    7.生命周期函数
        十分重要， vue生命周期有
            beforeCreate： 创建前
            created： 创建后
            
            beforeMount： 挂载前
            mounted： 挂载后
            
            beforeUpdate： 数据更新前
            updated： 数据更新后
            
            beforeDestory： 组件销毁前
            destoryed： 组件销毁后
            
        使用起来跟其他方法一样：
            mounted(){
                console.log('mounted执行了')
            }

*/


<style></style> // 样式
/*样式没有什么好注意的，要记住一个属性 scoped
    <style scoped></style>
    这样写完之后样式只会在当前页面内生效

如果要使用less、scss、less 需要添加属性
    <style scoped lang="less"></style>

*/

路由

如果我们需要设置路由的跳转，需要在主路由中将我们的了路由页面引入
主路由监听url的跳转

而主路由页面在主组件app.vue中的中被加载

/*
    这是总路由中的路由分发, 
        path:路径
        name:路由名称,建议通过name来进行调转,方便修改
        component: 跳转后的页面
        children: 子路有,用于路由嵌套
*/
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/goods',
      name: 'Goods',
      component: Goods,
      children:[
        {
          path: '/goods/log',
          component:GoodsLog
        },
        {
          path: '/goods/res',
          component:GoodsRes
        }
      ]
    }
  ]
})

上面的是官方的写法，组件需要在引入，在实际项目开发中，建议把路由数组单独写成一个文件：

目录结构
    router
       | index.js
       | router.js

简单举个例子：

// index.js
import Vue from "vue"
import Router from "vue-router"
import {RouterArr} from "./router"

Vue.use(Router)

export const router = new Router ({
    routes: RouterArr
})

// router.js

export const RouterArr = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        // 这里将组件直接在这里引入，避免变量名过多，且便于维护
        component: ()=> import("@/view/Home/HomeController" )
    }
]

这样做的好处有两个：

1 便于维护
2 便于设置动态路由

路由跳转的标签是

如果是路由嵌套,to后面最好能跟路径,name的话会出现跳转问题

SLOT

slot是插槽, 是在组件中给父组件留出位置,
如果父组件想要在子组件中添加节点并且显示, 必须要提前在子组件中写好插槽

插槽需要用slot标签, 且slot有name属性以便于父组件的替换

(写了name)

<template>
    <div>
        <slot name='slot1'>我是slot1的文字</slot>
        <slot name='slot2'>我是slot2的文字</slot>
    </div>
</template>
<script>
export default {
    name: "Body"
}
</script>
<style scoped>
</style>

这样就写好了一个插槽

父组件中只需要在组件节点中添加节点就可以了

<template>
    <div>
        <BodyBox>
            <p slot='slot1'>我是Goods的文字</p>
        </BodyBox>
    </div>
</template>

如果按照上面这么写, 那么页面中会显示slot2和p
如果p不写slot属性,则两个slot都不会被替换
如果slot不写name属性,则会显示两条P 并且会报错

slot-scoped

动态组件

动态组件是通过is属性来控制

首先导入两个组件,然后通过在标签内写is="组件名"来完成组件的切换

<template>
    <div>
        <components :is='comp'></components>
        <!-- <Test1 /> -->
        <button @click="changeTest">changeTest</button>
    </div>
</template>
<script>
import Test1 from "@/components/test/test1"
import Test2 from "@/components/test/test2"

    export default {
        name: "Test",
        data(){
            return{
                comp: 'Test2'
            }
        },
        components: {
            Test1,
            Test2
        }
    }
</script>

这样我们就可以从state层面控制我们要展示的组件了

过滤器

filter, 通过通道来给组件中的值做修改

组件内写法:

filters:{
    filter:function(data,arg1,arg2){
        return ....
    }
}

全局写法:

filters('filter',function(data,arg1,arg2){
    retrun ....
})

例子

<template>
    <div>
        我是TEST1
        <h3>
            {{ num|filters1(3) }}
        </h3>
    </div>
</template>

<script>
export default {
    name: 'Test1',
    data(){
        return{
            num: 1
        }
    },
    filters:{
        filters1(data,arg1){
            return `现在的num是${data},乘以${arg1}后等于${data*arg1}`
        }
    }
}

写在最后：

vue基础基本就是这些，想到了再补充。这篇个人文档我一直再补充也一直在反复翻，这些技术真的是，不用很快就忘了。分享出来是希望能帮到需要的人。

加油今天也要比昨天的自己更牛逼一些。