Vue简介和常用指令

news2024/12/23 5:47:55

概述:

MVVM思想:视图层数据和数据模型里面的数据发生变化都会影响到另一边的数据,通过ViewModel自动实现。

Vue入门案例 

步骤:

上面提到了数据模型和试图层的数据是关联的,此处数据模型里面el的值就是选择了哪一个视图层,el跟CSS里面的选择器差不多,#开头说明还是根据ID进行选择。因此需要有一个id标签与之对应。

视图层那里定义了一个文本输入框,有一个v-model标签绑定了数据区域里面的一个数据,message会在输入框展示出来。

v-开头的都是指令

{{message}} 表示获取数据模型的数据在界面上展示出来。

代码:

<!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>
</head>
<body>
    <div id="app">
        <input type="text" v-model=message>
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app",//Vue接管的区域
        data: {
            message: "Hello Vue"
        }
    })
</script>

</html>

用到的vue.js文件需要到官网自己下载引入。 

Vue的常用指令

v-bind和v-model 

 此处v-bind服务对象是属性,v-model服务对象是表单元素,使用v-model可以快速获得输入数据。

v-on指令

代码:

下面代码就是按钮绑定了一个事件,事件内容是一个弹窗加上message值自增1,在methods里面访问data里面的数据时需要使用this.xxx访问,在插值表示里面就不用

<!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>
</head>
<body>
    <div id="app">
        <a :href="url" target="_blank">超链接</a>
        <input type="text" v-model="url">
        {{message}}
        <input type="button" value="按钮" @click="handle()">
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app",//Vue接管的区域
        data: {
            url: "https://www.taobao.com",
            message: -1
        },
        methods: {
            handle: function () {
                this.message = this.message + 1;
                alert("message加1")
            }
        }
    })
</script>

</html>

 v-if和v-show 

v-for

效果图:

上面的v-for有两种使用方法,其中一种可以获取元素在数组的下标

在这里,除了上面用到的东西,还增加了一个表格元素和v-for的结合使用。

代码: 

<!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>
</head>
<body>
    <div id="app">
        <div v-for="addr in addrs">
            {{addr}}
        </div>
        <div v-for="(addr,index) in addrs">{{index+1}},{{addr}}</div>
        <table border="1px" cellspacing="0" width="200px">
            <tr>
                <th style="color: red">
                    城市
                </th>
            </tr>
            <tr v-for="addr in addrs">
                <th>{{addr}}</th>
            </tr>
        </table>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app",//Vue接管的区域
        data: {
            age: 10,
            addrs: ['北京', '上海', '广州', '深圳', '成都', '杭州']
        }
    })
</script>
<style>
    div {
        width: 100px;
    }
</style>

</html>

 常用指令案例

需求:

代码实现: 

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

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app",//Vue接管的区域
        data: {
            users: [{
                name: "TOm",
                age: 20,
                gender: 1,
                score: 78
            }, {
                name: "Rose",
                age: 18,
                gender: 2,
                score: 85
            }, {
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            }, {
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }
            ]
        }
    })
</script>
<style>
    td {
        width: 200px;
    }
</style>

</html>

Vue生命周期:

官方生命周期图

 可以准备一些与methods平级的比如mounted()方法,在vm挂载完成时会自动触发该方法,

比如在mounted中通常都会发送请求到服务端获取服务端的数据。

 

 ​​​​​

扩展部分——Vue3的一些内容(真正的精华):

Vue3——ref(),reactive(),watch(),computed()的使用_北岭山脚鼠鼠的博客-CSDN博客

Vue3——路由和嵌套路由的使用_vue3嵌套路由_北岭山脚鼠鼠的博客-CSDN博客

Vue3----props和emit的使用_vue3接收props_北岭山脚鼠鼠的博客-CSDN博客

Vue3——路由的query参数和命名路由以及默认插槽slot的使用_vue3 路由query_北岭山脚鼠鼠的博客-CSDN博客

Vue3——vuex的使用——axios网络请求的使用_vuex使用axios_北岭山脚鼠鼠的博客-CSDN博客 

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

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

相关文章

jQuery引入----练习

jQuery引入----练习 html <!DOCTYPE html> <html><head><title>jQuery引入</title><!-- css样式引入 --><link rel"stylesheet" href"../css/a.css"><!-- jquery函数库引入 --><script type"tex…

Linux基础IO【深入理解文件系统】

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; Linux学习之旅 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 文章目录 &#x1f307;前言&#x1f3d9;️正文1、磁盘文件2、磁盘概念2.1、基本结构2.2、数据存储 3、磁盘信息3.1、分区意义…

【C++初阶】类与对象:6大默认成员函数------拷贝构造和赋值运算符重载

一.拷贝构造函数 A.概念 拷贝构造函数&#xff1a;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c;在用已存在的类类型对象创建新对象时由编译器自动调用。 B.特性 1. 拷贝构造函数是构造函数的一个重载形式&#xff1b; 2. 拷贝构造函…

shell的基础学习二

文章目录 一、Shell 数组二、Shell 基本运算符三、Shell echo命令四、Shell printf 命令五、Shell test 命令总结 一、Shell 数组 数组中可以存放多个值。Bash Shell 只支持一维数组&#xff08;不支持多维数组&#xff09;&#xff0c;初始化时不需要定义数组大小&#xff08…

【五一创作】【Simulink】基于FCS-MPC的三相并网逆变器控制(Stateflow)

上次写了一篇【Simulink】基于FCS-MPC的三相并网逆变器控制&#xff08;Matlab Function&#xff09;&#xff0c;控制部分用 Matlab Function 写的&#xff0c;因实验室一般用 Stateflow&#xff0c;所以这篇把 Matlab Function 改成 Stateflow. 原理 电路原理图&#xff1a;…

如何批量查询快递的签收状态?

如果一次性网购大量快递&#xff0c;我们就得经常进入快递或网购平台查询物流&#xff0c;随时查看快递单号的物流状态。如果快递公司少&#xff0c;查询起来比较容易&#xff0c;但是如果快递公司很多&#xff0c;每次都要人工查询就是一件很麻烦的事情了。今天&#xff0c;小…

数据库相关知识

一.1 数据库 与Sybase不同&#xff0c;一个用户就对应于一个数据库。 create user CBMAIN identified by "sunline" default tablespace CBMAIN_DATA  -- 表空间 temporary tablespace CBMAIN_TEMP; -- 临时表空间 一.2 表空间 表空间由一个或多个物理文件组成&…

js使用splice方法删除数组元素可能导致的问题

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组&#xff0c;并以数组形式返回被修改的内容。此方法会改变原数组。 JavaScript 遍历数组并通过 splice 方法删除该数组符合某些条件的元素将会导致哪些问题&#xff1f; 导致的问题 当使用 splice 方法从 …

QT 中的多线程之继承 Thread

文章目录 1. 概述2. UML 类的关系图3. 代码&#xff1a;4. 运行结果及说明5. 结语 1. 概述 任何继承于QThread的线程都是通过继承 QThread 的run函数来实现多线程的&#xff0c;因此&#xff0c;必须重写QThread的run函数&#xff0c;把复杂逻辑写在QThread的run函数中。然后在…

effective c++ item40-44

item40:谨慎的使用多重继承 多重继承带来的符号的歧义性 #include <iostream> #include <vector> using namespace std; class A { public:void f() { cout << "A" << endl; } }; class B { private:void f(); }; class C : public A, publ…

5.5.1哈夫曼树

知识总览&#xff1a; 概念&#xff1a; 结点的权&#xff1a;有某种现实含义的数值&#xff08;如&#xff1a;表示结点的重要性&#xff09; 结点的带权路径长度&#xff1a;从树的根到该结点的路径长度&#xff08;经过的边数&#xff09;与该结点上权值的乘积。 就比如说要…

ETL工具 - Kettle 案例,拉取网络列表数据

一、Kettle 实战案例 上篇文章对 Kettle 的查询、连接、统计、脚本算子进行了介绍&#xff0c;对 Kettle 的大部分算子都应该有了相应的了解&#xff0c;下面我们基于 Kettle 实战案例&#xff0c;拉取 CSDN 博客列表的全部数据&#xff0c;存放至 Excel 文件中。 实验之前先…

NECCS|全国大学生英语竞赛C类|词汇和语法|词汇题|21:03~21:53

词汇题 语法题 情景对话题 目录 一、词汇题 1. 基本词义辨析题 2. 同义词或近义词辨析题 3. 固定搭配 二、常见词组 一、词汇题 1. 基本词义辨析题 appropriate funds 拨款 slum- clearance programme 贫民窟清理计划 reject 拒绝接受&…

DAY 49 tomcat服务配置优化

什么是Tomcat Tomcat是Java 语言开发的&#xff0c;Tomcat 服务器是一个免费的开放源代码的Web应用服务器&#xff0c;是Apache 软件基金会的 Jakarta 项目中的一个核心项目&#xff0c;由Apache、Sun和其他一些公司及人共同开发而成。 Tomcat属于轻量级应用服务器&#xff0…

外卖项目优化-02-

文章目录 瑞吉外卖项目优化-Day02课程内容前言1. MySQL主从复制1.1 介绍1.2 搭建1.2.1 准备工作1.2.2 主库配置1.2.3 从库配置 1.3 测试 2. 读写分离案例2.1 背景介绍2.2 ShardingJDBC介绍2.3 数据库环境2.4 初始工程导入2.5 读写分离配置2.6 测试 3. 项目实现读写分离3.1 数据…

深入解析PyTorch中的基本数据结构:张量的维度、形状和数据类型

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

【LEAP模型】能源环境发展、碳排放建模预测及不确定性分析

本次内容突出与实例结合&#xff0c;紧密结合国家能源统计制度及《省级温室气体排放编制指南》&#xff0c;深入浅出地介绍针对不同级别研究对象时如何根据数据结构、可获取性、研究目的&#xff0c;构建合适的能源生产、转换、消费、温室气体排放&#xff08;以碳排放为主&…

【Spring框架全系列】Spring更简单的读取和存储对象

&#x1f4ec;&#x1f4ec;哈喽&#xff0c;大家好&#xff0c;我是小浪。上篇博客我们介绍了如何创建一个spring项目&#xff0c;并且如何的存、取对象&#xff0c;介绍了相关方法&#xff0c;那么本篇博客将接着上篇博客的内容介绍如何更加简单的读取和存储对象。 &#x1f…

从源码角度看Linux进程组和线程组

1.进程ID 线程组ID&#xff1a; 设置了CLONE_THREAD flag创建的进程(线程&#xff09;同属于同一个线程组&#xff0c;拥有同一个线程组ID(TGID)。pthread_create创建线程的时候&#xff0c;底层通过clone函数实现就指定了CLONE_THREAD参数&#xff0c;即一个进程中的各个线程…

前端搭建猜数字游戏(内附源码)

The sand accumulates to form a pagoda ✨ 写在前面✨ 功能介绍✨ 页面搭建✨ 样式设置✨ 逻辑部分✨ 完整代码 ✨ 写在前面 上周我们实通过前端基础实现了打字通&#xff0c;当然很多伙伴再评论区提出了想法&#xff0c;后续我们会考虑实现的&#xff0c;今天还是继续按照我…