Vue3入门-01Api风格和模板语法
Vue API风格
Vue的组件可以按照两种不同风格书写：选项式API 和 组合式API
选项式API
组合式API
就相当于Vue2和Vue3代码风格的不同
选项式API
使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如data/methods/mounted。
选项所定义的属性都会暴露在函数内部的this上，它会指向当前组件实例
组合式API
通过组合式API，我们可以使用导入的API函数来描述组件逻辑。在单文件组件中，组合式API通常会与<script setup>来搭配使用，setup属性是一个标识，告诉VUE需要在编译时进行一些处理，让我们可以更简洁的使用组合式API。
<script setup>中的导入和顶层变量/函数都能够在模板中使用
如果想要通过组合式API，完成双向绑定，需要引入ref来声明响应式的变量
<script setup>
import { ref } from 'vue';
let msg = ref('hello world')
let age = ref(18)
function change() {
msg.value += '='
}
</script>
<template>
<div>
<h1>{{ msg }}</h1>
<p>{{ msg.split('').reverse().join('+') }}</p>
<p>{{ age + 1 }}</p>
<button @click="change">button</button>
</div>
</template>
<style ></style>
响应数据
选项式响应数据
可用data选项来声明组件的响应式状态；该data选项的值应为返回一个对象的函数；
data返回的顶层属性，都会被代理到组件实例(即方法和生命周期钩子的this上)
组合式响应数据
如果在组合式API中声明一般类型的数据，则其并不具有响应式。其中所谓的一般类型指的是常见数据类型 ：普通变量和对象变量。vue中 提供了ref()和reactive()函数来完成响应式数据的声明。
reactive()只对对象类型有效（对象、数组、Map、Set），对string\number\boolean这样的原始类型无效。
ref()常用于声明普通数据类型。reactive中声明的变量可以直接使用，而ref声明的一遍变量，只能使用==变量.value==。当值为对象类型时，会用reactive(),自动替换他的 .value
模板语法
内容渲染
v-text
v-text指令，将数据采用纯文本方式填充其空元素中。
v-html
v-html指令，将数据采用HTML语法填充到空元素中。
{{ }}
在元素中的某一位置采用纯文本的方式渲染数据。
双向绑定
v-modeal
v-modal双向数据绑定指令，视图数据和数据源同步
一般情况下v-model指令用在表单元素中：
- input/textarea会绑定value属性并真题
<input type="checkbox">和<input type="radio">会绑定check的数据，并真题<select>会绑定value属性并侦听change事件
v-model的修饰符
- .number:自动将用户的输入转为数值类型，如果不能转化为数值，则不就行
- .trim：自动过滤用户数据的首位空白字符
- .lazy：在"change"而非"input"时更新（即焦点脱离后）
属性绑定指令
- 响应式绑定元素属性 ,用
v=bind - 如果绑定的值是null或者undefined，那么该属性将会从渲染的元素上移除
动态绑定多个值（使用在class的绑定中）
<script setup>
import {reactive} from 'vue'
let attrs = reactive({
class:'error',
id='borderBlue'
})
</script>
<template>
<button v-bind="attrs">
这是个普通按钮
</button>
</template>
<style>
.error{
background-color:red;
color:white;
}
#borderBlue{
border:2px solid blue;
}
</style>
绑定class和style属性
class和style可以和其他属性一样使用v-bind将他们的动态的字符串绑定；但是在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且容易出错的；因此Vue专门为class和style的v-bind用法提供了特殊的功能增强；除了字符串外，表达式的值也可是是对象或数组。
对象绑定
<script setup>
import {reactive} from 'vue'
let attrs = reactive({
error:false,
borderBlue:false
})
</script>
<template>
<input type="checkbox" v-model="attrs.error">error
<input type="checkbox" v-model="attrs.borderBlue">border
<br>
<br>
<button :class="attrs">
这是个普通按钮
</button>
</template>
<style>
.error{
background-color:red;
color:white;
}
.borderBlue{
border:2px solid blue;
}
</style>
数组
略
style绑定
略
条件渲染指令
v-if/v-else-if/v-else
- v-if指令用于条件性渲染元素；该内容只会在指令的表达式返回时才被渲染
- v-else-if提供的是响应于v-if和else if区块，他可以连续多次重复使用
- v-else 为一组指令的结尾，不可单独使用
<script setup>
import {reactive} from 'vue'
let info = reactive({
isShow : false,
age :20
})
</script>
<template>
是否显示<input type="checkbox" v-model='info.isShow'>
<hr>
年龄：<input type='ragne'
min="0" max="100" v-model="age"> {{age}}
<hr>
<h1 v-if="age<18">
未成年
</h1>
<h1 v-else-if="age<60">
中成年
</h1>
<h1 v-else>
老成年
</h1>
</template>
v-show
- v-show按条件显示一个元素的指令
- v-show会在DOM渲染中保留该元素
- 仅是在该元素名上为display的css属性
- v-show不能作用域template
v-show 与 v-if比较
- v-if是按条件渲染，确保了在切换时在条件区块内的事件监听器和子组件都会被销毁和重建
- v-if 如何在初试渲染时条件为false就直接跳过不渲染
- v-show不管是否为true都渲染，只不过不一定展示出来
- v-if有更高的切换开销，v-show有更高的初始化开销；如果切换频繁，使用v-show更好
事件绑定
通过v-on(@)来完成对DOM事件的监听，例如 v-on:click=“或@click=""
事件修饰符
- .prevent:阻止默认行为
- .stop：阻止事件冒泡
- .capture:以捕捉的模式触发当前的时间处理函数
- 给元素增加一个监听器
- 当元素产生冒泡时先出法该修饰符的事件
- 如果有多个修饰符，则由外向内依次触发（逆向冒泡）
- .once 绑定的时间只触发一次
- .self：只有在event.target是当前元素自身时触发事件处理函数
- 一般情况下若在div设置响应函数，div中的元素点击后同样起作用
- 下例中div的click设置为self，点击button后并不会有事件响应
- .passice：向浏览器表明了不想阻止事件的默认行为
//组合式
<script setup>
function say(name){
window.alert('你好'+name);
}
</script>
//选项式
<script>
export default{
methods:{
say(name){
window.alert('你好:'+name)
}
}
}
</script>
<template>
<div @click.self="say('DIV')">
<button>
我是一枚普通按钮
</button>
</div>
</template>
按键修饰符
按键类型.enter、 .tab、.esc、.space、.up、.down、.left、.right、.delete、.shift
系统修饰符：.ctrl\.alt\.shift\.meta
准确修饰符：.exact
如果不加.exact将剩余的组合，其表达的意思就是只要包含按键就满足输入要求，如果加上.exact，只有包含设置的修饰符才能触发输入。
<template>
<input @keydown.enter="showMessage('你按下了Enter键')">
<!--只有按下的键中包含Enter才能触发-->
<input @keydown.shift.enter.exact="showMessage('只有同时按下Shift和Enter才能触发输入')">
</template>
鼠标修饰符
鼠标按键修饰符：.right\.left\.middle
列表渲染指令
v-for渲染数组
方法一：获取item
<script setup>
import {ref} from 'vue'
let subject = ref([
{id:1,name:'html'},
{id:2,name:'css'},
{id:3,name:'js'},
{id:4,name:'React'},
{id:5,name:'Vue'},
{id:6,name:'jQuery'},
{id:7,name:'Java'},
])
</script>
<template>
<ul>
<li v-for="item in subject" :key="index">{{"id:" + item.id + ";name:" + item.name}}</li>
</ul>
</template>
方法二：将内容解构
<script setup>
import {ref} from 'vue'
let subject = ref([
{id:1,name:'html'},
{id:2,name:'css'},
{id:3,name:'js'},
{id:4,name:'React'},
{id:5,name:'Vue'},
{id:6,name:'jQuery'},
{id:7,name:'Java'},
])
</script>
<template>
<ul>
<li v-for="{id,name} in subject" :key="index">{{"id:" + item.id + ";name:" + item.name}}</li>
</ul>
</template>
方法三：将对象分为不同单个对象和下标
<script setup>
import {ref} from 'vue'
let subject = ref([
{id:1,name:'html'},
{id:2,name:'css'},
{id:3,name:'js'},
{id:4,name:'React'},
{id:5,name:'Vue'},
{id:6,name:'jQuery'},
{id:7,name:'Java'},
])
</script>
<template>
<ul>
<li v-for="(item,index) in subject" :key="index">{{"id:" + item.id + ";name:" + item.name}}</li>
</ul>
</template>
v-for渲染对象
方法一：返回属性值
<script setup>
import {ref} from 'vue'
let subject = reactive({
number:"007",
name:"张三",
age:18
})
</script>
<template>
<ul>
<li v-for="value in subject" >{{value}}</li>
</ul>
</template>
方法二：返回属性值和属性名
<script setup>
import {reactive} from 'vue'
let subject = reactive({
number:"007",
name:"张三",
age:18
})
</script>
<template>
<ul>
<li v-for="(value,name) in subject" >{{name+":" +value}}</li>
</ul>
</template>
方法三：返回属性值、属性名和下标
<script setup>
import {reactive} from 'vue'
let subject = reactive({
number:"007",
name:"张三",
age:18
})
</script>
<template>
<ul>
<li v-for="(value,name,index) in subject" :key="index">{{name+":" +value}}</li>
</ul>
</template>
通过key管理状态
当列表的数据发生变化时，默认情况下vue会尽可能的复用已存在的DOM，从而提升渲染的性能；但这种默认的性能优化策略，会导致有状态的列表无法被正常更新，为了给vue一个提示，以便它能够跟踪每个节点的身份，从而保证在有状态的列表被正确更新的前提下，提升渲染的性能；此时就要为每一项提供一个唯一的 key属性。
key属性的注意事项：
- key的类型只能是Number/String
- key值必须具有唯一性
- 使用指令v-for指令时指定key的值
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
