Vue框架入门

已于 2024-08-03 01:49:00 修改
阅读量600 收藏 20
点赞数 16
分类专栏： JavaWeb 文章标签： vue.js 前端 javascript
于 2024-07-30 21:54:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_80480614/article/details/140801165
版权

Author：Dawn_T17🥥

目录

什么是框架

一.Vue 的使用方向

二.Vue 框架的使用场景

（TIP）MVVM思想

三.Vue入门案例

TIP：插值表达式

四.Vue-指令 

（1）v-bind 和 v-model 

  （2）v-on 

  （3）v-if/v-else和 v-show

（4）v-for 

（5）Vue指令的案例练习​编辑

五.Vue-生命周期 

 

小结 

 

 六.Vue组件库Element

七.Vue路由

1.安装

2.定义路由

3.main中导入路由

4.关联路由 

5.路由界面显示切换 

6.初始默认界面设置

什么是框架

在编程中，框架是一种提供了基本结构和功能的软件架构。

它就像是一个预先搭建好的基础模板，为开发者设定了一套规则、模式和工具，以帮助他们更高效、更规范地进行软件开发。

框架通常包含了以下几个重要的方面：

  1. 基础架构：定义了软件的整体结构，包括模块的组织方式、数据的流向等。
  2. 通用功能：提供了一些常见的功能模块，如数据库操作、网络通信、用户认证等，开发者无需从零开始实现这些功能。
  3. 开发规范：规定了代码的编写风格、文件组织方式、模块之间的交互方式等，以确保项目的一致性和可维护性。

例如，在 Web 开发中，Django（Python 框架）和 Spring（Java 框架）为开发者处理了很多底层的复杂逻辑，如路由、数据库连接和管理等。

再比如，在移动开发中，Flutter 框架为开发者提供了一套跨平台的 UI 组件和工具，使得开发者能够更轻松地创建同时适用于 Android 和 iOS 平台的应用。

框架的使用可以大大缩短开发时间，提高代码质量，降低开发成本，同时也使得团队协作更加顺畅。

Vue 是一套构建用户界面的渐进式 JavaScript 框架。

一.Vue 的使用方向

  1. 构建用户界面

    • 帮助开发者创建网页或应用的前端页面，实现页面元素的展示和布局。

  2. 实现数据与视图的自动同步

    • 当数据发生变化时，Vue 能自动更新页面中相关的部分，无需手动操作。

  3. 组件化开发

    • 把复杂的页面拆分成多个独立的小模块（组件），方便管理和复用。

  4. 提升开发效率

    • 提供了简洁的语法和丰富的功能，让开发者更快速地实现各种交互效果和功能。

例如，在一个购物网站中，Vue 可以用来创建商品列表页面，当商品数据有更新时，页面会自动展示新的商品信息；还能将商品详情部分做成一个组件，在多个页面中重复使用。

总的来说，Vue 就是帮助前端开发者更轻松、高效地打造出功能丰富、交互良好的用户界面。

二.Vue 框架的使用场景

  1. 单页面应用（SPA）开发

    • 例如电商平台的商品详情页、在线文档编辑工具等，提供流畅的用户体验，无需频繁刷新页面。
    • 像一个在线音乐播放器，用户在切换不同的歌曲页面时，页面无需整体刷新，而是通过 Vue 的组件切换和数据更新来实现。

  2. 移动端应用

    • 构建移动端的 Web 应用，适应不同尺寸的屏幕，提供良好的交互效果。
    • 比如一个移动版的新闻阅读应用，能够根据用户的滑动操作快速加载和更新内容。

  3. 后台管理系统

    • 用于企业内部的各种管理系统，如订单管理、用户管理、数据分析等。
    • 例如一个电商后台的订单处理系统，通过 Vue 的组件化，可以清晰地展示订单列表、订单详情、操作按钮等。

  4. 数据可视化页面

    • 展示大量动态数据，通过 Vue 实现数据的实时更新和交互操作。
    • 比如一个实时的股票行情展示页面，能够根据数据变化动态更新图表和相关信息。

  5. 渐进式增强传统网站

    • 对于一些旧的网站，可以逐步引入 Vue 来提升部分页面的交互性和用户体验。
    • 比如在一个传统的企业官网中，将产品展示页面用 Vue 进行改造，增加动态效果和交互功能。

  6. 前端工具和小部件

    • 开发独立的可复用的前端组件，如日历组件、搜索框组件等。
    • 像一个可定制的日期选择组件，可以在多个项目中重复使用。

总之，Vue 框架适用于各种需要构建交互性强、用户体验良好的前端应用场景。

（TIP）MVVM思想

MVVM（Model-View-ViewModel）是一种软件架构模式，常用于构建用户界面的应用程序。

它将应用程序分为三个主要部分：

  1. Model（模型）：负责处理应用程序的数据和业务逻辑。这包括与数据库的交互、数据的验证和处理等。
  2. View（视图）：即用户界面，负责向用户展示数据并接收用户的输入。
  3. ViewModel（视图模型）：作为连接 Model 和 View 的桥梁。它将 Model 中的数据进行转换和处理，以适应 View 的展示需求；同时，它将 View 中的用户操作（如点击、输入等）转换为对 Model 的操作。

MVVM 的主要优点包括：

  1. 实现了视图和模型的分离，提高了代码的可维护性和可测试性。
  2. 双向数据绑定：当 Model 中的数据发生变化时，View 会自动更新；反之，当用户在 View 中进行操作时，Model 中的数据也会相应地改变。

例如，在一个电商应用中，商品的库存数量是 Model 中的数据。View 可能是展示商品信息的页面，而 ViewModel 则负责将库存数量转换为合适的格式（如添加单位、判断库存是否充足并显示相应的提示）在 View 中展示，并且当用户购买商品时，通过 ViewModel 将购买数量传递给 Model 进行库存的更新。

总的来说，MVVM 模式有助于提高开发效率，增强应用程序的交互性和响应性。

三.Vue入门案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <script src="js/vue.js"></script>       //导入Vue框架
</head>
<body>

    <div id="app">
        <input type="text" v-model="message"> /*v-model 指令将输入框的值
                                                与 message 数据属性双向绑定*/
        {{message}}                           //将message的值展示出来
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>
  • 使用 v-model 指令将输入框的值与 message 数据属性双向绑定，意味着输入框的值的变化会同步更新 message 的值，反之亦然。
  • {{message}} ：这是 Vue 的模板语法，用于显示 message 的值。
  • el: el 是一个选项，用于指定 Vue 实例要管理的 DOM 元素。"#app" ：指定 Vue 实例要控制的 DOM 元素是具有 id="app" 的 div 元素。
  • data: { message: "Hello Vue" } ：定义了一个名为 message 的数据属性，并初始化为 "Hello Vue" 。
  • 当您在输入框中输入内容时，{{message}} 显示的内容会随之实时更新，这展示了 Vue 的数据驱动视图的特性。

实现效果：输入框里内容改变时，后面的文本(message)也随之改变

TIP：插值表达式

在 Vue 中，插值表达式是一种在模板中动态显示数据的方式。

插值表达式使用双花括号 {{ }} 来包裹要显示的数据。例如，如果在 Vue 实例的 data 选项中定义了一个数据属性 message ，值为 "Hello, Vue!" ，那么可以在模板中使用 {{ message }} 来显示这个值。

插值表达式不仅可以显示简单的数据值，还可以进行一些简单的计算和逻辑处理。

四.Vue-指令 

Vue 中的指令是特殊的属性，以 v- 开头，用于在模板中为 DOM 元素添加特定的功能或行为。

（1）v-bind 和 v-model 

v-bind ：用于动态绑定属性值。

v-model：用于实现表单元素（如输入框、单选框、复选框等）和数据的双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>
</html>

  • 在 <a v-bind:href="url">链接 1</a> 和 <a :href="url">链接 2</a> 中，使用了 v-bind 指令（缩写形式为 : ）将 url 数据属性的值绑定到 a 标签的 href 属性上。这意味着当 url 的值发生变化时，链接的 href 属性也会自动更新。

  • <input type="text" v-model="url"> 使用了 v-model 指令实现了双向数据绑定。用户在输入框中输入的内容会同步更新到 url 数据属性，同时 url 数据属性的变化也会反映在输入框的值中。

  • 在 Vue 实例中，通过 data 选项定义了初始的 url 值为 "https://www.baidu.com" 。

当您在输入框中修改 url 的值时，两个链接的 href 属性都会随之更新。

  （2）v-on 

v-on ：用于监听 DOM 事件。

Vue中函数写在methods方法块中（可以写多个函数）

 函数名：function(参数列表){}

 或者直接 

 函数名（参数列表）{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>
</html>

  （3）v-if/v-else和 v-show

  v-if 和 v-else：根据条件决定元素是否渲染。

     v-show：根据条件控制元素的显示或隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

 v-if / v-else和 v-show的区别

实现方式：

  • v-if 是“真正”的条件渲染，它会根据表达式的值在 DOM 中添加或移除元素。如果条件为假，对应的元素及其子元素不会被创建和渲染。
  • v-show 则是通过修改元素的 display CSS 属性来控制显示或隐藏。无论条件如何，元素始终会被渲染到 DOM 中。

性能：

  • 当频繁切换显示状态时，v-show 的性能更高，因为它只是简单地切换样式，不需要进行 DOM 操作。
  • 当初始渲染时条件为假，并且之后不太可能改变，或者很少需要切换显示状态时，v-if 性能更好，因为它不会创建初始不需要的元素。

打开网页检视：

 

（4）v-for 

v-for：用于遍历数组或对象来渲染多个元素。

v-for="(item, index) in items" :key="index"（自动生成格式）

item 获得值，index获得索引（从0开始)

v-for="item in items"   遍历数组内的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <div v-for="addr in addrs">{{addr}}</div>

        <hr>

        <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>
</html>

（5）Vue指令的案例练习

<!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>
        #st{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="students">
        <table border="1" cellspacing="0" width="60%">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>成绩</th>
            <th>等级</th>
        </tr>
        <tr id="st" v-for="(user,index) in users">    
            <td>{{index+1}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>
                <span v-if="user.gender==1">男</span>
                <span v-else-if="user.gender==2">女</span>
            </td>
            <td>{{user.score}}</td>
            <td>
                <span v-if="user.score >= 85">优秀</span>
                <span v-else-if="user.score >= 60">及格</span>
                <span v-else style="color:red;">不及格</span>
            </td>

        </tr>
    </table>
    </div>
    <script>
        new Vue({
            el:"#students",
            data:{
                users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
            },
            methods: {
                
            },

        })
    </script>
</body>
</html>

 

五.Vue-生命周期 

在 Vue 中，组件具有一系列的生命周期钩子函数，允许开发者在组件的不同阶段执行特定的逻辑。

主要的生命周期钩子函数包括：

  1. beforeCreate：在实例初始化之前被调用，此时数据观测和事件配置尚未完成。

  2. created：实例已经创建完成，此时数据观测、属性和方法的运算已经完成，但 DOM 尚未挂载，无法访问到 $el 。

  3. beforeMount：在挂载开始之前被调用，此时模板已经编译完成，但尚未渲染到页面中。

  4. mounted：实例被挂载到 DOM 后调用，此时可以进行 DOM 操作。

  5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

  6. updated：数据更新导致的虚拟 DOM 重新渲染和打补丁完成之后调用。

  7. beforeDestroy：实例销毁之前调用，可以在此进行一些清理操作，比如解绑事件监听等。

  8. destroyed：实例销毁后调用，此时组件的所有数据、方法、指令和事件监听都已被解除。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate() {
    console.log('beforeCreate: 实例初始化之前');
  },
  created() {
    console.log('created: 实例创建完成');
  },
  beforeMount() {
    console.log('beforeMount: 挂载开始之前');
  },
  mounted() {
    console.log('mounted: 实例挂载到 DOM 后');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新前');
  },
  updated() {
    console.log('updated: 数据更新后');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁前');
  },
  destroyed() {
    console.log('destroyed: 实例销毁后');
  }
})

 小TIP：

为什么叫钩子函数？

在编程中，“钩子（Hook）”这个术语被使用，通常是因为它就像一个“挂钩”或“接口”，允许开发者在特定的时刻“钩住”或介入程序的执行流程，从而能够添加自定义的逻辑或操作。

在 Vue 的生命周期中，这些钩子函数提供了明确的时机点，让开发者可以在组件的不同阶段“钩入”自己的代码，就好像在组件的生命周期流程中挂上了自己的处理逻辑。

之所以称为“钩子”，形象地表达了开发者能够通过这些特定的点来“抓住”或“挂接”组件的运行过程，从而实现对组件行为的定制和扩展。

小结 

 六.Vue组件库Element

见文章Vue组件库Element-DawnT17

七.Vue路由

前端路由是现代前端开发中用于管理页面之间导航和视图切换的一种机制。

它的主要作用包括：

  1. 实现单页应用（SPA）的页面切换效果，无需每次跳转都重新加载整个页面，提供更流畅的用户体验。
  2. 可以根据不同的 URL 路径，动态地渲染相应的组件或页面内容。

常见的前端路由实现方式有两种：

Hash 路由：通过 URL 中的 # 后面的部分来标识不同的路由状态。例如 http://example.com/#/home 和 http://example.com/#/about 。浏览器不会将 # 后面的内容发送到服务器，路由的处理完全在前端进行。

History 路由：利用 HTML5 的 History API 来实现更美观和更接近传统 URL 的路由形式。例如 http://example.com/home 和 http://example.com/about 。

前端路由通常需要配合框架或库来使用，比如 Vue Router、React Router 等。

 

1.安装

想要使用VueRouter需要安装(通过npm)

或者直接在VueCli创建Vue项目时候,直接勾选添加VueCli

2.定义路由

在router文件下的index.js文件里定义 

 打开后,已经有一段路由信息

配置 

在路由配置中，当设置了 { path: '/emp', component:...... } ，之所以输入 /emp就能被识别和处理，是因为路由系统会监听浏览器地址栏中的 URL 变化。

当用户在浏览器中输入 /emp时，路由系统会将这个输入的路径与之前配置的路由规则进行匹配。在这个例子中，/emp与我们配置的路径完全匹配，所以路由系统就知道应该加载并显示 EmpView 这个组件。

3.main中导入路由

通过VueCli创建且勾选路由项的会自动添加

 

4.关联路由 

把两条项目名称语句的代码的标签换成router-link

5.路由界面显示切换 

在App.Vue中 用emp-view标签即可

注意把后面的导文件和components注释掉

A

6.初始默认界面设置

因为默认是'/',而路由都有后缀,所以直接访问时候,会是一片空白

 可以自己做初始界面,也可以以其中一个当作初始界面

用redirect

在路由配置中，redirect 通常用于重定向。当访问某个特定路径时，自动将用户重定向到另一个路径。

DAWN_T17
关注
  • 16
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue框架学习入门
lebencat的博客
07-25 1008
vue框架学习起步vue指令axios组件 一套基于js开发的构建用户界面的渐进式框架，简化了Dom操作，响应式数据驱动。 文档网址 Vue.js (vuejs.org) 引入方法 开发环境版本，包含了有帮助的命令行警告，适合学习使用 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 生产环境版本，优化了尺寸和速度，但是没有代码提示 <script src="https://c
vue框架入门ppt课件.pdf
04-04
vue框架介绍入门ppt课件 Vue.js 是一款流行的开源 JavaScript 框架，用于构建用户界面和单页面应用程序。以下是 Vue.js 框架的一些主要特点和优势： 简洁易用：Vue.js 的设计简洁，学习曲线较为平缓，使得初学者和...
Vue 框架入门介绍
qq_40120946的博客
05-02 928
前端时间工作任务没有那么忙，在技术总监沟通中他认为我自己花点时间做技术扩展，由于项目中用到前端部分功能，框架用的是Vue，本身项目中和前端同时接触比较多，而且公司有现成的项目可以供我去练习，所以决定去花时间去学习VUE框架。目前，主要是浏览介绍和学习极客时间上唐金州老师。接下来主要从三个点来谈谈自己初步了解Vue框架的心得。
VUE框架入门教程（自学版）
weixin_50011679的博客
05-15 3030
Vue 是一套用于构建用户界面的渐进式框架
VUE框架 详解入门
热门推荐
晴天的博客
03-19 2万+
vue框架快速入门到实操
Vue框架---Vue入门
鑫709的博客
04-26 6288
Vue概述 Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 vue.js的核心特点—响应的数据绑定 传统的js操作页面：在以前使用js操作页面的时候是这样的，需要操作某个html元素的数据，就的使用js代码获取元素然后在处理业务逻辑 响应式数据绑定的方式操作页面，可以直接使用像下面代码那样的写法就可以将数据填充到页面中 为什么要学习vue 通过学习Vue提供的指令, 很方便的就能把数据渲染到页面上, 不在需要手动操作DOM元素, 前端的Vue之类的框架, 不提.
Vue框架快速入门指南
maohedashu的博客
02-01 1174
通过本文的详细介绍，读者应该能够建立起对Vue框架的全面认识，并能够在实际项目中灵活运用。Vue的庞大生态系统提供了丰富的工具和库，帮助开发者更便捷地构建现代化的Web应用。
vue框架入门笔记（速成vue）
weixin_42991822的博客
01-25 4439
vue4小时速成课概述一、vue基础1. vue简介2. 第一个vue程序3. el挂载点4. data数据对象二、本地应用1. v-text2. v-html3.4.5.三、网络应用四、综合应用 概述 学习vue的目的主要是为了完成毕业设计的前端页面编写，所以学的比较粗糙，主要是为了vue入门，观看的教学链接是： 黑马程序员vue前端基础教程-4个小时带你快速入门vue. 一、vue基础 1. vue简介 一个js框架 简化Dom操作 响应式数据驱动 数据发生变化，则页面上的数据显示也会随之发生变化。
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
vue框架快速入门
Java学不会的博客
05-06 1898
MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。
vue框架入门小案例以及模板语法
m0_68997646的博客
10-22 351
vue框架入门hello小案例以及案例分析
Vue框架入门及进阶
02-22
Vue开发指南，适合入门和进阶。详细介绍了vue的基础知识和进阶知识。
vue小白入门教程
08-27
Vue 小白入门教程 本篇文章为初学者提供了一个详细的 Vue 入门教程，介绍了 Vue 的基本概念、环境搭建、第一个 Vue 应用程序...通过掌握这些知识点，初学者可以快速入门 Vue 框架，并开始构建自己的用户界面应用程序。
vue框架移动端开发入门指南
10-30
vue框架移动端开发入门指南vue框架移动端开发入门指南
vue入门vue入门vue入门
05-14
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。"Vue入门"意味着我们将探讨如何开始学习和掌握这个强大的技术。 Vue.js 的核心理念是通过声明式的数据绑定和组件化来...
解决 Vue 页面中地址栏参数变更不刷新的问题
最新发布
Hello World
08-03 309
在一次Vue项目开发中，遇到了只改变路由中的参数，路由地址不改变页面数据不刷新的问题。造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。
【Nuxt】配置
小秀的博客
08-03 343
实际项目中会将这两种方法合并，如果存在相同的，则 app.config.ts 文件的优先级更高。方法四：直接在 app.config.ts 中（defineAppConfig）配置。来获取，项目运行会自动读取该文件。这里的 appKey 变量值就会变为： ‘DDDDDD’。方法一：在 nuxt.config.ts 中进行配置。而且上述的配置字符串也支持动态替换(ref)。内置组件形式的 app 配置是三者里面最高的。可以使用 useAppConfig 获取。env 环境变量的优先级更高，如果使用。
懂个锤子Vue 自定义指定、插槽：
Java.慈祥
07-31 416
是Vue.JS提供的一组内置的功能指令，它们以v-这些指令使得开发者能够以声明式的方式实现数据与视图的绑定，从而简化了DOM操作；自定义指令：是Vue.js实现对DOM元素的定制化操作，这种机制为开发者提供了直接操作控制DOM能力；从而在不深入组件内部逻辑的情况下，增加或修改元素的行为；自定义指令分为： 全局注册、局部注册；在Vue中让指令在整个应用程序中可用的方法，通过调用方法完成；Vue的静态方法指令名称v-指令名称；定义对象：该对象内包含指令执行的生命周期钩子函数；指令第一次绑定到元素时触发。
Vue3中的vue-router的基本使用
m0_62626838的博客
07-30 174
1、vue3的vue-router与vue2中的vue-router，区别不大，主要区别在引入方式上。3、针对动态路由匹配的取值方式有细微区别。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值