【vue】vue基础知识

1、插值表达式&属性绑定

<!--template展示给用户,相当于MVVM模式中的V-->
<template><div class="first_div">//插值表达式<p>{{ message }}</p>//这里的参数是从父组件的template里传过来的<p>{{data_1}}</p>//v-开头的是vue中的指令,使用v-bind来绑定属性(单向绑定,只能将model中的数据传给绑定的属性)),可以动态改变属性值<span v-bind:title="dream">学好vue不是梦!</span></div>
</template><!--<script>模块是m和vm结合的地方-->
<script>
export default {name: "greeting.vue",//函数data() {//return返回的是一个对象,可以是后端返回的数据return {message:"这是一个插值表达式的值",dream:"小目标"//把这个绑定为标签属性值用到v-bind:}},props:{data_1:String}
}
</script>
<!--设置元素样式的模块-->
<style scoped>
.first_div p{color: red;
}
</style>
<div id="app"><pre><a v-bind:href="url">菜鸟教程</a></pre></div><script>new Vue({el: '#app',data: {url: 'http://www.runoob.com'}})
</script>
在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写:

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

2、v-if和v-show

<!--    v-if 指令将根据表达式 ifgao 的值(true 或 false )来决定是否插入 p 元素,会对DOM的新建和删除操作,增加前端开销 --><p v-if="ifgao">我是最帅的人~!!</p>
<!--    v-show 每次不会重新删除或者创建,只是改变了元素的可见属性display:none,一般会使用v-show而不是v-if--><p v-show="ifgao">我是最帅的人~!!</p>
<!--  v-if\v-else-if\v-else的用法--><p v-if="age>=70">{{username}},老人家你该休息了~</p><p v-else-if="age>=18">{{username}},欢迎光临,请开始吃鸡!~</p><p v-else>{{username}},小朋友,你的作业写完了吗!~</p>data() {return {message: "这是一个插值表达式的值",dream: "小目标",ifgao:true,username:"帅哥",age:16}

3、v-on_element_ui

 v-on 指令,它用于监听 DOM 事件:

<a v-on:click="doSomething">

在这里参数是监听的事件名。

v-on

<template><div class="first_div">
<!--    v-on:可以缩写成@--><p v-on:click="username='大佬们'">{{username}},我是v-on~</p><p @click="username='大佬们menmen'">{{username}},我是v-on~的缩写@</p><p v-on:click="changeusername">{{username}},我是v-on的函数变量~</p></div>
</template><script>
export default {name: "greeting.vue",data() {return {message: "这是一个插值表达式的值",dream: "小目标",ifgao:true,username:"帅哥",age:16}},props:{data_1:String},methods:{changeusername:function (){this.username="dalao"}},created() {console.log("实例创建之后,能够获取到this");console.log("username为:",this.username);},mounted() {console.log("vue实例挂载到dom之后")}
}
</script>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

4、v-for

<table>
<tr><th v-for="(header_name,key) in project_header" v-bind:key="key">{{ header_name }}</th>
</tr>
<tr v-for="(item,key) in projects" v-bind:key="key"><td>{{ item.name }}</td><td>{{ item.leader }}</td><td>{{ item.app_name }}</td>
</tr>
</table>
</template>
<script>
export default {name: "projectlist",data(){return{project_header:["项目名称","负责人","应用名称"],projects:[{name:"吊炸天的项目",leader:"飞天小子",app_name:"很牛逼的应用"},{name:"非常厉害的项目",leader:"小旋风",app_name:"很神秘的应用"},{name:"很完美的项目",leader:"阿童木",app_name:"666的应用"}]}}
}
</script>

5、v-bind:使用v-bind来绑定属性

单向绑定,只能将model中的数据传给绑定的属性

v-model:

双向绑定:既能将model中的数据传给绑定的属性,也能将绑定的属性值传给model;

只能在input,textarea,select元素中使用;

1、插值表达式1 子组件中使用{{ msg}}插值,在<script>的export default中使用data(){return{msg:""}}传值;

2、插值表达式2 父组件中传入msg="",在子组件中使用{{ msg}}插值,在<script>的export default中使用props:{msg:String}

3、创建全局组件,在main.js文件中创建

import loginNew from "@/components/loginNew";
//创建全局组件
Vue.component('login-New',loginNew);//这样就不用在父组件内导入(import)和声明(components)子组件了
然后在App.vue根组件中调用就可以了,(不需要再去导入和声明了)
<login-New></login-New>

6、插槽

6.1 普通插槽

1、在父组件中直接调用子组件的标签,是可以渲染出子组件的内容;如果在子组件标签中添加了内容,父组件就渲染不出来了;

2、如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容,那么父组件中的会覆盖子组件插槽中的内容;

以父组件为loginnew,子组件为hello-world为例;

<!--父组件loginnew.vue->>
<hello-world></hello-world>
<hello-world>这是个hello-world插槽位</hello-world>
<!--如果想要渲染出父组件中调用子组件标签中的内容,就要在子组件中添加插槽-->
<!--子组件hello-world.vue文件-->
<!--如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容,那么父组件中的会覆盖子组件插槽中的内容-->
<slot><p>hello-world:我们一起学猫叫</p></slot>

6.2 具名/命名插槽

父组件:

<div><hello-world><!--    方法二  命名插槽--><!--    在vue2.6之前版本--><p slot="part1">一起喵喵喵</p><!--    在vue2.6之后版本--><template v-slot:part2><p>在你面前撒个娇</p></template><!--       v-slot:可以简写成"#" --><template #part3><p>还是喵喵喵喵</p></template><!--        插槽作用域:父组件调取子组件的插槽内部要获取子组件的属性--><!--        2.6 之前--><p slot="part4" slot-scope="scope">{{ scope.user }}我得心脏砰砰跳</p><template slot="part5" slot-scope="scope"><p>{{ scope.user }}我得心脏砰砰跳aaaaaa</p></template><!--        2.6 之后--><template v-slot:part6="scope"><p>{{scope.user}}都是你的味道</p></template><template v-slot:part7="{user}"><p>{{user}}都是你的味道</p></template></hello-world></div>

子组件:

    <!--    第一种方式-->
<!--    <slot></slot>--><!--    第二种方式--><slot><p>我们一起学猫叫</p></slot><!--    第三种方式 命名插槽--><slot name="part1"></slot><slot name="part2"></slot><slot name="part3"></slot>
<!--    插槽作用域--><slot name="part4" :user="username"></slot><slot name="part5" user="六啊"></slot><slot name="part6" user="七啊"></slot><slot name="part7" user="八啊"></slot>

6.3 作用域插槽

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

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

相关文章

【转】金融行业JR/T0197-2020《金融数据安全 数据安全分级指南》解读

原文链接&#xff1a;金融行业JR/T0197-2020《金融数据安全 数据安全分级指南》解读 《金融数据安全 数据安全分级指南》 解 读 随着IT技术的发展&#xff0c;银行的基础业务、核心流程等众多事务和活动都运营在信息化基础之上&#xff0c;金融机构运行过程中产生了大量的数字…

【JavaEE进阶】Spring核心与设计思想

文章目录 一. Spring框架概述1. 什么是Spring框架2. 为什么要学习框架?3. Spring框架学习的难点 二. Spring 核心与设计思想1. 什么是容器?2. 什么是IoC?3. Spring是IoC容器4. DI&#xff08;依赖注入&#xff09;5. DL&#xff08;依赖查找&#xff09; 一. Spring框架概述…

栈和队列的实现以及OJ题讲解

&#x1f493;博主个人主页:不是笨小孩&#x1f440; ⏩专栏分类:数据结构与算法&#x1f440; 刷题专栏&#x1f440; C语言&#x1f440; &#x1f69a;代码仓库:笨小孩的代码库&#x1f440; ⏩社区&#xff1a;不是笨小孩&#x1f440; &#x1f339;欢迎大家三连关注&…

【阵列信号处理】空间匹配滤波器、锥形/非锥形最佳波束成形器、样本矩阵反演 (SMI) 研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

回归预测 | MATLAB实现POA-CNN-LSTM鹈鹕算法优化卷积长短期记忆神经网络多输入单输出回归预测

回归预测 | MATLAB实现POA-CNN-LSTM鹈鹕算法优化卷积长短期记忆神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现POA-CNN-LSTM鹈鹕算法优化卷积长短期记忆神经网络多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现POA-CNN…

Michael.W基于Foundry精读Openzeppelin第20期——EnumerableMap.sol

0. 版本 [openzeppelin]&#xff1a;v4.8.3&#xff0c;[forge-std]&#xff1a;v1.5.6 0.1 EnumerableMap.sol Github: https://github.com/OpenZeppelin/openzeppelin-contracts/blob/v4.8.3/contracts/utils/structs/EnumerableMap.sol EnumerableMap库提供了Bytes32ToB…

快速远程桌面控制公司电脑远程办公

文章目录 第一步第二步第三步 远程办公的概念很早就被提出来&#xff0c;但似乎并没有多少项目普及落实到实际应用层面&#xff0c;至少在前几年&#xff0c;远程办公距离我们仍然很遥远。但2019年末突如其来的疫情&#xff0c;着实打了大家一个措手不及。尽管国内最初的大面积…

新魔百和M301H_关于CW代工_JL(南传)代工_zn及sm代工区分及鸿蒙架构全网通卡刷包刷机教程

新魔百盒M301H_关于CW代工_JL(南传)代工_zn及sm代工区分及鸿蒙架构全网通卡刷包刷机教程 下载固件之前我们先区分下代工&#xff1a; 如盒子背面型号标签上带有ZN则视为兆能代工&#xff0c;如有CW或BYT则视为创维代工&#xff1b; 如有JL或南传则视为九联代工&#xff0c;ys…

机器学习---概述(一)

文章目录 1.人工智能、机器学习、深度学习2.机器学习的工作流程2.1 获取数据集2.2 数据基本处理2.3 特征工程2.3.1 特征提取2.3.2 特征预处理2.3.3 特征降维 2.4 机器学习2.5 模型评估 3.机器学习的算法分类3.1 监督学习3.1.1 回归问题3.1.2 分类问题 3.2 无监督学习3.3 半监督…

网络安全防火墙体验实验

网络拓扑 实验操作&#xff1a; 1、cloud配置 2、防火墙配置 [USG6000V1]int GigabitEthernet 0/0/0 [USG6000V1-GigabitEthernet0/0/0]ip add 192.168.200.100 24 打开防火墙的所有服务 [USG6000V1-GigabitEthernet0/0/0]service-manage all permit 3、进入图形化界面配置…

阿里云容器服务助力极氪荣获 FinOps 先锋实践者

作者&#xff1a;海迩 可信云评估是中国信息通信研究院下属的云计算服务和软件的专业评估体系&#xff0c;自 2013 年起历经十年发展&#xff0c;可信云服务评估体系已日臻成熟&#xff0c;成为政府支撑、行业规范、用户选型的重要参考。 2022 年 5 月国务院国资委制定印发《…

【周末闲谈】“深度学习”,人工智能也要学习?

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️周末闲谈】 系列目录 ✨第一周 二进制VS三进制 ✨第二周 文心一言&#xff0c;模仿还是超越&#xff1f; ✨第二周 畅想AR 文章目录 系列目录前言机器学习深度学习深度学习的三在种方法深度学习讲解…

Godot 4 源码分析 - Path2D与PathFollow2D

学习演示项目dodge_the_creeps&#xff0c;发现里面多了一个Path2D与PathFollow2D 研究GDScript代码发现&#xff0c;它主要用于随机生成Mob var mob_spawn_location get_node(^"MobPath/MobSpawnLocation")mob_spawn_location.progress randi()# Set the mobs dir…

RIP Bram Moolenaar

Grateful for your work on Vim and for the impact Vim has had on the world. Thank you for everything, Bram.

Kubespray-offline v2.21.0-1 下载 Kubespray v2.22.1 离线部署 kubernetes v1.25.6

文章目录 1. 目标2. 预备条件3. vcenter 创建虚拟机4. 系统初始化4.1 配置网卡4.2 配置主机名4.3 内核参数 5. 打快照6. 安装 git7. 配置科学8. 安装 docker9. 下载介质9.1 下载安装 docker 介质9.2 下载 kubespray-offline-ansible 介质9.3 下载 kubernetes 介质 10. 搬运介质…

浅析大数据时代下的视频技术发展趋势以及AI加持下视频场景应用

视频技术的发展可以追溯到19世纪初期的早期实验。到20世纪初期&#xff0c;电视技术的发明和普及促进了视频技术的进一步发展。 1&#xff09;数字化&#xff1a;数字化技术的发明和发展使得视频技术更加先进。数字电视信号具有更高的清晰度和更大的带宽&#xff0c;可以更快地…

8.15锁的优化

1.锁升级(锁膨胀) 无锁 -> 偏向锁 -> 轻量级锁 -> 重量级锁 偏向锁:不是真的加锁,而是做了一个标记,如果有别的线程来竞争才会真的加锁,如果没有别的线程竞争就不会加锁. 轻量级锁:一个线程占领锁资源后,另一个线程通过自旋的方式反复确认锁是否被是否(这个过程比较…

重零搭建SpringSecurity +JWT

1、前期工作&#xff08;创建父工程&#xff0c;导入依赖&#xff09; 2、创建启动类 3、测试项目&#xff0c;启动后访问8080端口、hello看有没有页面 4、引入springSecurity依赖&#xff08;重新启动&#xff0c;再访问/hello,会跳转到登录页面&#xff0c;用户名是 user,密码…

websocket

一、聊天室模式 0.效果图&#xff1a; 1.后端代码 1.1 导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><exclusions><exclusion><groupId>org.s…

windows部署springboot项目 jar项目 (带日志监听和开机自起脚本)

windows部署springboot项目 jar项目 &#xff08;带日志监听&#xff09; 1.把项目打包成jar包&#xff0c;本例演示打包后的jar文件名为demo.jar ———————————————— 2.需要装好java环境&#xff0c;配置好JAVA_HOME&#xff0c;CLASSPATH&#xff0c;PATH等…