Vue2所学总结

娃哈哈哈哈呀

已于 2024-01-19 18:32:05 修改

阅读量899

点赞数 18

分类专栏： Vue 文章标签： vue.js

于 2023-12-27 14:54:25 首次发布

本文链接：https://blog.csdn.net/karlaofsky/article/details/135171840

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue框架的基础知识，包括Vue的定义、特点、模板语法（插值和指令）、数据绑定（单向和双向）、el与data的写法、MVVM模型、事件修饰符、常用指令、计算属性、监视属性、组件（局部和全局）、路由的声明式和编程式使用以及axios的安装和使用。

摘要由CSDN通过智能技术生成

一、初始vue

1、什么是Vue

Vue是一个流行的前端JavaScript框架，用于构建交互式的用户界面和单页面应用程序。

2、vue的特点

易学易用：Vue.js的语法简单易懂，上手容易。
数据驱动视图：Vue.js可以将数据和视图进行关联，当数据发生变化时，视图会自动更新。
组件化开发：Vue.js鼓励使用组件化的开发方式，组件可以独立编写，方便复用和维护。
虚拟DOM：Vue.js通过虚拟DOM技术提高了页面渲染效率。
功能丰富：Vue.js拥有许多插件和工具，可以帮助开发者更快速地构建应用。

二、Vue模板语法

Vue模板语法主要有几种

插值：

使用双大括号{{}}进行数据插值，将Vue实例中的数据动态地显示在HTML文档中。

例：在Vue实例中有一个名为message的属性，它的值将动态地显示在该<div>元素中。

<div>{{ message }}</div>

指令：

以v-开头的特殊属性，用于为DOM元素添加交互行为或动态操作。

例：v-if指令用于条件渲染，根据表达式的值决定是否渲染某个元素。当Vue实例中的 showMessage属性为true时，该<div>元素才会被渲染，否则不会被渲染。

<div v-if="showMessage">{{ message }}</div>

三、数据绑定

在Vue中，数据绑定可以分为单向绑定和双向绑定两种方式：

（1）单向绑定(v-bind)

作用：单向绑定将数据源中的值动态地渲染到视图中，实现了数据到视图的更新。
用法举例

<div>{{ message }}</div>
<img :src="imageUrl">

在上面的例子中，{{ message }}和:src="imageUrl"都是单向绑定的用法。它们会将数据源中的message和imageUrl的值动态地渲染到对应的HTML元素中，实现了数据到视图的单向更新。

单向绑定的应用场景和元素：

1、数据展示：将数据源中的值动态地显示在视图中。

示例：{{ message }}

2、属性绑定：将数据源中的值动态地应用到HTML元素的属性上。

示例：:src="imageUrl"

（2）双向绑定(v-model)

作用：双向绑定不仅实现了数据到视图的更新，还可以将用户的操作反馈到数据源中，实现了视图和数据源之间的双向同步。
用法举例：

<input v-model="message" placeholder="请输入名字">

在这个例子中，v-model指令实现了输入框和数据源之间的双向绑定。当用户在输入框中输入内容时，message的值会随之改变；反过来，当message的值改变时，输入框的内容也会同步更新。这样就实现了视图和数据源之间的双向同步。

3、双向绑定的应用场景和元素：

表单输入：实现用户输入和数据源之间的双向同步。
- 示例：<input v-model="message">
复选框和单选按钮：选中状态与数据源之间的双向绑定。
- 示例：<input type="checkbox" v-model="isChecked">
下拉选择框：选项的选择和数据源之间的双向绑定。
- 示例：<select v-model="selectedOption">...</select>
文本区域：文本内容和数据源之间的双向绑定。
- 示例：<textarea v-model="text"></textarea>

四、el与data的两种写法

1.el有2种写法

(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

2.data有2种写法

(1).对象式
(2).函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

4、写法

使用el和data选项的对象字面量写法

new Vue({
  el: '#app', // 根元素
  data: {
    message: 'Hello Vue!', // 数据
    count: 0
  }
});

使用挂载点和data选项的函数写法

const app = new Vue({
  data() {
    return {
      message: 'Hello Vue!', // 数据
      count: 0
    };
  }
});

app.$mount('#app'); // 挂载点

五、MVVM模型

           MVVM模型
                       1. M：模型(Model) ：data中的数据
                       2. V：视图(View) ：模板代码
                       3. VM：视图模型(ViewModel)：Vue实例
           发现：
                       1.data中所有的属性，最后都出现在了vm身上。
                       2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

六、事件修饰符

以下是一些常用的事件修饰符：

.stop：阻止事件冒泡。例如，@click.stop会阻止点击事件继续向上冒泡到父元素。
.prevent：阻止默认事件。例如，@submit.prevent会阻止表单的提交行为。
.capture：使用事件捕获模式而不是冒泡模式。默认情况下，事件是在冒泡阶段触发的，使用.capture修饰符可以改变为捕获阶段触发。
.self：只有当事件的目标是当前元素本身时才触发事件处理程序。如果事件冒泡到了目标元素的子元素，事件处理程序将不会被触发。
.once：事件只会触发一次，即使在同一个元素上多次触发该事件。
.passive：指示浏览器不应该阻止事件的默认行为。这对于滚动事件等性能敏感的事件非常有用。

七、vue常用指令

v-text：将数据作为文本插入到元素中，类似于{{ }}语法。
v-html：将数据作为HTML插入到元素中。
v-if：根据表达式的值条件性地渲染元素。
v-else：与v-if配合使用，在表达式为false时渲染元素。
v-show：根据表达式的值条件性地显示或隐藏元素。
v-for：基于源数据多次渲染元素或组件。
v-on（简写为@）：绑定事件监听器，用于在触发DOM事件时执行方法。
v-bind（简写为:）：动态绑定HTML属性或组件的属性。
v-model：用于在表单元素上实现双向数据绑定。
v-cloak：用于在Vue实例尚未编译完成时隐藏模板内容。
v-once：只渲染元素或组件一次，后续更新将被忽略。

八、计算属性（computed）

计算属性:

1.定义:要用的属性不存在，要通过已有属性计算得来。

2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行?

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势:与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便。

5.备注:

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生

例：姓名案例

<body>
 <div id="root">
        姓：<input type="text" v-model='firstName'><br><br>
        名：<input type="text" v-model='lastName'><br><br>
        全名：<span>{{fullName}}</span><br><br>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
        },
        computed: {
            fullName: {
                //get有什么作用？ 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullName时，2.所依赖的数据发生变化时
                get() {
                    console.log('get被调用了');
                    console.log(this);//此处的this是vm
                    return this.firstName + '-' + this.lastName
                },
                //set什么时候调用？当fullName被修改时
                set(value) {
                    console.log('set', value);
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]

                }
            }
        }
    })
</script>

九、监视属性（watch）

监视属性watch:

1.当被监视的属性变化时，回调函数自动调用，进行相关操作

2.监视的属性必须存在，才能进行监视!!

3.监视的两种写法:

(1).newVue时传入watch配置

(2).通过vr$watch监视

例子：天气案例

<body>
 <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>

    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            isHot: true
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        //第一种写法
        // watch: {
        //     isHot: {
        //         immediate: true,//初始化时让handler调用一下
        //         // handler什么时候调用？当isHot发生变化时
        //         handler(newValue, oldValue) {
        //             console.log('isHot被修改了', newValue, oldValue);
        //         }
        //     }
        // }
    })
    //第二种写法
    vm.$watch('isHot', {
        immediate: true,//初始化时让handler调用一下
        // handler什么时候调用？当isHot发生变化时
        handler(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue);
        }
    })
</script>

十、组件

1、组件的作用

整个项目都是由组件组成
可以让代码复用：相似结构代码可以做成一个组件，直接进行调用就可以使用，提高代码复用性
可以让代码具有可维护性（只要改一处，整个引用的部分全部都变）

2、组件分类

按作用范围分类
- 全局组件：项目中所有地方都可以的组件称为全局组件
- 局部组件(私有组件)：仅有该组件才能使用的组件称为局部组件
按照用途来分
- 页面组件
- 自定义组件

3、局部组件

使用局部组件的具体步骤

第1步：在src下的components下创建一个单文件组件

单文件组件由三部分组成
- template：页面的结构的
- script:该组件的逻辑代码
- style:该组件的样式的代码

<template>
    <div class="box">
        <h1>计数器</h1>
        <div>{{num}}</div>
        <div>
            <button @click="num++">点我+1</button>
        </div>
    </div>
</template>
 
<script>
export default {
    data(){
        return{
            num:0
        }
    }
}
</script>
 
<style>
 
    box{
        width: 100px;
        height: 100px;
        border: 1px solid #ddd;
    }
</style>

第2步：通过ES6的import将自定义的组件引入进来

import HelloWorld from './components/HelloWorld.vue'

第3步：注册组件

 <HelloWorld></HelloWorld>
 <hello-world></hello-world>

注意：在template模板的地方如果要引入局部的自定义组件，可以使用短横线命名法或者使用驼峰式命名法均可

4、全局组件

定义全局组件的步骤

首先现在src/components下创建自定义组件
在main.js进行全局注册

import HelloWorld from '@/components/HelloWorld.vue'
/* 
  全局注册的语法
  Vue.comoponent(参数1,参数2)
  参数1：组件的名称，这个名称可以在其他组件中直接进行调用
  参数2：导入的组件对象名称
*/
Vue.component('HelloWorld',HelloWorld)

在相应的组件中直接引入

 <HelloWorld></HelloWorld>

5、父组件给子组件传参

父组件可以通过props属性给子组件传递参数。

以下是一个简单的Vue 2组件示例，演示如何将一个字符串参数传递给子组件：

父组件

<template>
  <div>
    <child-component :message="parentMessage" :count="parentCount" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: 'Hello from parent!',
      parentCount: 10
    };
  },
  components: {
    ChildComponent
  }
};
</script>

在子组件中，我们需要声明两个props来分别接收这两个参数：

<template>
  <div>
    <p>{{ message }}</p>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
    count: Number
  }
};
</script>

6、子组件给父组件传参

在Vue.js中，子组件可以通过 $emit 方法触发一个自定义事件，并且可以传递数据给父组件。以下是一个简单的 Vue 2 示例，演示如何在子组件中触发自定义事件并将数据传递给父组件：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child!');
    }
  }
};
</script>

在上面的例子中，我们创建了一个子组件 ChildComponent，其中包含一个按钮。当按钮被点击时，sendMessage 方法会被调用，并通过 $emit 触发名为 message 的自定义事件，同时传递了一个字符串参数 'Hello from child!'。

在父组件中，我们可以监听这个自定义事件，并在相应的处理函数中接收传递的数据。以下是一个使用子组件的父组件示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <child-component @message="handleMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      message: ''
    };
  },
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      this.message = message;
    }
  }
};
</script>

在父组件中，我们首先声明了一个 message 变量，用于存储从子组件接收到的消息。然后，在子组件中使用 @message 监听了子组件触发的 message 自定义事件，并指定了一个处理函数 handleMessage。

在 handleMessage 方法中，我们将接收到的消息赋值给父组件的 message 变量，从而实现了子组件向父组件传递数据的功能。

十一、路由

要在 Vue.js 中使用路由，你需要先安装和配置 Vue Router。下面是一个使用 Vue Router 的简单示例：

安装 Vue Router：

npm install vue-router

在 main.js 文件中配置 Vue Router：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

在上面的示例中，我们首先引入了 VueRouter 并通过 Vue.use 告诉 Vue 使用它。

接着，我们定义了一个路由配置数组 routes。每个路由规则都包含一个 path 属性用于匹配路径，以及一个 component 属性指定对应的组件。

然后，我们创建了一个 VueRouter 实例，并传入路由配置数组。

最后，在根 Vue 实例中将路由实例作为选项传入，并使用 $mount 方法将应用程序挂载到指定的元素上。

1、在组件中使用路由：（声明式）

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

2、在组件中使用路由：（编程式）

<template>
  <div>
    <button @click="goHome">Home</button>
    <button @click="goAbout">About</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      this.$router.push('/about');
    }
  }
};
</script>

在上面的示例中，我们使用了 <router-link> 组件来创建导航链接。to 属性指定了链接的目标路径。

<router-view> 组件用于渲染匹配到的组件，根据当前路径动态地切换显示不同的组件。

现在你已经完成了基本的路由配置和使用。当用户点击导航链接时，Vue Router 会自动更新应用程序的 URL，并渲染相应的组件。