第4篇 vue的基本语法操作以及组件，声明周期，路由的操作

news2025/3/1 11:02:16

一 vue常用操作案例

1.1 事件渲染

1.数据渲染的方式：使用插值表达式{{}}进行数据渲染

2.数据渲染的方式：以使用 v-bind指令，它的简写的形式就是一个冒号（:），v-bind 特性被称为指令。指令带有前缀 v-

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
  

        <div id="app">
    
            <!-- {{}} 插值表达式，绑定vue中的data数据 -->
           div中内容： {{ message }}

           <h1 :title="info">
            {{ message }}
           </h1>
        <h2 v-bind:title="content">
            {{ message }}
        </h2>

    </div>
    <h1 v-bind:class="myClass">这是一个标题</h1>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: '页面加载于 ' + new Date().toLocaleString(),
                content: '我是标题',
                info: '好痛苦..........',
                myClass: 'red'
            }
        })
    </script>
</body>

</html>

2.结果：

1.2 双向绑定

v-model 可以进行双向的数据绑定；

v-bind:value只能进行单向的数据渲染；

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-bind:value只能进行单向的数据渲染 -->
        <input type="text" v-bind:value="searchMap.keyWord">
        <p>您要查询的是：{{searchMap.keyWord}}</p>
        <!-- v-model 可以进行双向的数据绑定  -->
       <input type="text" v-model="searchMap.keyWord">
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                keyWord: '我爱北京'
    }
            }
        })
    </script>
</body>

</html>

2.页面

1.3 click事件

1.说明

 v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法

2.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
        <button v-on:click="search()">查询</button>
<p>您要查询的是：{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                   keyWord: 'wo ai beijing!!!'
             },
            //查询结果
           result: {}
            },
            methods:{
            search(){
                this.result = {
           "title":"baidu",
           "site":"http://www.baidu.com"   
            }
          }}
        })
    </script>
</body>

</html>

3.结果

 1.4 表格提交且阻止默认行为

1.说明

     这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：即阻止表单提交的默认行为 

2.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
     这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
     即阻止表单提交的默认行为 -->
     <form action="save" v-on:submit.prevent="onSubmit">
         <label for="username">
             <input type="text" id="username" v-model="user.username">
             <button type="submit">保存</button>
         </label>
     </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{username:'默认值'}
            },
            methods:{
                onSubmit() {
          if (this.user.username) {
             alert('提交订单内容值>>>:'+this.user.username);
           } else {
            alert('请输入用户名')
        }
    }
        }
        })
    </script>
</body>

</html>

3.页面执行

1.5 for循环列表

1.说明

v-for：列表循环指令

2.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
<!-- 2、遍历数据列表 -->
<table border="1">
    <!-- <tr v-for="item in userList"></tr> -->
    <tr v-for="(item, index) in userList">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
    </tr>
</table>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
            }
        })
    </script>
</body>

</html>

3.效果

1.6 if条件判断

1.说明

v:if条件指令：还有v-else、v-else-if 切换开销大

2.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="permitflag">同意许可协议
        <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
        <h1 v-if="permitflag">if条件同意是吧.....</h1>
        <h1 v-else>no  不同意要....</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                permitflag:true
            }
        })
    </script>
</body>

</html>

3.效果

二  组件

2.1 组件 

2.1.1 局部

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        var app = new Vue({
        el: '#app',
    // 定义局部组件，这里可以定义多个局部组件
    components: {
        //组件的名字
        'Navbar': {
            //组件的内容
            template: '<ul><li>首页</li><li>学员管理</li></ul>'
        }
    }
})
    </script>
</body>

</html>

2.效果

2.1.2  全局

1.自定义js文件

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

2.应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script src="zidingyi.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>

3.效果

三  生命周期

3.1 生命周期

1.创建时的四个事件

2.执行中的2个事件

 3.2 案例

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            created(){
              alert('初始化页面.....');
            },
            mounted(){
                alert('渲染染成.....');
            }
        })
    </script>
</body>

</html>

2.页面

四 路由

4.1 路由的含义

 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。Vue.js 路由需要载入 vue-router 库

4.2 案例

1代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>Hello App!</h1>
            <p>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <router-link to="/">首页</router-link>
                <router-link to="/student">会员管理</router-link>
                <router-link to="/teacher">讲师管理</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
    </div>
    <script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
    <script>
         // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }
    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]
    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })
    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    const app = new Vue({
        el: '#app',
        router
    })
    // 现在，应用已经启动了！
    </script>
</body>

</html>

2.页面

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/998709.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

OLED透明屏交互技术：开创未来科技的新篇章

OLED透明屏交互技术：开创未来科技的新篇章

OLED透明屏交互技术作为一项前沿的科技创新&#xff0c;正在以其高透明度、触摸和手势交互等特点&#xff0c;引领着未来科技的发展。 不仅在智能手机、可穿戴设备和汽车行业有着广泛应用&#xff0c;还在广告和展示领域展现出巨大的潜力。 那么&#xff0c;尼伽在这篇文章中将…
阅读更多...
无涯教程-JavaScript - DDB函数

无涯教程-JavaScript - DDB函数

描述 DDB函数使用双倍余额递减法或您指定的某些其他方法返回指定期间内资产的折旧。 语法 DDB (cost, salvage, life, period, [factor])争论 Argument描述Required/OptionalCostThe initial cost of the asset.RequiredSalvage 折旧结束时的价值(有时称为资产的残值)。 该…
阅读更多...
三、lock类的编写与解析 —— TinyWebServer

三、lock类的编写与解析 —— TinyWebServer

lock类的编写与解析 —— TinyWebServer 一、前言 这个类的作用作者已经给了解释 —— “多线程同步&#xff0c;确保任一时刻只能有一个线程能进入关键代码段.” 对于这句话其实看了&#xff0c;会有似懂非懂的感觉&#xff0c;然后写代码的时候&#xff0c;就会完全不懂。其…
阅读更多...
分享一个开发者和设计者的免费图标库

分享一个开发者和设计者的免费图标库

图标是现代界面设计的不可或缺的一部分&#xff0c;无论是移动应用、网页设计还是软件界面。然而&#xff0c;许多开发者和设计师都面临着一个共同的挑战&#xff1a;寻找高品质、开源且免费的矢量图标资源。在这个领域&#xff0c;Yesicon 脱颖而出&#xff0c;成为了一个备受…
阅读更多...
【计算机网络】UDP数据包是如何在网络中传输的？

【计算机网络】UDP数据包是如何在网络中传输的？

List item 创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 更多计算机网络知识专栏&#xff1a;计算机网络&#x1f525;…
阅读更多...
【性能测试】中间件优化

【性能测试】中间件优化

1、Tomcat 优化连接数、线程池 打开tomcat安装目录\conf\server.xml文件&#xff0c;在server.xml中 有以下配置&#xff1a; tomcat HTTP/1.1 <Connector port"8080" protocol"HTTP/1.1" maxThreads"1000" acceptCount"1500" c…
阅读更多...
Python网络爬虫库：轻松提取网页数据的利器

Python网络爬虫库：轻松提取网页数据的利器

网络爬虫是一种自动化程序&#xff0c;它可以通过访问网页并提取所需的数据。Python是一种流行的编程语言&#xff0c;拥有许多强大的网络爬虫库。在本文中&#xff0c;我们将介绍几个常用的Python网络爬虫库以及它们的使用。 Requests库 Requests是一个简单而优雅的HTTP库&…
阅读更多...
mysql中GROUP_CONCAT函数详解

mysql中GROUP_CONCAT函数详解

GROUP_CONCAT是MySQL中的一个聚合函数&#xff0c;它用于将多行数据按照指定的顺序连接成一个字符串&#xff0c;并返回结果。下面是对GROUP_CONCAT函数的详解&#xff1a; 语法&#xff1a; GROUP_CONCAT([DISTINCT] expr [,expr …] [ORDER BY {unsigned_integer | col_name…
阅读更多...
揭秘动态网页与JavaScript渲染的处理技巧

揭秘动态网页与JavaScript渲染的处理技巧

大家好&#xff01;作为一名互联网技术爱好者&#xff0c;今天我要和大家分享一个关于Python数据采集的重要技巧——处理动态网页与JavaScript渲染&#xff01;这是一项在数据获取领域中非常关键的技能&#xff0c;让我们一起揭秘它的神秘面纱吧&#xff01; 首先&#xff0c;让…
阅读更多...
antd-vue - - - - - select自定义渲染[封装select组件]

antd-vue - - - - - select自定义渲染[封装select组件]

select自定义渲染[封装select组件] 1. 期望效果2. 代码展示 1. 期望效果 标签值和option展示不一致&#xff01; 2. 代码展示 官网地址:【antd-vue select】 封装的select组件&#xff1a; <template><a-form ref"refForm" :model"selectConfig&…
阅读更多...
K8S1.23.6版本详细安装教程以及错误解决方案（包括前置环境，使用部署工具kubeadm来引导集群）

K8S1.23.6版本详细安装教程以及错误解决方案（包括前置环境，使用部署工具kubeadm来引导集群）

准备工作&#xff08;来自官方文档&#xff09; 一台兼容的 Linux 主机。Kubernetes 项目为基于 Debian 和 Red Hat 的 Linux 发行版以及一些不提供包管理器的发行版提供通用的指令。每台机器 2 GB 或更多的 RAM&#xff08;如果少于这个数字将会影响你应用的运行内存&#xf…
阅读更多...
Python中的包管理方法

Python中的包管理方法

在Python开发中&#xff0c;包管理与依赖问题一直是开发者头疼的问题之一。随着项目规模的增大和复杂性的增加&#xff0c;管理各种依赖包和解决版本冲突变得尤为重要。本文将分享解决Python中的包管理与依赖问题的方法和工具&#xff0c;帮助开发者更好地管理项目中的依赖关系…
阅读更多...
Chrome浏览器旧版本和驱动114113老版本下载

Chrome浏览器旧版本和驱动114113老版本下载

搜了下硬盘&#xff0c;只发现了78版本和113版本的&#xff0c;找114版本的没找到 浏览器安装包和驱动都有&#xff0c;配套使用 113版本已关闭自动更新&#xff0c;78版本包含360极速浏览器 链接&#xff1a;点击进入网盘下载 提取码&#xff1a;XjAu
阅读更多...
C++新经典10--vector以及其使用

C++新经典10--vector以及其使用

vector vector类型是一个标准库中的类型&#xff0c;代表一个容器、集合或者动态数组这样一种概念。既然是容器&#xff0c;那就可以把若干个对象放到里面。当然&#xff0c;这些对象的类型必须相同。简单来说&#xff0c;可以把一堆int型数字放到vector容器中去&#xff0c;复…
阅读更多...
量化交易全流程（一）

量化交易全流程（一）

-----------------------------------前沿介绍-------------------------------------- 量化投资基本概念&#xff1a;凡是借助于数学模型和计算机实现的投资方法都可以成为量化投资&#xff0c;多因子策略&#xff0c;期货CTA策略&#xff0c;套利策略和高频交易策略。 量化…
阅读更多...
一片编程文章

一片编程文章

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…
阅读更多...
QQ聊天记录删除了怎么恢复？果粉都是这么做的

QQ聊天记录删除了怎么恢复？果粉都是这么做的

QQ自1999年推出以来就广受欢迎&#xff0c;在这二十多年里&#xff0c;QQ已经建立起了庞大的用户基础。即使微信崛起&#xff0c;仍旧有很多小伙伴不愿“抛弃”QQ。在使用QQ的过程中&#xff0c;您是否会遇到误删聊天记录的情况&#xff1f;qq聊天记录删除了怎么恢复&#xff1…
阅读更多...
赋能工业物联网 | 数据驱动，加速智能制造

赋能工业物联网 | 数据驱动，加速智能制造

行业背景 工业物联网场景下&#xff0c;随着智能设备及物联网技术的广泛应用&#xff0c;数据是最重要的资源之一&#xff0c;企业需要对各种机器、设备和传感器产生的时序数据进行采集、存储与分析。 因此&#xff0c;何为行之有效的数据库解决方案&#xff1f;企业普遍更为…
阅读更多...
Charles基础使用指南

Charles基础使用指南

##Charles 基本使用指南 Charles 在本地构建一个HTTP代理服务器&#xff0c;可以实现对HTTP、HTTPS请求的抓取&#xff0c;也就是我们常说的抓包&#xff0c;以及对请求响应的修改等。 Charles 官网地址 https://www.charlesproxy.com/ ###一、移动端的抓包实现 1. PC端开启…
阅读更多...
3招“挽回”：微信怎么恢复聊天记录

3招“挽回”：微信怎么恢复聊天记录

由于工作需要&#xff0c;经常使用微信与客户对接。害怕内存不足&#xff0c;所以我每个月都会清理一些不需要的文件&#xff0c;结果却不小心误删了与客户的聊天记录&#xff0c;有什么方法能够恢复回来吗&#xff1f; 聊天记录是微信的一个重要组成部分&#xff0c;里面保存着…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023