js文本绑定
<template>
<span>Message:{{ message }}</span>
</template>
<script>
export default{
data() {
return {
message:"Hello"
}
},
}
</script>
属性绑定
v-bind/: ,不能使用双括号
<div :class="attr">属性绑定</div>
attr:"red",
<style>
.red{
color: red;
}
</style>
动态属性绑定,对象绑定,对象的key就是属性名,对象的value就是属性值
数组:
<div :class="[activeClass, errorClass]"></div>
activeClass为真显示属性,为假不显示属性
对象:
<template>
<div v-bind="objAttr">动态绑定</div>
</template>
objAttr:{
id:"container",
class:"wrapper"
}
#container{
font-size:20px;
}
.wrapper{
color: blue;
}
声明响应状态
ref()接收简单类型的参数,内部值包装在特殊对象中内部值包装在特殊对象中,在js中使用.value获取对象值,可以是数组或对象
<script setup>
import {ref} from "vue"
const count = ref(0)
console.log(count.value);
function addCount(){
count.value++;
}
</script>
<div>count的值:{{ count }}</div>
<button @click="addCount">count++{{ count }}</button>
reactive():
使对象本身具有响应性
import {reactive} from "vue"
const user = reactive({
name:"李四",
sex:"男"
})
function changeName(){
user.name = "张三"
}
<div>{{ user.name }}</div>
<button @click="changeName">修改姓名</button>
reactive()的局限
-
有限的值类型:它只能用于对象类型 (对象、数组和如
Map
、Set
这样的集合类型)。它不能持有如string
、number
或boolean
这样的原始类型。 -
不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象,因为这样的话与第一个引用的响应性连接将丢失
-
对解构操作不友好:当我们将响应式对象的原始类型属性解构为本地变量时,或者将该属性传递给函数时,我们将丢失响应性连接
setup:
方法一:
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">
{{ count }}
</button>
</template>
方法二:
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
function increment() {
// 在 JavaScript 中需要 .value
count.value++
}
// 不要忘记同时暴露 increment 函数
return {
count,
increment
}
}
}
计算属性:计算属性值会基于其响应式依赖被缓存
import {ref,reactive,computed} from "vue"
const teacher = reactive({
name:"lisa",
classes:["class1","class2","class3"]
})
const classNum = computed(()=>{
return teacher.classes.length
})
<button @click="changeName">修改姓名{{ user }}</button>
<div>{{ teacher.name }}教授班级数量{{ classNum }}</div>
计算属性默认是只读的。但可以用setter,getter成为可读可写
const change = computed(()=>{
//getter
get(){};
//setter
set(){};
})
条件渲染
v-if:
<div v-if="one">能看见1</div>
<div v-else-if="two">能看见2</div>
<div v-else>前面的内容无法看见</div>
const one = ref(false)
const two = ref(false)
v-show
<div v-show="three">使用show的方式</div>
const three = ref(true)
v-show不支持在<template>元素使用,不能和v-else搭配使用
v-if VS v-show:
v-show:无论条件如何,始终会被渲染
v-if:只有个条件为真时才会被渲染
列表渲染
<div>
<ul>
<li v-for="item,index in items" :key="index">{{ item }}-----{{ index }}</li>
</ul>
</div>
const items = ref(["tea","cofe","milk"])
事件处理
v-on/@click
事件传参
<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
Submit
</button>
function warn(message, event) {
// 这里可以访问原生事件
if (event) {
event.preventDefault()
}
alert(message)
}
事件修饰符
.stop
.prevent
.self
.capture
.once
.passive
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如:事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>
表单绑定
<p>Message is: {{ text }}</p>
<input v-model="text" placeholder="edit me" />
const text = ref('')
v-model
不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新,请直接使用自己的 input
事件监听器和 value
绑定而不要使用 v-model
。
修饰符:
.lazy input输入完之后显示
.number:将输入自动转化为数字
.trim:去字符串前后两端的空格
注意:v-model只能运用在<textarea>
、<select><input>等元素中
侦听器(watch())
<template>
<button @click="changeQ">改变question的值</button>
<div>{{ question }}</div>
</template>t
<script setup>
import {ref,watch} from 'vue'
const question = ref('')
const answer = ref('this is an answer.....')
watch(question,(newValue,oldValue)=>{
console.log('question的值发生了变化。。。。');
})
function changeQ(){
question.value = '修改question后的值'
}
</script>
深层监听:不能直接侦听响应式对象的属性值
{deep:true}
强制侦听器的回调立即执行
{immediate: true}
组件基础
<template>
<h1>home界面</h1>
</template>
<template>
<home></home>
</template>
<script setup>
import Home from './components/Home.vue'
components:{
Home
}
</script>
<style>
</style>
传递props
插槽
<template>
<h1>home界面</h1>
<slot></slot>
</template>
<template>
<home>home插槽</home>
</template>
动态组件