vue
文本插值
<span>Message: {{ msg }}</span>
响应式
ref()
<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';
let counter=ref(10);
function Add(){
counter.value++;
}
function Dec(){
counter.value--;
}
</script>
<template>
<button @click="Add">+</button>
<span v-text="counter"></span>
<button @click="Dec">-</button>
</template>
<style scoped>
</style>
reactive
<script setup>
import { ref,reactive,watchEffect } from 'vue'
let FirstName=ref("");
let LastName=reactive(
{
name:""
}
)
let FullName=ref("")
watchEffect(()=>{
FullName.value=FirstName.value+LastName.name;
})
</script>
<template>
<div>
姓<input type="text" v-model="FirstName"><br>
名<input type="text" v-model="LastName.name"><br>
全名{{ FullName }}
</div>
</template>
<style scoped>
</style>
计算属性
<script setup>
import { reactive, computed } from 'vue'
const author = reactive({
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
})
// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
return author.books.length > 0 ? 'Yes' : 'No'
})
</script>
<template>
<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>
</template>
渲染
条件渲染
v-if
<button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-show
<h1 v-show="ok">Hello!</h1>
列表渲染
const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
<script setup>
import { reactive} from 'vue';
let massage=reactive(
[
{
id:"message1",
name:"Tom"
},
{
id:"message2",
name:"Jenny"
}
]
)
</script>
<template>
<ul>
<li v-for="(m,index) in massage">
{{ index+1 }} {{ m.id}}:{{ m.name }}
</li>
</ul>
</template>
<style scoped>
</style>
事件处理
- 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
- 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
const count = ref(0)
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>
const name = ref('Vue.js')
function greet(event) {
alert(`Hello ${name.value}!`)
// `event` 是 DOM 原生事件
if (event) {
alert(event.target.tagName)
}
}
<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>
双向绑定
const checkedNames = ref([])
<div>Checked names: {{ checkedNames }}</div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>
侦听器
<script setup>
import { ref,reactive,watchEffect } from 'vue'
let FirstName=ref("");
let LastName=reactive(
{
name:""
}
)
let FullName=ref("")
watchEffect(()=>{
FullName.value=FirstName.value+LastName.name;
})
</script>
<template>
<div>
姓<input type="text" v-model="FirstName"><br>
名<input type="text" v-model="LastName.name"><br>
全名{{ FullName }}
</div>
</template>
<style scoped>
</style>
<script setup>
import { ref, watch } from 'vue'
const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')
const loading = ref(false)
// 可以直接侦听一个 ref
watch(question, async (newQuestion, oldQuestion) => {
if (newQuestion.includes('?')) {
loading.value = true
answer.value = 'Thinking...'
try {
const res = await fetch('https://yesno.wtf/api')
answer.value = (await res.json()).answer
} catch (error) {
answer.value = 'Error! Could not reach the API. ' + error
} finally {
loading.value = false
}
}
})
</script>
<template>
<p>
Ask a yes/no question:
<input v-model="question" :disabled="loading" />
</p>
<p>{{ answer }}</p>
</template>
生命周期
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log(`the component is now mounted.`)
})
</script>
组件
定义一个组件
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">You clicked me {{ count }} times.</button>
</template>
使用组件
<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>
<template>
<h1>Here is a child component!</h1>
<ButtonCounter />
</template>
<h1>Here is a child component!</h1>
<ButtonCounter />
<ButtonCounter />
<ButtonCounter />
传递 props
<!-- BlogPost.vue -->
<script setup>
defineProps(['title'])
</script>
<template>
<h4>{{ title }}</h4>
</template>
const props = defineProps(['title'])
console.log(props.title)
export default {
props: ['title'],
setup(props) {
console.log(props.title)
}
}
router
案例1
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router.js'
const app=createApp(App)
app.use(router)
app.mount('#app')
App.vue
<script setup>
import {ref} from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter();
let myPath=ref("")
function goMyPage(){
router.push(myPath.value)
}
</script>
<template>
<div>
<!-- 声明式路由 -->
<router-link to="/home">home</router-link>
<br>
<router-link to="/add">add</router-link>
<br>
<router-link to="/update">update</router-link>
<br>
<router-link to="/list">List</router-link>
<br>
<router-link to="/showAll">showAll</router-link>
<hr>
<!-- 编程式路由 -->
<button @click="goMyPage()">go</button>
<input type="text" v-model="myPath">
<router-view></router-view>
</div>
</template>
<style scoped>
</style>
router.js
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../components/Home.vue'
import Add from '../components/Add.vue'
import List from '../components/List.vue'
import Update from '../components/Update.vue'
let router =createRouter({
history:createWebHashHistory(),
routes:[
{
path:"/home",
component:Home
},
{
path:"/list",
component:List},
{
path:"/update",
component:Update
},
{
path:"/add",
component:Add
},
{
path:"/showAll",
redirect:"/list"
}
]
})
export default router
Add.vue
<script setup>
</script>
<template>
<div>
Add
</div>
</template>
<style scoped>
</style>
Home.vue
<script setup>
</script>
<template>
<div>
Home
</div>
</template>
<style scoped>
</style>
List.vue
<script setup>
</script>
<template>
<div>
List
</div>
</template>
<style scoped>
</style>
Update.vue
<script setup>
</script>
<template>
<div>
Update
</div>
</template>
<style scoped>
</style>
案例二
mian.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './routers/router'
const app=createApp(App);
app.use(router);
app.mount('#app');
App.vue
<script setup>
</script>
<template>
<div>
<router-view></router-view>
</div>
</template>
<style scoped>
</style>
router.js
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../components/Home.vue'
import Login from '../components/Login.vue'
const router=createRouter(
{
history:createWebHashHistory(),
routes:[
{
path:'/home',
component:Home
},
{
path:"/login",
component:Login
}
]
}
)
/* 前置守卫 */
router.beforeEach((to,from,next)=>{
if(to.path=='/login'){
next()
}else{
const username=sessionStorage.getItem("username");
if(null!=username){
next()
}else{
next("/login")
}
}
})
export default router;
Login.vue
<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
let router=useRouter();
let username=ref("");
let password=ref("");
function login(){
if(username.value=='root'&&password.value=='123456')
{
window.sessionStorage.setItem("username",username.value)
router.push("/home");
}else{
alert("用户名或密码有误")
}
}
</script>
<template>
<div>
账号：<input type="text" v-model="username">
<br>
密码：<input type="password" v-model="password">
<br>
<button @click="login()">确认</button>
</div>
</template>
<style scoped>
</style>
Home.vue
<script setup>
import {useRouter} from 'vue-router'
let username=window.sessionStorage.getItem("username")
const router=useRouter();
function logout(){
window.sessionStorage.removeItem("username");
router.push("/login");
}
</script>
<template>
<div>
<h1>Home页面</h1>
<h3>欢迎{{username}}登录</h3>
<br>
<button @click="logout()">退出登录</button>
</div>
</template>
<style scoped>
</style>
axios
axios是一个基于 promise 的 HTTP 库, 主要用于：发送异步请求获取数据。
常见的方法：
- axios(config)
- axios.get(url, [config])
- axios.post(url, [data])
发送数据config常用参数：
{
url: '请求的服务器',
method: '请求方式', // 默认是 get
// GET请求参数
params: {
参数名: 参数值
},
// POST请求参数, 如果使用axios.post,则参数在url之后直接书写,不需要该位置传递参数
data: {
参数名: 参数值
},
// 响应数据格式,默认json
responseType: 'json'
}
响应数据常用参数：
{
data: {}, //真正的响应数据(响应体)
status: 200, //响应状态码
statusText: 'OK', //响应状态描述
headers: {}, //响应头
config: {} //其他配置信息
}
案例
axios.js
import axios from 'axios'
const instance=axios.create({
baseURL:"https://api.uomg.com/"
})
//请求拦截器
instance.interceptors.request.use(
function(config){
console.log("请求前拦截器")
return config;
},
function(error){
console.log("异常方法"+error)
return Promise.reject("something wrong");
}
)
//响应拦截器
instance.interceptors.response.use(
function(response){
console.log(response)
return response;
},
function(error){
console.log(error);
return Promise.reject("wrong");
}
)
export default instance
App.vue
<script setup>
import request from './axios';
import {ref,reactive} from 'vue'
let message=reactive(
{
"code":1,
"content":""
}
)
function getLoveWords(){
let promise=request.post("https://api.uomg.com/api/rand.qinghua?format:json")
return promise;
/* return axios.get("rand.qinghua?format:json") */
}
async function getLoveMessage(){
let {data} =await getLoveWords();
Object.assign(message,data)
}
</script>
<template>
<div>
<h1 v-text="message.content"></h1><br>
<button @click="getLoveMessage()">变</button>
</div>
</template>
<style scoped>
</style>
Pinia
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
import {createPinia} from 'pinia'
let pinia=createPinia()
let app=createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')
App.vue
<script setup>
</script>
<template>
<div>
<router-link to="/operate">operate</router-link>
<br><router-link to="/list">list</router-link>
<hr>
<router-view ></router-view>
<router-view name="list"></router-view>
</div>
</template>
<style scoped>
</style>
store.js
import {defineStore} from 'pinia'
export const definedPerson=defineStore(
{
id:"personPinia",//全局唯一
state:()=>{
return {//响应式数据
username:"zhangsan",
age:0
}
},
getters:{//定义获得数据
getAge(){
return this.age
}
},
actions:{//修改数据
addAge(){
return this.age++;
}
}
}
)
router.js
import {createRouter,createWebHashHistory, routerKey} from 'vue-router'
import List from '../components/List.vue'
import Operate from '../components/Operate.vue'
let router =createRouter({
history:createWebHashHistory(),
routes:[
{
path:"/list",
component:List
},
{
path:"/operate",
components:{
default:Operate,
list:List
}
},
{
path:"/",
component:Operate
}
]
})
export default router
Operate.vue
<script setup>
import {definedPerson} from '../store/store'
let person=definedPerson()
</script>
<template>
<div>
名字：<input type="text" v-model="person.username">
<br>
年龄：<input type="text" v-model="person.age">
<br>
<button @click="person.addAge()">增加年龄</button>
<br>
<button @click="person.$reset()">恢复默认</button>
<br>
<button @click="person.$patch({username:'奥特曼',age:500})">变身</button>
<hr>
{{ person }}
</div>
</template>
<style scoped>
</style>
List.vue
<script setup>
import {definedPerson} from '../store/store'
let person=definedPerson()
</script>
<template>
<div>名字：<input type="text" v-model="person.username">
<br>
年龄：<input type="text" v-model="person.age">
<br>
<hr>
{{ person }}
</div>
</template>
<style scoped>
</style>
浙公网安备 33010602011771号