vue 基础学习 一

 1. vue 使用快速入门三步走

(1) 新建 HTML 页面,引入 Vue.js文件

1

2

3

4

5

6

7

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Vue.js 入门示例</title>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

(2) 在JS代码区域,创建Vue核心对象,进行数据绑定

1

2

3

4

5

6

7

8

new Vue({

    el: "#app",

    data() {

        return {

            name: ""

        }

    }

});

创建 Vue 对象时,传递一个 js 对象,该对象中需要如下属性:

  • el : 用来指定哪些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
  • data :用来定义数据模型
  • methods :用来定义函数。这个我们在后面就会用到

(3) 编写视图,绑定数据和方法

1

2

3

4

<div id="app">

  <p>{{ message }}</p>

  <button v-on:click="greet">Greet</button>

</div>

2. vue 常见指令及作用  

常用的指令有

指令作用
v-bind为HTML标签绑定属性值,如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else-if条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show根据条件展示某元素,区别在于切换的是display属性的值
v-for列表渲染,遍历容器的元素或者对象的属性 

3. vue 生命周期 

生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法,这些生命周期方法也被称为钩子方法。

状态阶段周期
beforeCreate创建前
created创建后
beforeMount载入前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

vue生命周期


这些钩子方法重点关注 mounted,也最常使用

mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。而以后我们会在该方法中发送异步请求,加载数据。

小案例

列表查询

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!-- 页面标题 -->

<h1>欢迎你</h1>

<!-- 新增按钮 -->

<input type="button" value="新增" id="add"><br>

<hr>

<!-- Vue.js应用 -->

<div id="app">

    <!-- 数据表格 -->

    <table border="1" cellspacing="0" width="1200">

        <!-- 表头 -->

        <tr>

            <th>序号</th>

            <th>品牌名称</th>

            <th>企业名称</th>

            <th>排序</th>

            <th>品牌介绍</th>

            <th>状态</th>

            <th>操作</th>

        </tr>

        <!-- 利用v-for指令循环渲染品牌数据 -->

        <tr v-for="(brand,i) in brands" align="center">

            <!-- 序号 -->

            <td>{{i + 1}}</td>

            <!-- 品牌名称 -->

            <td>{{brand.brandName}}</td>

            <!-- 企业名称 -->

            <td>{{brand.companyName}}</td>

            <!-- 排序 -->

            <td>{{brand.ordered}}</td>

            <!-- 品牌介绍 -->

            <td>{{brand.description}}</td>

            <!-- 状态 -->

            <td>{{brand.status == 1 ? "启用" "禁用"}}</td>

            <!-- 操作 -->

            <td>

                <a href="#">修改</a>

                <a href="#">删除</a>

            </td>

        </tr>

    </table>

</div>

<!-- 引入Vue.js库 -->

<script src="js/vue.js"></script>

<!-- 引入Axios库 -->

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>

    new Vue({

        // Vue实例挂载到id为"app"的元素上

        el: "#app",

        data() {

            return {

                // 品牌数据列表

                brands: []

            }

        },

        // 在Vue实例挂载后执行的代码

        mounted() {

            var _this = this;

            // 发起GET请求获取数据

            axios({

                method: "get",

                url: "http://localhost:8080/brand_demo/selectAllServlet"

            }).then(function (resp) {

                // 将获取的数据赋值给brands数组

                _this.brands = resp.data;

            })

        }

    })

</script>

</body>

</html>

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python如何实现邮件的发送

python笔记- 发送邮件 依赖&#xff1a; Python代码实现发送邮件&#xff0c;使用的模块是smtplib、MIMEText&#xff0c;实现代码之前需要导入包&#xff1a; import smtplib from email.mime.text import MIMEText 使用163邮件发送邮件&#xff0c;具体代码实现如下&#x…

计算机毕业设计选题推荐,ssm诗词打卡微信小程序 44669(赠送源码数据库 )上万套实战教程手把手教学JAVA、PHP,node.js,C++、python、数据可视化等

诗词打卡微信小程序 摘要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;诗词打卡微信小程序被用户普遍使用&…

Cron介绍,以及常见的cron表达式

目录 一.cron介绍 1.什么是Cron&#xff1f; 2.Cron语法 时间字段的取值范围如下&#xff1a; 时间字段支持以下特殊字符&#xff1a; 下面是一些示例&#xff1a; 3.虚拟机安装cron(centos7展示) 二.常见的cron表达式 一.cron介绍 1.什么是Cron&#xff1f; Cron是一个…

视频物体对象追踪AI技术模型——Tracking Any Object Amodally

项目地址&#xff1a;https://tao-amodal.github.io 论文&#xff1a;https://arxiv.org/abs/2312.12433 GitHub&#xff1a;GitHub - WesleyHsieh0806/TAO-Amodal: Official Code for Tracking Any Object Amodally AIGC专区&#xff1a;aigc 更多消息&#xff1a;AI人工智能行…

Linux之vim编辑器

目录 vim编辑器 vim编辑器指令 命令模式指令 光标相关 移动光标相关 文本操作 底行模式指令 插入模式 vim配置 vimforcpp 面试官&#xff1a;小伙子&#xff0c;你是用什么环境编写代码的&#xff1f; 小明&#xff1a;vs2019 面试官&#xff1a;小伙子&#xff0c…

亚马逊云科技 re:Invent 2023 产品体验:亚马逊云科技产品应用实践 王炸产品 Amazon Q,你的 AI 助手

意料之中 2023年9月25日&#xff0c;亚马逊宣布与 Anthropic 正式展开战略合作&#xff0c;结合双方在更安全的生成式 AI 领域的先进技术和专业知识&#xff0c;加速 Anthropic 未来基础模型的开发&#xff0c;并将其广泛提供给亚马逊云科技的客户使用。 亚马逊云科技开发者社…

工业信息采集平台的五大核心优势

关键字&#xff1a;工业信息采集平台,蓝鹏数据采集系统,蓝鹏测控系统, 生产管控系统, 生产数据处理平台,MES系统数据采集, 蓝鹏数据采集平台通过实现和构成其他工业数据信息平台的一级设备进行通讯&#xff0c;从而完成平台之间的无缝对接。这里我们采用的最多的方式是和PLC进行…

vue3 vue-cropper实现图片裁剪+上传功能(组件封装使用)

效果&#xff08;CV即用&#xff09; 1.安装引入vue-cropper&#xff08;官网&#xff09;官网地址 npm install vue-croppernextimport vue-cropper/dist/index.cssimport { VueCropper } from "vue-cropper";2. 全局引入 import VueCropper from vue-cropper; i…

链接世界与中国时尚文化,积萨伯爵国际时尚品牌在中国大放异彩

时尚的历史是一部文化发展的历史。从中国古代到现代西方&#xff0c;每个时代的时尚都有其独特的文化背景和历史意义。自丝绸之路开启了古代中国与罗马帝国之间的贸易&#xff0c;时尚的不断创新和变革&#xff0c;是文化变迁和时代精神的反映。时尚的变化&#xff0c;也引领着…

关于Axios发送Get请求无法添加Content-Type

在拦截器中尝试给headers添加Content-Type&#xff1a; request.interceptors.request.use(config > {if (!config.headers[Content-Type]) {config.headers[Content-Type] application/json;}return config;},error > {return Promise.reject(error)} )如果是GET请求&…

nuc980开发板使用Agile Modbus软件包-基于 rs485 通讯

一、nuc980开发板电路 打开 nuc980-eth2p 开发板原理图&#xff0c;如下&#xff1a; 将JP1跳线帽连接到rs485。使用rs485转usb连接到电脑即可。 除了收发引脚&#xff0c;多了一个控制引脚。 linux内核使能串口4 二、Agile Modbus软件包 1、软件包的获取 下载网址 选择…

SQLite 安装与使用

SQLite 安装与使用 文章目录 SQLite 安装与使用1.什么是 SQLite&#xff1f;2.为什么要用 SQLite&#xff1f;3 安装3.1 在 Windows 上安装 SQLite3.2 安装路径3.3 接下来需要配置环境变量3.4 配置完变量测试成功3.5 创建数据库成功3.6 图形化界面操作3.7 数据表的增删改查新增…

代码随想录算法训练营Day10 | 239.滑动窗口的最大值、347.前K个高频元素

LeetCode 239 滑动窗口的最大值 本题思路: 采用单调队列来完成&#xff0c;单调队列就是队列里的元素顺序&#xff0c;是单调递减/递增的情况。 那么我们应该如何维护这个单调队列呢&#xff0c;此处既然是最大值&#xff0c;那么采用的是单调递减的队列。让队列的出口处是当前…

基于JSP+Servlet+Mysql的宠物管理系统(简单增删改查)

基于JSPServletMysql的宠物管理系统_简单增删改查 一、系统介绍二、功能展示1.主页2.增加3.修改4.查询5.删除 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目名称&#xff1a;基于JSPServletMysql的宠物管理系统(简单增删改查) 项目架构&#xff1a;B/S架构 开发语言…

链表的详细介绍

目录 链表的简单定义&#xff1a; 链表的分类 单项带头非循环 单向不带头循环链表 实现单向非循环无头链表 定义链表&#xff1a; 实现链表方法 打印链表 头插法&#xff1a; 尾插法&#xff1a; 指定插入&#xff1a; 通过对应值删除节点&#xff1a; 删除所有对应…

业财一体化是什么意思?有哪些好用的业财一体化软件?

你所在的企业是否为这些问题所困扰&#xff1f; 数据割裂&#xff1a;系统之间的数据不互通&#xff0c;财务数据与业务数据分离&#xff0c;数据统计口径不一致&#xff0c;缺乏关联性&#xff0c;管理统筹难度大。数据滞后&#xff1a;企业管理层获取数据信息的时效性低&…

绝缘电阻测试仪档位的选择技巧有哪些?这么一看就明白了!

电子绝缘电阻测试仪是电力检测领域的一款重要设备&#xff0c;他对于那些电力检测人员来说&#xff0c;是工作的设备之一&#xff0c;虽然它的使用频率相对较高&#xff0c;但是在使用绝缘电阻测试仪时&#xff0c;该如何选择合适的档位是一个关键问题。下面我们就来说说电子绝…

中国社科大与新加坡新跃社科联合培养博士—金融学和经济学差别

经济学和金融学是两个紧密联系的学科&#xff0c;但两者在研究问题上的侧重点有所不同。我在通过中国社科大与新加坡新跃社科联合培养博士项目课堂上&#xff0c;彻底分清了金融学和经济学差别。 经济学通常被归为社会科学&#xff0c;主要着眼于研究宏观上的生产、消费、以及…

谷歌大裁员,3 万员工面临被 AI 取代;网易、暴雪疑似「复合」!丨 RTE 开发者日报 Vol.113

开发者朋友们大家好&#xff1a; 这里是**「RTE 开发者日报」**&#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」 、「有态度的 观点 」、「有意思的 数据 」、「…

Redis缓存穿透、缓存击穿、缓存雪崩介绍

一、Redis的缓存穿透 1.什么是缓存穿透&#xff1f; 缓存穿透是指&#xff1a;客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这时缓存就永远不会生效&#xff0c;这些请求都打到数据库从而导致数据库压力过大。 2.出现缓存穿透的解决方案&#xff0c;以下是常用的两…