vue学习大总结[待优化]

南极茄

已于 2022-09-08 14:12:00 修改

阅读量309

点赞数 1

分类专栏： Vue 文章标签： vue.js 学习前端

于 2022-09-08 12:33:04 首次发布

本文链接：https://blog.csdn.net/weixin_60625794/article/details/126762243

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

看前须知

这篇文章你可以只看深入了解–vue实例中的属性搭配指令使用，我觉得这篇博客我写的不太好，唯一的作用可能就是来好好捋一下各个属性以及如何与指令搭配使用。等到下次优化的时候，我会重新换一下目录:

Vue项目的创建
Vue常用属性如何与指令搭配使用
Vue组件化
Vue组件的组装
Vue路由的使用
ElementUI的使用

前言

自己想做项目的时候吧，没有页面，只能用postman就很难受，以前虽然学过一点点vue的皮毛，但是还是用不好，所以打算写下这篇博客，一方面可以帮到有需要的人，一方面也可以记录下来，帮助自己！

建议可以先去看一位up主的讲解再来看我的这篇blog,链接放在这里 https://www.bilibili.com/video/BV1er4y1P7UN?p=1&vd_source=06a5ae232746ef6be3fe7b194e82355d 你可以看完这个视频后再来把我这篇当作总结

始于足下–创建Vue项目

创建前提：你需要安装nodejs和Vue脚手架

以我为例，首先在下面这个目录下创建一个myapp文件夹

D:\Study\practice

以管理员身份打开cmd，依次输入以下命令
因为我们只需要一个简单的Vue项目，所以我们可以一直无脑敲电脑上的Enter键
第一次创建的时间较长，我们需要耐心等待，创建完成后出现如下界面

然后我们直接依次执行蓝色的两个命令，如果能成功启动项目就算完成创建了

初探Vue–看Vue项目的目录结构

我们将刚刚创建好的myapp使用vscode打开，看到有一大堆文件。

又是.gitgnore,又是jsconfig.jon，又是.js文件，可把人愁死了，但是我们暂时只需要重点关注src目录下的文件，其它的一律先不管(不管归不管的，你可别删了嗷！)
打开src目录，你可以看到以下结构

/assets:asset是资产的意思，顾名思义，里面放的是做页面需要的图片，音乐等资产
/components:这是存放各式各样自定义组件的地方
App.vue:这个是直接渲染到html页面上的Vue组件，你可以直接把它当成index页面，在这里调用你自己的组件和写页面
main.js:可以在里面引入外来模块或者引入全局变量

渐入佳境–了解vue文件

vue文件是什么？

一句话：一个.vue文件就是一个组件

相信大家都知道组件是什么东西吧，看下面这张图：
在这里插入图片描述
这个页面就是由四个组件（我觉得可能是）组成的，不同于原生的前端三剑客，Vue不是讲究把所有的代码都写在一个页面上，而是把代码分成几个组件，写完后再一点点去拼在页面上

如何编写一个vue文件？

首先，我们在components下创建一个Hello.vue,来向我们的世界打个招呼！(注意，组件文件的每个单词首字母要大写)
打开Hello.vue后，进行如下编写

<template>
    <h1>hello,world!</h1>
</template>

<script>
    export default{
        data(){
            return {

            }
        },
        methods:{

        },
        computed:{

        },
        watch:{

        },
        created(){

        },
        mounted(){

        },
        components:{

        },
        filters:{
            
        },
        props:[]
    }
</script>

这就是最简单的一个.vue文件

对.vue文件的解读

template标签里面可以编写这个组件的html
script标签中的export default{}是一个vue实例，里面存放着这个组件需要的数据、函数等等

深入了解–vue实例中的属性搭配指令使用

data:它的返回值是一个对象，这个对象中包含着这个组件所需要的数据

data的绝佳使用:

{{}}：解析被双括号所包围的变量，从下面的data中找寻这个键的值

v-bind：此指令用于修饰标签的属性

v-if：此指令用于控制标签是否被创建

v-show：此指令用于控制标签是否展示于页面

v-for：此指令用于在列表中渲染数组

v-model：此指令用于数据在表单中的双向绑定

<template>
<!-- 重点开始 -->
    <div v-if="isLogin">
        <h1>hello,{{name}}</h1>
        <img v-bind:src="photo"/>
        这是我们新进的水果:<br/>
        <ul>
            <li v-for="(fruit,index) of fruits" :key = "index">
            {{fruit}}
            </li>
        </ul>
    </div>
    <div v-show="!isLogin">
        <h1>抱歉，您还未登录，请登录:</h1>
        <div>
            用户：<input v-model="userName"/><br/>
            密码：<input v-model="password"/>
        </div>
    </div>
<!-- 重点结束 -->
</template>

<script>
    export default{
        //重点开始
        data(){
            return {
                name:"南极茄",
                photo:"https://img2.woyaogexing.com/2020/02/27/bfe02b7d49ce48998a7068f82bc64a1c!400x400.jpeg",
                isLogin:true,
                userName:"",
                password:"",
                fruits:["苹果","橘子","香蕉"]
            }
        },
        //重点结束
        methods:{

        },
        computed:{

        },
        watch:{

        },
        created(){

        },
        mounted(){

        },
        components:{

        },
        filters:{

        },
        props:[]
    }
</script>

methods:它里面放有很多的方法，包含着这个组件每一个事件触发后所执行的方法

methods的绝佳使用:

v-on：用于给事件绑定方法

<template>
    <div v-if="isLogin">
        <h1>hello,{{name}}</h1>
        <img v-bind:src="photo"/>
    </div>
    <div v-show="!isLogin">
        <h1>抱歉，您还未登录，请登录:</h1>
        <div>
            用户：<input v-model="userName"/><br/>
            密码：<input v-model="password"/>
        </div>
    </div>
<!-- 重点开始 -->
    <button v-on:click="changeState">点我切换形态！</button>
<!-- 重点结束 -->
</template>

<script>
    export default{
        data(){
            return {
                name:"南极茄",
                photo:"https://img2.woyaogexing.com/2020/02/27/bfe02b7d49ce48998a7068f82bc64a1c!400x400.jpeg",
                isLogin:true,
                userName:"",
                password:""
            }
        },
        //重点开始
        methods:{
            changeState(){
                this.isLogin = !this.isLogin;
            }
        },
        //重点结束
        computed:{

        },
        watch:{

        },
        created(){

        },
        mounted(){

        },
        components:{

        },
        filters:{

        },
        props:[]
    }
</script>

computed：它里面的每一个函数都有一个返回值，就相当于每一个函数名都是一个键，这个函数的返回值就是这个键的值

computed的绝佳实现：

computed其实和data的用处都差不多，computed主要是用于计算属性之间的关系，当然你说了，在data中计算不也行吗。你说的也对，但是计算属性放在computed中这是规矩，一种约定，看起来更方便，就比如你看我下面，把data中的name删了，放到computed中了吧，为啥呢，名字是通过计算得出的啊。

<template>
    <div v-if="isLogin">
        <h1>hello,{{name}}</h1>
        <img v-bind:src="photo"/>
    </div>
    <div v-show="!isLogin">
        <h1>抱歉，您还未登录，请登录:</h1>
        <div>
            用户：<input v-model="userName"/><br/>
            密码：<input v-model="password"/><br/>
            <!-- 重点开始 -->
            请输入你的姓和名来确定你的用户名:<br/>
            <input v-model="lastName"/><br/>
            <input v-model="firstName">
            <h1>就决定了,你的名字是{{name}}</h1>
            <!-- 重点结束 -->
        </div>
    </div>
    <button v-on:click="changeState">点我切换形态！</button>
</template>

<script>
    export default{
        data(){
            return {
                photo:"https://img2.woyaogexing.com/2020/02/27/bfe02b7d49ce48998a7068f82bc64a1c!400x400.jpeg",
                isLogin:true,
                userName:"",
                password:"",
                lastName:"南极",
                firstName:"茄",
            }
        },
        methods:{
            changeState(){
                this.isLogin = !this.isLogin;
            }

        },
        //重点开始
        computed:{
            name(){
                return this.lastName+this.firstName;
            }
        },
        //重点结束
        watch:{

        },
        created(){

        },
        mounted(){

        },
        components:{

        },
        filters:{

        },
        props:[]
    }
</script>

watch:这是个对象，里面放有很多函数，函数名和data和computed中的键的名字一模一样，当哪个键的值改变了，就会自动执行函数名等于该键名的函数

watch的绝佳实现:

主要用于监听哪个数据是否发生变化(数据包括data和computed中的数据)以及对某些数据可以进行处理

<template>
    <div v-if="isLogin">
        <h1>hello,{{name}}</h1>
        <img v-bind:src="photo"/>
    </div>
    <div v-show="!isLogin">
        <h1>抱歉，您还未登录，请登录:</h1>
        <div>
            用户：<input v-model="userName"/><br/>
            密码：<input v-model="password"/><br/>
            请输入你的姓和名来确定你的用户名:<br/>
            <input v-model="lastName"/><br/>
            <input v-model="firstName">
            <h1>就决定了,你的名字是{{name}}</h1>
        </div>
    </div>
    <button v-on:click="changeState">点我切换形态！</button>
</template>

<script>
import { createStructuralDirectiveTransform } from '@vue/compiler-core';

    export default{
        data(){
            return {
                photo:"https://img2.woyaogexing.com/2020/02/27/bfe02b7d49ce48998a7068f82bc64a1c!400x400.jpeg",
                isLogin:true,
                userName:"",
                password:"",
                lastName:"南极",
                firstName:"茄",
            }
        },
        methods:{
            changeState(){
                this.isLogin = !this.isLogin;
            }

        },
        computed:{
            name(){
                return this.lastName+this.firstName;
            }
        },
        //重点开始
        watch:{
            name(newVal,oldVal){
                alert("由于名字更改，请重新输入密码")
                console.log("你的新名字是"+newVal);
                console.log("你的老名字是"+oldVal);
                this.password = "";
            }
        },
        //重点结束
        created(){

        },
        mounted(){

        },
        components:{

        },
        filters:{

        },
        props:[]
    }
</script>

created：在该组件被使用并打开页面的一瞬间调用该函数
mounted：在页面渲染完成后调用该函数

其实这两个函数调用都是特别快，都是在页面打开的一瞬间就调用，只不过created调用的比mounted早一点点

created和mounted的绝佳使用：

<template>
    <div v-if="isLogin">
        <h1>hello,{{name}}</h1>
        <img v-bind:src="photo"/>
    </div>
    <div v-show="!isLogin">
        <h1>抱歉，您还未登录，请登录:</h1>
        <div>
            用户：<input v-model="userName"/><br/>
            密码：<input v-model="password"/><br/>
            请输入你的姓和名来确定你的用户名:<br/>
            <input v-model="lastName"/><br/>
            <input v-model="firstName">
            <h1>就决定了,你的名字是{{name}}</h1>
        </div>
    </div>
    <button v-on:click="changeState">点我切换形态！</button>
</template>

<script>
import { createStructuralDirectiveTransform } from '@vue/compiler-core';

    export default{
        data(){
            return {
                photo:"https://img2.woyaogexing.com/2020/02/27/bfe02b7d49ce48998a7068f82bc64a1c!400x400.jpeg",
                isLogin:true,
                userName:"",
                password:"",
                lastName:"南极",
                firstName:"茄",
            }
        },
        methods:{
            changeState(){
                this.isLogin = !this.isLogin;
            }

        },
        computed:{
            name(){
                return this.lastName+this.firstName;
            }
        },
        watch:{
            name(newVal,oldVal){
                alert("由于名字更改，请重新输入密码")
                console.log("你的新名字是"+newVal);
                console.log("你的老名字是"+oldVal);
                this.password = "";
            }
        },
        created(){
            alert("我被创建了");
        },
        mounted(){
            alert("页面渲染完成");
        },
        components:{

        },
        filters:{

        },
        props:[]
    }
</script>

components：这是一个对象，可以引入外部的组件并将其注册为标签
props：子组件用来接收父组件传过来的值

刚才我们说过，App.vue其实就相当于html页面，那我们肯定要在这个文件中引入Hello.vue组件，那我们就在App.vue中可以这么写

<script>
import Hello from "./components/Hello.vue";
export default {
  components: {
    HelloWorld,
    Hello: Hello,
}
}
</script>

这样我们就可以在App.vue的template标签中使用Hello标签了

这个父子传值呢，就会用到props，具体可以去看 https://www.bilibili.com/video/BV1er4y1P7UN?p=4&vd_source=06a5ae232746ef6be3fe7b194e82355d 这个链接下的视频，当然我也总结了一点：

1.父向子传值(App.vue向Son.vue传值)

<!-- 在App.vue中 -->
<Son :msg = "message"></Son>

// 在Son.vue中
export default{
    props:["msg"]
}

2.子向父传值(使用事件)

<!-- 在App.vue中 -->
<Son :msg = "message" @myEvent="changeData"></Son>
<!-- changeData(childData){
    this.childData = changeData;
} -->

// 在Son.vue中
//这是上面的html:<button @click = "sendData"></button>
//...............开始js代码
export default{
    methods:{
        changeData(){
            this.$emit("myEvent",childData)//执行父级的"myEvent",并传值
        }
    }
}