Vue3小白学习_vue3三目运算-优快云博客

本文链接：https://blog.youkuaiyun.com/liyibowen2006/article/details/143722271

这篇文章呢，是我在学习Vue时候记录的一些笔记，想拿出来做个分享，也方便像我一样的小白学习，如果哪里有不正确的地方麻烦各位大佬指点一二，希望可以一起学习交流~

注：如果需要查看网页接受到的数据信息，则在Edge中按F12，打开调试台查看
更改完代码之后记得每次保存，保存之后网页才能修改为调整后的结果
1、输出文本

<p>{{ message }}</p>
message:"内容"
通过定义变量message的方式实现文本的输出
2、输出原始html

使用v-html指令（示例如下）
<div v-html="rawHtml"></div>
rawHtml:"<a href='https://www.youkuaiyun.com/'>优快云</a>"
3、动态将id赋给属性

使用v-bind:指令(v-bind:可以直接简写为:)
<div v-bind:id="dynamicId"></div>
dynamicId:10001
4、使用JavaScript表达式（只能是表达式，不能是语句）

<p>{{ xxx+x }}</p>
定义变量xxx
三目运算符（不能使用流程控制，只能用三元表达式）
<p>{{ flag ? "C语言" : "Python"}}</p>（对flag进行判断，如果是true则返回C语言，如果false则返回Python）
flag:true
5、v-if指令用于条件性的渲染一块内容

这块内容只在指令的表达式返回true的时候被渲染
用v-else指令实现v-if的"else"块
<p v-if="flag">123</p>
<p v-else>12345</p>
flag:ture
选择语句输出⬆
<div v-if='flag'>
   <p>1</p>
   <p>1</p>
   <p>1</p>
</div>
选择多条语句一块输出⬆
6、v-show

<p v-show="flag">123456789</p>
flag:true
v-show和v-if用法相似，但v-show只能做出一种选择，v-if,v-else可以组成结构
v-if会在切换过程中，将条件块内的事件监听器和子组件适当的销毁和重建
v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换
v-if有更高的切换开销，而v-show有更高的初始渲染开销，如果需要频繁切换，使用v-show较好，如果在运行时条件很少改变，则使用v-if较好
7、列表渲染

v-for把一个数组映射为一组元素
v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，item是被迭代的数组元素的别名
示例代码⬇（message为定义的变量，items也可以进行替换，为定义的列表名称）
<ul>
<li v-for="item in items">{{ item.message }}</li>
</ul>
data(){
return {
items: [{ message: 'Foo' },{ message: 'Bar'}]
}
}
给Vue一个提示，使它跟踪每个节点的身份，重用和重排现有元素，需要给每项提供一个唯一的key
<div v-for="(item,index) in items" :key="item.id（或者写index）">

</.div>
8、事件处理

（1）监听事件
用v-on指令监听DOM事件，并在触发事件时执行一些Javascript，用法示例⬇
<button v-on:click="methodName">Add 1</button>
data(){
   return{
   methodName:0
   }
}
v-on可以直接简写为@
（2）事件处理方法
用法示例⬇
<button @click="greet">Greet</button>
methods: {
   greet(event) {
       if(event){
           alert(event.target.tagName)
       }
   }
}
在事件之中可以传递不同的参数
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>
methods:{
   say(message){
       alert(message)
   }
}
9、表单输入绑定

直接贴代码
<template>
<div class="hello">
<input type="text" v-model="username">
<button @click="clickGetUserName">获取用户名</button>
</div>
</template>

如果在style中添加此属性，就代表着，当前样式，只在当前组件中生效
11、Props组件交互

Prop用于在组件上注册一些自定义的attribute
<my-componentVue title="标题"/>
<template>
<h3>单文件组件</h3>
<p>{{ title }}</p>
</template>
<script>
export default{
name:"MyComponment",
props:{
title:{
type:String,
default:""
}
}
}
</script>
Prop传递参数无类型限制
Prop类型：
props:{
   title: String,
   likes: Number,
   isPublished: Boolean,
   commentIds: Array,
   author: Object,
   callback: Function
}
数据类型为数组或者对象的时候，默认值需要返回工厂模式
工厂模式：工厂模式（Factory Pattern）是 Java 中最常用的设计模式之一，它提供了一种创建对象的方式，使得创建对象的过程与使用对象的过程分离。工厂模式提供了一种创建对象的方式，而无需指定要创建的具体类。通过使用工厂模式，可以将对象的创建逻辑封装在一个工厂类中，而不是在客户端代码中直接实例化对象，这样可以提高代码的可维护性和可扩展性。
12、自定义事件组件交互

Prop是将数据从父组件传递到子组件，如果想要实现反向操作，则需要利用自定义事件实现$emit
子组件中代码如下⬇
<template>
<h3>自定义事件传递数据</h3>
<button @click="sendClickHandle">点击传递</button>
</template>

<script>
export default {
name: 'MyComponent',
data(){
return{
message:"我是一个数据"
}
},
methods:{
sendClickHandle(){
this.$emit("onEvent",this.message) //此函数内需要加入两个参数，参数1：字符串，理论上是随便的，但是需要具有意义；参数2：要传递的数据
}
}
}
</script>
还需要在父组件中做相应处理才能运行
在template中，添加该子组件的标签中加入@onEvent（参数一加入的字符串）="getDataHandle（自定义函数名）"
上面写的那个getDataHandle需要当作一个事件来看待，所以还需要在export default中添加进methods来接受这个数据
methods:{
getDataHandle(data){
console.log(data) //在调试台中把这个打印出来
}
}
保存之后刷新运行调试，F12调试台中就可以看到发送的数据了
如果想把接收到的数据显示出来呢，就在export default{}中加入一个data()函数，再在data()中加入一个
return{
message:""
}
并在getDataHandle(data)中加入一个this.message = data
将数据赋值给message，然后在template中添加一个<p>{{ message }}</p>显示该数据就可以了