Vue基础

基础指令

内容渲染指令

<!-- 内容渲染指令 -->
<!-- 内容渲染指令 v-text 可以渲染内容-->
<h5 v-text='xxx'>内容</h5>
<!-- 内容渲染指令 v-html 可以渲染html标签-->
<h5 v-html='xxx'>内容</h5>
<!-- 内容渲染指令 {
   {插值表达式}} 可以渲染内容 和 javascript表达式-->
<h5 >{
  {username}}</h5>
<h5 >{
  {flag ? 'true' : 'false'}}</h5>

属性渲染指令

<!-- 属性渲染指令 -->
<!-- 属性渲染指令 v-bind: -->
<h5 v-bind:placeholder="xxx">内容</h5>
<!-- 属性渲染指令 简写 :属性名 -->
<img :src="xxx">内容</img>

绑定事件指令

<!-- v-on -->
<button v-on:click="方法名"></button>
<!-- 简写 -->
<button @click="方法名"></button>

事件修饰符

<!-- .prevent 阻止默认行为 -->
<a v-on:click.prevent="方法名"></a>
<!-- .stop 阻止冒泡 -->
<a v-on:click.stop="方法名"></a>
<!-- .capture 触发事件改为事件捕获 -->
<a v-on:click.capture="方法名"></a>
<!-- .self 只有自己能触发 事件冒泡/捕获都无法触发 -->
<a v-on:click.stop="方法名"></a>
<!-- .once 只触发一次 -->
<a v-on:click.once="方法名"></a>

双向数据绑定指令

<!-- v-model 两个dom文本节点同步 -->
<p>{
  {xxx}}</p>
<input v-model='xxx'></input>

条件渲染指令

<!-- v-if 动态创建dom元素  -->
<div v-if="flag==1">当flag=1则显示这个</div>
<div v-else-if="flag==2">当flag=1则显示这个</div>
<div v-esle>当flag!==1 && flag!==2则显示这个</div>

<!-- v-show 根据条件给dom元素style样式设置display  -->
<div v-show='true'></div>

列表渲染指令

<!-- v-for 渲染列表数据 List为一个数组  -->
<tr v-for='item in List' :key ="item.id">
	<td>{
  {item.id}}</td>
	<td>{
  {item.name}}</td>
</tr>


<tr v-for='(user,index) in List' :key ="item.id">
	<td>索引：{
  {index}}</td>
	<td>{
  {user.id}}</td>
	<td>{
  {user.name}}</td>
	
</tr>

过滤器

vue2.x版本有过滤器 vue3.x没有过滤器

1. 一种为：全局过滤器
2. 一种为：私有过滤器
3. 当全局过滤器和私有过滤器同名冲突时，执行私有过滤器
4. 可以执行多个过滤器，可以传参，第二个参数起为自定义形参

//定义全局过滤器
Vue.filter('dateFormat',(dateStr)=>{
   
          const date = new Date(dateStr);
          const y = date.getFullYear();
          const m = padZero(date.getMonth()+1);
          const d = padZero(date.getDate());
          const hh = padZero(date.getHours());
          const mm = padZero(date.getMinutes());
          const ss = padZero(date.getSeconds());
          return `${
     y}-${
     m}-${
     d} ${
     hh}:${
     mm}:${
     ss}`;
        })

//定义私有过滤器
const vm = new Vue({
   
          el:"#app",
          data:{
   
            brandname:"",
            nextId:5,
            brandList:[
              {
   id:1,brandname:"宝马",status:true,addTime:new Date()},
              {
   id:2,brandname:"奔驰",status:true,addTime:new Date()},
              {
   id:3,brandname:"凯迪拉克",status:false,addTime:new Date()},
              {
   id:4,brandname:"福特",status:true,addTime:new Date()},
            ]
          },
          // 私有过滤器
          filters:{
   
          	capitalized(str,自定义参数){
   
          		return str...
          	}
          }
          methods:{
   
            addBrand(){
   
              this.brandList.push({
   id:this.nextId,brandname:this.brandname,status:true,addTime:new Date()})
              this.brandname='';
              this.nextId++
            },
            removeBrand(id){
   
              // console.log(id);
              this.brandList = this.brandList.filter(x=>x.id!== id)
            }
          }
        })

单页面SPA应用程序

Vue基础

创建Vite项目
$ npm init vite-app
$ npm install
$ npm run dev

结构

1. assets 目录用来存放项目中所有的静态资源文件（css、fonts等）
2. components 目录用来存放项目中所有的自定义组件
3. App.vue 是项目的根组件
4. index.css 是项目的全局样式表文件
5. main.js 是整个项目的打包入口文件

main.js入口文件

// 1.按需导入createVue函数
import {
   createApp} from 'vue'
// 2.导入App.vue根组件
import App from './App.vue'
// 5.导入并注册全局组件
import Test from './xxxx/Test.vue'
// 3.创建spa应用实例
const app = createApp(App);
// 6.注册组件
app.component(Swiper.name,Swiper)
// 4.调用mount()函数 把App.vue模板渲染到指定的el区域
app.mount('#app');

App.vue根组件

<template>
    <h1>这是App.vue组件</h1>
</template>

<script>
import 'Swiper' from './路径'
// 组件名称
export default {
    name:'MyApp'
    // 注册私有组件
    components:{
    	'MySwiper': Swiper
    }
}
</script>

组件的样式

<template>
    <h1>这是App.vue组件</h1>
</template>

<script>
import 'Swiper' from './路径'
// 组件名称
export default {
    name:'MyApp'
    // 注册私有组件
    components:{
    	'MySwiper': Swiper
    }
}
</script>
// style的lang属性 默认是css 支持css/less/scss 
// scoped 可以防止样式冲突
// :deep() 可以样式冲头
<style lang="css" scoped>
:deep(div){
	....
}
h1{
	...
}
</style>

props 给子组件传递值

//子组件
<template>
    <div>
        <h1>这是MyProps.vue组件</h1>
        // 调用props中的属性 接收父组件传递的值
        <p>Props1:{
   {
   count}}</p>
        <p>Props2:{
   {
   title}}</p>
        <p>Props3:{
   {
   gender}}</p>
        <p>Props4:{
   {
   test}}</p>
    </div>
</template>

<script>
export default {
   
    name:"MyProps",
    // 设置接受父组件传递过来的参数 在props中声明属性 
    props:{
   
        count:{
   
            type:Number,
            default:1
        },
        // 多个类型验证 default 默认值
        title:{
   
            type:String,Number,
            default:'hjc666'
        },
        // 必填项
        gender:{
   
            type:String,
            required:true
        },
        // 自定义验证函数 当test接收值 不等于1 就不会报错
        test:{
   
            validator:function(value){
   
                return value !== 1
            }
        }
    }
}
</script>

// 父组件
<template>
    <div>这是App.vue组件</div>
    // 动态给子组件传递值 count、title这些属性 已经在子组件的props节点提前声明好
    <my-props :count='count' :title="title" :gender="gender" :test="test"></my-props>
</template>

<script>
// 导入组件
import MyProps from "./MyProps.vue"
export default {
   
    name:"MyApp",
    // 注册组件
    components:{
   
        MyProps
    },
    data(){
   
        return {
   
            count:2,
            title:'hjc888',
            gender:'aaa',
            test:-1
        }
    }
}
</script>

emits 给父组件传递函数

通过自定义事件传参

// 主组件
<template>
    <div>app.vue组件
        <p>{
  {count}}</p>
    </div>
    <hr>
    <!-- <my-emits @change="getCount"></my-emits> -->
    <!-- v-model:number 就是同步子组件number的属性 count是值主组件的count属性 -->
    <new-emits v-model:number="count"></new-emits>
</template>

<script>
import MyEmits from "./MyEmits.vue"
import NewEmits from "./NewEmits.vue";
export default {
    
    name:"MyApp",
    components:{
    
        MyEmits,NewEmits
    },methods:{
    
        getCount(){
    
            console.log("触发自定义事件")
        }
    },
    data(){
    
        return {
    
            count:0