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跨组件透传