Vue的V-XXX的用法和区别（部分）与新建View

注：均把<templet>标签省略

一、Vue的V-XXX的用法和区别（部分）

1. v-show与v-if

<h1 v-show="true">v-show="true"</h1>
<h1 v-show="false">v-show="false"</h1>
<!-- v-show 与v-if的区别：if会直接从dom中删除元素，show仅仅设置dispaly为none -->
<h1 v-if="false">v-if="false"</h1>
<h1 v-if="true">v-if="true"</h1>

2. v-on:change

<input type="text" value="a" v-on:change="fun2()"/>
//和@change相同
<script setup>
	let fun1 =()=>{alert(123)};
	function fun2(){alert(231)};
</script>

在鼠标点击input之后输入再移动到外部点击，则会触发事件，但我不知道为什么会出错

3. v-bind

v-bind:value=""相当于:value=""

4. v-html

<p v-html="message"></p>
<script setup>
const message = "<a href='https://www.baidu.com'>百度百科</a>"
</script>

点击百度百科就会跳转，颜色会变

定义对象的两种非常规方式

<script setup>
let d= {
		d1:'d1',
		d2:2
	}
let e={}
e.e1= 1
</script>

5. v-for

        <h3 v-for="item in menus">{{item.name}} : ${{item.price}}</h3>
		<h3 v-for="(item , index) in menus">{{item.name}} : ${{item.price}}</h3>
		<button @click="fun3">按钮1</button>
		<h3 v-for="(item , index) in menus1">{{item.name}} : ${{item.price}}</h3>
		<button @click="fun4">按钮2</button>
		<h3 v-for="(item , index) in menus2">{{item.name}} : ${{item.price}}</h3>
		<button @click="fun5">按钮3</button>
<script setup>
    let menus = [
		{name:'doif',price:12},
		{name:'安定',price:24},
		{name:'联机',price:20}
	]
	let fun3 =()=>{
		menus[0].price += 10
	};
	let menus1 = ref([
		{name:'doif',price:12},
		{name:'安定',price:24},
		{name:'联机',price:20}
	])//ref定义
	let fun4 =()=>{
		// menus1[0].price += 10无法修改
		menus1.value[0].price += 10//可以修改
	};
	let menus2 = reactive([
		{name:'doif',price:12},
		{name:'安定',price:24},
		{name:'联机',price:20}
	])//reactive定义
	let fun5 =()=>{
		menus2[0].price += 10
	};
</script>

点击按钮1后，内存的值已经被修改，只是未刷新，所以点击按钮2或3时，界面刷新会将1所修改的值更新

6. v-model

<input type="text" name="" id="" v-model="input_t" @change="fun6"/>//同步更改
<script setup>
let input_t = ''
	let fun6 = ()=>{
		alert(input_t)
	}
</script>

尝试一个登录界面

    <div>
		<label>账户:</label>
		<input type="text" name="" id="" v-model="phone"/>
	</div>
	<div>
		<label>密码:</label>
		<input type="text" name="" id="" v-model="password"/>
	</div>
	<div>
		<button @click="fun7">重置</button>
		<button @click="fun8">提交</button>
	</div>
<script setup>
let phone =''
	let password =''
	const phone1 = '1111'
	let fun7 = ()=>{
		phone = ''
		password = ''
		console.log(phone + " " + password)//不会更改输入的值，但内容已经改了，把定义的phone。。变成ref,改的时候使用.value即可
	}
	let fun8 = ()=>{
		if(phone == phone1){
			alert("手机号重复了")
			return
		}
		console.log(phone + " " + password)
	}
</script>

新增页面

1.在views文件夹中新建vue文件

id需要命名

2.在router下的index.ts中加入Vue

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import TwoView from '../views/Two.vue'//导入

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
	{//在此处新增
		path: '/two',
		name: 'two_name',
		component:TwoView
	}
  ]
})

export default router

3.在App.Vue中加入跳转页面

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
		<RouterLink to="/two">Two</RouterLink>//在此处新增
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

页面跳转

1.在另一页面中使用用以跳转到TWO

<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'
import { useRouter } from 'vue-router';//导入
	const router = useRouter()
	let fun1 =() =>{
		router.push({
			path:'/two'
		})
	}//格式
</script>

<template>
  <!-- <main>
    <TheWelcome />
  </main> -->
  <button @click="fun1">跳转TWO</button>
</template>

2. 跳转传参

2.1 传给TWO

<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'
import { useRouter } from 'vue-router';//导入
	const router = useRouter()
	let fun1 =() =>{
		router.push({
			path:'/two',
			query:{
				id:3
			}//加入参数
		})
	}//格式
</script>

<template>
  <!-- <main>
    <TheWelcome />
  </main> -->
  <button @click="fun1">跳转TWO</button>
</template>

2.2 获得id

<template>
	<div id="two">
		<h1> two </h1>
	</div>
</template>

<script setup>
	import { useRoute } from 'vue-router';
	const route = useRoute()
	let id = route.query.id
	console.log(id)
	
</script>

<style>
</style>

三、全局变量的使用

在stores中定义的全局变量可以在所有创造的vue中使用，名称为conter.ts

<template>
	<div id="two">
		<h1> two </h1>
	</div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {useCounterStore} from '@/stores/counter';//导入
	const conter = useCounterStore()
	const route = useRoute()
	let id = route.query.id
	conter.increment()//conter中的函数
	console.log(conter.count)//conter中的变量
	onMounted(()=>{
		console.log('onMonted')
	})
</script>

<style>
</style>

接下来可以自己尝试写一个菜单页面了