跟着官网学 Vue - 基础

1、跟 Vue 说 Hello World!

<!--跟 Vue 说 Hello World!
--><script>
// 导出一个 Vue 组件
export default {// 数据data() {return {message: 'Hello World! lfsun'}}
}
</script><template><!-- 使用数据中的信息渲染标题 --><h1>{{ message }}</h1>
</template>

这是一个简单的 Vue 组件,其中包含了一个数据属性 message,它的值是 ‘Hello World! lfsun’。在模板部分,我们使用双大括号 {{ }} 语法将 message 的值插入到 <h1> 标签中,以在页面上显示 “Hello World! lfsun”。

2、处理用户输入


<!--这个示例展示了如何通过 v-on 指令处理用户输入。
--><script>
// 导出一个 Vue 组件
export default {// 数据data() {return {message: 'Hello World! lfsun'}},// 方法methods: {// 反转消息的方法reverseMessage() {this.message = this.message.split('').reverse().join('')},// 通知的方法notify() {alert('导航受阻.')}}
}
</script><template><!--注意我们不需要在模板中写 .value,因为在模板中 ref 会自动“解包”。--><!-- 显示消息 --><h1>{{ message }}</h1><!--绑定到一个方法/函数。这个 @click 语法是 v-on:click 的简写。--><!-- 反转消息的按钮 --><button @click="reverseMessage">反转 Message</button><!-- 也可以写成一个内联表达式语句 --><!-- 在消息后添加 "!" 的按钮 --><button @click="message += '!'">追加 "!"</button><!--Vue 也为一些像 e.preventDefault() 和 e.stopPropagation()这样的常见任务提供了修饰符。--><!-- 带有 e.preventDefault() 的链接 --><a href="https://vuejs.org" @click.prevent="notify">使用 e.preventDefault() 的链接</a>
</template><style>
/* 样式 */
button, a {display: block;margin-bottom: 1em;
}
</style>

这个示例展示了如何使用 Vue 处理用户输入。通过 v-on 指令,我们绑定了按钮的点击事件,并通过 methods 中的方法来处理这些事件。在模板中,我们使用了插值语法 {{ message }} 来显示数据,并演示了一些常见的事件修饰符,如 .prevent 阻止默认行为。

3、Attribute 绑定

<!--
现在我们将元素的 attribute / property 响应式地绑定到状态上。
这个 :title 语法是 v-bind:title 的简写。
--><script>
export default {data() {return {message: 'Hello World! lfsun',isRed: true,color: 'green'}},methods: {// 切换 isRed 的值,实现红色文字的动态切换toggleRed() {this.isRed = !this.isRed},// 切换 color 的值,实现文字颜色在绿色和蓝色之间切换toggleColor() {this.color = this.color === 'green' ? 'blue' : 'green'}}
}
</script><template><p><!-- 使用动态绑定的方式设置标题 --><span :title="message">将鼠标悬停在我身上几秒钟,就能看到我动态绑定的标题!</span></p><!--除了普通字符串之外,class 绑定还特别支持了对象和数组--><p :class="{ red: isRed }" @click="toggleRed">这应该是红色的......但点击我可以切换它。</p><!-- 样式绑定也支持对象和数组 --><p :style="{ color }" @click="toggleColor">应为绿色,点击后应在绿色和蓝色之间切换。</p>
</template><style>
.red {color: red;
}
</style>

在这个例子中,Vue组件包含了一个数据对象,其中包括messageisRedcolor等属性。这些属性被用于演示Vue.js中的动态绑定机制。

具体来说,这个例子演示了以下几个方面:

  1. 动态绑定标题 :使用:title语法(等同于v-bind:title)将<span>元素的title属性与组件的message属性进行动态绑定,实现当鼠标悬停在该元素上时,显示动态绑定的标题。
  2. 动态切换类名 :使用:class语法(等同于v-bind:class)将<p>元素的类与组件的isRed属性进行动态绑定,从而实现在点击该元素时切换红色文字样式。
  3. 动态切换样式 :使用:style语法(等同于v-bind:style)将<p>元素的文字颜色样式与组件的color属性进行动态绑定,从而实现在点击该元素时在绿色和蓝色之间切换文字颜色。

4、条件与循环


<!--
我们可以通过 v-if 和 v-for 指令条件性地或循环地渲染内容。
--><script>
export default {data() {return {show: true,list: [1, 2, 3]}}
}
</script><template><!-- 切换列表的显示与隐藏状态 --><button @click="show = !show">切换列表</button><!-- 在列表末尾添加一个新数字 --><button @click="list.push(list.length + 1)">添加数字</button><!-- 移除列表末尾的数字 --><button @click="list.pop()">移除数字</button><!-- 反转列表的顺序 --><button @click="list.reverse()">反转列表</button><!-- 根据条件渲染列表 --><ul v-if="show && list.length"><!-- 使用 v-for 循环渲染列表项 :key="item"确保每个列表项都有一个唯一的标识符。--><li v-for="item of list" :key="item">{{ item }}</li></ul><!-- 当列表不为空但被隐藏时的提示 --><p v-else-if="list.length">列表不为空,但被隐藏。</p><!-- 当列表为空时的提示 --><p v-else>列表为空。</p>
</template>

这个示例展示了如何在Vue.js中使用v-ifv-for指令来条件性地或循环地渲染内容。具体而言:

  1. 按钮操作:有四个按钮,分别用于切换列表的显示与隐藏状态、在列表末尾添加一个新数字、移除列表末尾的数字、以及反转列表的顺序.
  2. 条件性渲染列表:使用v-if指令,当showtruelist长度不为零时,渲染一个包含数字的无序列表。这里使用了v-for指令来循环渲染列表项。
  3. 条件性提示:如果列表不为空但被隐藏(showfalse),则显示提示信息“列表不为空,但被隐藏.”;如果列表为空,则显示提示信息“列表为空.”。这里使用了v-else-ifv-else指令。

5、表单绑定

<script>
export default {data() {return {text: '编辑',checked: true,checkedNames: ['冷风扇1'],picked: '一个',selected: 'A',multiSelected: ['A']}}
}
</script><template><h2>文本输入</h2><input v-model="text"> {{ text }}<h2>复选框</h2><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">已选中: {{ checked }}</label><!--多个复选框可以绑定到相同的 v-model 数组--><h2>多选框</h2><input type="checkbox" id="lfsun1" value="冷风扇1" v-model="checkedNames"><label for="lfsun1">冷风扇1</label><input type="checkbox" id="lfsun11" value="冷风扇11" v-model="checkedNames"><label for="lfsun11">冷风扇11</label><input type="checkbox" id="lfsun111" value="冷风扇111" v-model="checkedNames"><label for="lfsun111">冷风扇111</label><p>已选中的名字: <pre>{{ checkedNames }}</pre></p><h2>单选框</h2><input type="radio" id="one" value="一个" v-model="picked"><label for="one">一个</label><br><input type="radio" id="two" value="两个" v-model="picked"><label for="two">两个</label><br><span>已选择: {{ picked }}</span><h2>选择框</h2><select v-model="selected"><option disabled value="">请选择一个</option><option>A</option><option>B</option><option>C</option></select><span>已选择: {{ selected }}</span><h2>多选选择框</h2><select v-model="multiSelected" multiple style="width:100px"><option>A</option><option>B</option><option>C</option></select><span>已选择: {{ multiSelected }}</span>
</template>

这个示例演示了如何使用Vue.js的v-model指令在状态和表单输入之间创建双向绑定。具体来说:

  1. 文本输入 :展示了如何使用v-model双向绑定文本输入框。
  2. 复选框 :演示了如何使用v-model双向绑定复选框。
  3. 多选框 :展示了如何使用v-model将多个复选框绑定到相同的数组。
  4. 单选框 :演示了如何使用v-model双向绑定单选框。
  5. 选择框 :展示了如何使用v-model双向绑定选择框。
  6. 多选选择框 :演示了如何使用v-model双向绑定多选选择框。

6、简单组件


<!--
这里展示了最简单的组件,它接收一个 prop 并渲染出来。
--><script>
// 引入 TodoItem 组件
import TodoItem from './TodoItem.vue'export default {// 注册 TodoItem 组件components: {TodoItem},data() {return {// 包含待办事项的数组groceryList: [{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '其他人类应该吃的东西' }]}}
}
</script><template><!-- 使用 TodoItem 组件渲染待办事项列表 --><ol><!--我们给每个 todo 项提供它所表示的 todo 对象,以便能够动态展示内容。同时还需要给每个组件提供一个“key”,这在指南的 v-for 部分有详细解释。--><TodoItemv-for="item in groceryList":todo="item":key="item.id"></TodoItem></ol>
</template>

TodoItem.vue

<script>
export default {props: {todo: Object}
}
</script><template><li>{{ todo.text }}</li>
</template>

这个示例展示了如何创建一个简单的Vue组件,该组件接收一个proptodo),并在页面上渲染出来。具体来说:

  1. 组件引入:通过import TodoItem from './TodoItem.vue'引入了名为TodoItem的组件。
  2. 组件注册:在components选项中注册了TodoItem组件,以便在当前组件中可以使用它。
  3. 数据:通过data选项定义了一个包含待办事项的数组groceryList
  4. 使用组件:在模板中使用v-for指令循环遍历groceryList数组,为每个待办事项创建一个TodoItem组件实例。通过:todo="item"将当前待办事项传递给TodoItem组件,并通过 :key="item.id" 给每个组件提供一个唯一的标识符。

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

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

相关文章

C.小苯的排列构造

C-小苯的排列构造_北京信息科技大学第十五届程序设计竞赛&#xff08;同步赛&#xff09; (nowcoder.com) 凑2很容易想出来&#xff0c;但是2 4 1 3 这个内核不好想&#xff0c;算是一种尝试和经验吧 #include<bits/stdc.h> using namespace std;int n;int main() {cin&g…

Nginx命令---检查配置文件语法是否正确

介绍 使用命令检查 nginx 配置语法是否正确。 命令 检查默认配置文件&#xff1a; /sbin/nginx -t检查指定配置文件&#xff1a; /sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf

Go map 大小

如何得到一个 map 占用了多少内存 go get github.com/520MianXiangDuiXiang520/MapSizepackage mainimport ("fmt""github.com/520MianXiangDuiXiang520/MapSize" )func main() {m : make(map[int]struct{})for i : 0; i < 100; i {m[i] struct{}{}}f…

今天公司来了个拿 30K 出来的测试,算是见识到了基础的天花板

今天上班开早会就是新人见面仪式&#xff0c;听说来了个很厉害的大佬&#xff0c;年纪还不大&#xff0c;是上家公司离职过来的&#xff0c;薪资已经达到中高等水平&#xff0c;很多人都好奇不已&#xff0c;能拿到这个薪资应该人不简单&#xff0c;果然&#xff0c;自我介绍的…

CPU、内存与硬盘及IO操作

目录 1、概念简介 1.1 CPU&#xff08;Central Processing Unit&#xff0c;中央处理器&#xff09; 1.2 硬盘&#xff08;Hard Disk Drive&#xff09; 1.3 内存&#xff08;Memory&#xff09; 2、计算机程序在进行io读写操作时&#xff0c;这三者的功能和实现原理 1、概…

【C语言】结构体实现位段

引言 对位段进行介绍&#xff0c;什么是位段&#xff0c;位段如何节省空间&#xff0c;位段的内存分布&#xff0c;位段存在的跨平台问题&#xff0c;及位段的应用。 ✨ 猪巴戒&#xff1a;个人主页✨ 所属专栏&#xff1a;《C语言进阶》 &#x1f388;跟着猪巴戒&#xff0c;…

使用paddleocr识别图片文本的一种方案

pdf文本分为两种&#xff0c;一种是标准的pdf格式的文本&#xff0c;这种无需利用ocr识别&#xff0c;另外一种就是图片文本&#xff0c;这种需要进行ocr的识别。 OCR 识别文本和文本区域 ppstructure是paddleocr里面的一个子库&#xff0c;可以识别文档的页眉页脚、正文、标…

从手工测试进阶中高级测试?如何突破职业瓶颈...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、手工测试如何进…

oh-my-zsh 安装和配置

安装zsh sudo apt update sudo apt install zsh安装oh-my-zsh sh -c "$(curl -fsSL https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh)"配置~/.zshrc sudo vim ~/.zshrc添加以下内容 ZSH_THEME"steeef" HISTFILE~/.zsh_history HISTS…

Linux:gdb的简单使用

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》《Linux》 文章目录 前言一、前置理解二、使用总结 前言 gdb是Linux中的调试代码的工具 一、前置理解 我们都知道要调试一份代码&#xff0c;这份代码的发布模式必须是debug。那你知道在li…

jquery实现省市区三级联动

一、技术: 前端采用的是jsp页面 后端采用springmvc+mybatis+mysql8 效果图 二、cascadeSelect.jsp页面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%String path = request.getContextPath();String basePath = r…

YOLOv8改进 | 2023主干篇 | 利用RT-DETR特征提取网络PPHGNetV2改进YOLOv8(超级轻量化精度更高)

一、本文介绍 本文给大家带来利用RT-DETR模型主干HGNet去替换YOLOv8的主干&#xff0c;RT-DETR是今年由百度推出的第一款实时的ViT模型&#xff0c;其在实时检测的领域上号称是打败了YOLO系列&#xff0c;其利用两个主干一个是HGNet一个是ResNet&#xff0c;其中HGNet就是我们…

Mybatis映射接口的动态代理实现原理

Mybatis映射接口的动态代理实现原理 在上一节中&#xff0c;我们介绍了MyBatis的核心配置文件加载流程&#xff0c;Mybatis核心配置文件加载流程详解 在文中&#xff0c;我们介绍了MyBatis在加载配置文件的过程中会针对每个接口类都生成一个相应的MapperProxyFactory动态代理工…

【上海大学数字逻辑实验报告】六、时序电路

一、 实验目的 掌握同步二进制计数器和移位寄存器的原理。学会用分立元件构成2位同步二进制加计数器。学会在Quartus II上设计单向移位寄存器。学会在Quartus II上设计环形计数器。 二、 实验原理 同步计数器是指计数器中的各触发器的时钟脉冲输入端连接在一起&#xff0c;接…

FL Studio Producer Edition 21.2.2.3914中文汉化破解版新功能介绍及下载安装教程

FL Studio Producer Edition 21.2.2.3914中文汉化破解版 也就是 Image-Line 出品的一款功能强大的编曲软件&#xff0c;全名 Fruity Loops Studio 简称“FL Studio”今天突然的发现我们经常使用的水果音乐制作软件 FL STUDIO 居然从FL STUDIO 21.1.1 一下子跨越了版本号到了FL …

【产品经理】需求池和版本树

在这个人人都是产品经理的时代&#xff0c;每位入行的产品人进阶速度与到达高度各有不同。本文作者结合自身三年产品行业的经历&#xff0c;根据案例拆解产品行业的极简研发过程、需求池、版本树、产品自我优化等相关具体方法论。 一、产品研发的极简过程 1. 产品概述 产品就…

Server check fail, please check server xxx.xxx.xxx.xxx,port 9848 is available

记录一次服务调用中的错误 背景&#xff1a;我使用了nacos2.x的版本&#xff0c;同时在同一台服务器的三个docker容器中部署了nacos1、2、3&#xff0c;并将它们连接到了同一个docker网络 错误&#xff1a;Server check fail, please check server xxx.xxx.xxx.xxx,port 9848 …

C/C++,动态 DP 问题的计算方法与源程序

1 文本格式 #include <bits/stdc.h> using namespace std; typedef long long LL; const int maxn 500010; const int INF 0x3f3f3f3f; int Begin[maxn], Next[maxn], To[maxn], e, n, m; int size[maxn], son[maxn], top[maxn], fa[maxn], dis[maxn], p[maxn], i…

AI PC行业深度研究报告:AI PC革新端侧AI交互体验

今天分享的人工智能系列深度研究报告&#xff1a;《AI PC行业深度研究报告&#xff1a;AI PC革新端侧AI交互体验》。 &#xff08;报告出品方&#xff1a;华创证券&#xff09; 报告共计&#xff1a;28页 点击添加图片描述&#xff08;最多60个字&#xff09;编辑 一、硬件端…

轻松应用字典树

字典树&#xff08;Trie&#xff09;&#xff0c;也叫单词查找树或键树&#xff0c;是一种树形结构&#xff0c;属于哈希树的变种。它是一种针对字符串进行操作的数据结构&#xff0c;典型应用是用于统计和排序大量的字符串&#xff0c;如在搜索引擎系统中用于文本词频统计。其…