VUE

01_为什么选择Vue框架_哔哩哔哩_bilibili

文本插值

//app.vue
<template>
  <h3>模板</h3>
  <p>{{ msg }}</p>
  <p>{{ number + 1}}</p>
  <p>{{ ok? 'yes': 'no' }}</p>
  <p>{{ message.split("").reverse().join("") }}</p>
  <!-- <p>{{ var a = 10 }}</p> -->
  <!-- <p>{{ if(ok) { return msg} }}</p> -->
</template>

<script>
export default{
  data(){
    return{
      msg:"神奇的语法",
      number:10,
      ok:true,
      message:"QWE"

    }
  }
}

</script>


//main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

原始HTML

<template>

<p> {{rawHtml}} </p>
<p v-html="rawHtml"></p>

</template>

<script>

export default{
  data(){
    return{
      rawHtml:"<a href 'http://chengxuyuan.com'>程序员</a>"
    }
  }
}

</script>

属性绑定

v-bind：
可绑attribute，布尔属性，多个值

<template>
  <div v-bind:id="msg" :class="color1"> test </div>
  <button :disabled="isButton"></button>
  <div v-bind="object">测试</div>
</template>

<script>
export default {
  data(){
    return{
      msg:"active",
      color1:"appclass",
      isButton:false,
      Object:{
        id:"appclass",
       class :"appSize"
      }
    }
  }
}
</script>

<style>
.appclass{
  color: red;
}
.appSize{
  font-size: 10px;
}
</style>

条件渲染

v-if   v-show

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">捏那个看见我吗</div>
    <div v-else>看这把</div>
    <div v-if="typr === 'A'">A</div>
    <div v-else-if=" type ==='B'">A</div>
    <div v-else-if=" type ==='C'">A</div>
    <div v-else>D</div>

    <div v-show="flag">看得见吗</div>
</template>

<script>
export default{
    data(){
        return{
            flag:false,
            type:"E"
        }
    }
}
</script>

列表渲染

v-for 

通过key来进行状态管理

item in items  中 in等价于 of

<template>
  <h3>列表渲染</h3>
  <!-- 遍历 names 数组并输出每个项 -->
  <p v-for="item in names" :key="item">{{ item }}</p>

  <!-- 遍历 result 数组 -->
  <div v-for="item in result" :key="item.id">
    <!-- 输出每个对象的 title -->
    <p>{{ item.title }}</p>
    <!-- 显示每个对象的 avator 图片 -->
    <img :src="item.avator" alt="">
  </div>
</template>


<script>
export default{
    data(){
        return{
            names:["1","2","3"],
            result:[{
                "id":12,
                "title":"AAA",
                "avator":"http://123.com"
            },
            {
                "id":123,
                "title":"BBB",
                "avator":"http://123.com"
            },
            {
                "id":124,
                "title":"CCC",
                "avator":"http://123.com"
            }
            ]
        }
    }
}
</script>

事件处理

v-on  ===  @

<template>
    <h3>内联事件处理器</h3>
    <!-- <button v-on:click="count++">Add</button> -->
    <button @click="addCount">Add</button>
    <p>{{count}}</p>
</template>
<script>
export default {
    data() {
        return{
            count:0
        }
    },
    methods:{
        addCount(){
            count++,
            this.count++
        }
    }
}
</script>

事件传参

<template>
    <h3>内联事件处理器</h3>
    <!-- <button v-on:click="count++">Add</button> -->
    <p @click="getName(item,$event)" v-for="(item,index) in names" :key="index">{{item}}</p>
</template>
<script>
export default {
    data() {
        return{
            names:["iwen","ime","frank"]
        }
    },
    methods:{
        getName(name,e){
            console.log(name,e);
        }
    }
}
</script>

数组侦听变化

变更方法：push()  pop()  shift()  unshift()   splice()   sort()   reverse()

替换数组：filter()  concat()  slice() 

变更方法，即原数组变化。替换数组，创建一个新数组进行返回

<template>
    <h3>数组变化侦听</h3>
    <button @click="addHandle"></button>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
    </ul>
</template>

<script>
export default{
    data(){
        return{
            names:["iwen","ime","frank"]
        }
    },
    methods:{
        addHandle(){
            //自动更新
            // this.names.push("sakura")   
            //不会自动更新
            // this.names.concat("sakura")
            // this.names.concat([]"sakura"])
            this.names = this.names.concat("sakura")
        }
    }
}
</script>

事件修饰符

.stop :组织事件冒泡
.prevent：默认事件
.once：一次性事件
.enter：键盘事件

计算属性

与方法的区别：计算属性仅在响应式更新时才会重新计算，方法调用总是在重渲染发生时再次执行

<template>
    <h3>{{ itbaizhan.name }}</h3>
    <p>{{ itbaizhanContent}}</p>
</template>
<script>
export default{
    data(){
        return{
            itbaizhan:{
                name:"百战程序员",
                content:["vue","Java","c++"]
            }
        }
    },
    computed:{
        itbaizhanContent(){
            return this.itbaizhan.content.length > 0 ?'YES' : 'NO'
        }
    }
}
</script>

Class样式绑定

<template>
<!-- 对象 -->
    <!-- <p :class="{'active':isActive,'text-danger':danger}">Class样式绑定</p> -->
    <!-- 多个对象 -->
    <p :class="classObject">Class样式绑定</p>
    <!-- 数组 -->
    <div :class="[activeClass,errorClass]">BUFFERpool</div>
    <!-- 数组嵌套对象 -->
    <p :class="[isActive ? 'active' : '',{'text-danger':danger}]">1234567890</p>
</template>

<script>

export default {
    data(){
        return{
            //对象
            // isActive:true,
            // danger:true
            //多个对象
            classObject:{
                'active':true,
                'text-danger':true
            },

            //数组
            activeClass:'actice',
            errorClass:'text-danger'
        }
    }
}

</script>

<style >
.active{
    font-size: 30px
}
.text-danger{
    color: aqua
}
</style>

样式绑定

<template>
    <p :style="styleObject">样式绑定</p>
    <p :style="[styleObject]">样式绑定2</p>
</template>

<script>

export default {
    data(){
        return{
            
            styleObject:{
                color:"green",
                fontSize:"30px"
            }
        }
    }
}

</script>

侦听器

<template>
    <h3>侦听器</h3>
    <p>{{message}}</p>
    <button @click="updateHandle">修改数据</button>
</template>

<script>

export default {
    data(){
        return{
            message:"hello"
        }
    },
    methods:{
        updateHandle(){
            this.message = "world"
        }
    },
    watch:{
        //函数名与被侦听的对象保持一致
        message(newValue,oldValue){
            //数据变化自动变化，执行内容
        }
    }
}

</script>

表单输入绑定

.lazy    number：只接受数字格式    trim：取消空格

<template>
    <h3>表单输入绑定</h3>
    <form >
        <input type="text" v-model.lazy="message">
        <p>{{ message }}</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </form>
</template>

<script>

export default {
    data(){
        return{
            message:"",
            checked:false
        }
    }
}

</script>

模板引用

<template>
    <h3>模板引用</h3>
    <div ref="container" class="container">{{content}}</div>
    <button @click="getElementHand">获取数据</button>
    <input type="text" ref="username">
</template>

<script>

export default {
    data(){
        return{
            content:"内容"
        }
    },
    methods:{
        getElementHand(){
            this.$refs.container.innerHTML = "哈哈哈";
            console.log(this.$refs.username.value)
        }
    }
}

</script>

组件组成

一般将vue组件单独构建在一个单独的vue文件中，这就是SFC 单文件组件

<template>
<!-- 第三步  标签引入-->
<MyComponent />
</template>

<script>
//第一步 引入组件
import MyComponent from "./components/MyComponent.vue";

export default{
  //第二步  注入组件
  components:{
    MyComponent
  }
}
</script>

<style scoped>

</style>

<template>
  <div class="container">{{}}</div>
</template>

<script>
export default{
  data(){
    return{
      message:"基础组件组成"
    }
  }
}
</script>

<style scoped>
.container{
  font-size: 30px;
  color: brown;
}
</style>

组件引用方式

全局注册：main.js中引用
局部注册：即三步

组件传递数据props

可传递任何数据,

只能父级传递给子级，只读

<template>
  <ParentVue />
</template>

<script>
import ParentVue from './components/Parent.vue'

export default{
  components:{
    ParentVue
  },
  data(){
    return{

    }
  }
}
</script>

<template>
  <h3>Parent</h3>
  <ChildVue :title="message" />
</template>

<script>
import ChildVue from './Child.vue'


export default{

components:{
ChildVue
},

  data(){
    return{
        message:"Parent数据"
    }
  }
}
</script>

<template>
  <h3>child</h3>
  <p>{{title}}</p>
</template>

<script>
export default{
  data(){
    return{

    }
  },
   props:["title"]
}
</script>

props检验

<template>
  <h3>child</h3>
  <p>{{title}}</p>
</template>

<script>
export default{
  data(){
    return{

    }
  },
   props:{
       title:{
           type:String,
           //检验多种数据类型
           type:[String,Number,Object]
          //默认
           default:0
           //必填
           required:true
}
}
}
</script>

组件事件

可以直接使用$emit方法触发自定义事件

目的是组件之间传递数据，满足了子传父的需求

<template>
  <h3>组件事件</h3>
  <CompositionEvent />
</template>

<script>
import CompositionEvent from "./components/ComponentEvent.vue"

export default{
  components:{
    CompositionEvent
  },
  data(){
    return{

    }
  }

}
</script>

<template>
  <h3>组件事件</h3>
  <Child @someEvent="getHandle" />
</template>

<script>
import Child from "./Child.vue"

export default{
  components:{
    Child
  },
  data(){
    return{

    }
  },
  methods:{
    getHandle(){
        console.log("someEvent")
    }
  }

}
</script>

<template>
<h3>Child</h3>
<button @click="clickEvent">传递数据</button>
</template>

<script>

export default{

    methods:{
        clickEvent(){
            //自定义事件
            this.$emit("someEvent")
        }
    },

  data(){
    return{

    }
  }

}
</script>

插槽

定义在父中，只能由父进行修改，若无值，可在子类中指定默认值

具名插槽

用template包裹

父：v-slot: / #
子：name=“”

可互相传递数据，麻烦

<template>
  <Slot>
    <!-- <template #A>
    <h3></h3>
    </template>
    <template #B>
    <h3></h3>
    </template> -->
  </Slot>
</template>

<script>
import Slot from './components/Slot.vue'

export default{
  data(){
    return{
      msg:"插槽基础"
    }
  },
  components:{
    Slot
  }
}

</script>

<style>

</style>

<template>
  <h3>续集</h3>
  <slot name="A">A</slot>
  <slot name="B">B</slot>
</template>

<script>

export default{
    data(){
        return{

        }
    }
}

</script>

<style>

</style>

生命周期

创建，挂载，更新，销毁

只能在挂载后才能进行动态数据传递

依赖注入

props跨组件透传