vue学习之组件与标签
目录
- 一、单文件组件（.vue文件）
- 二、API风格
- 1)选项式API
- 2）组合式API
- 三、标签
- v-text：设置标签的文本值
- v-html:将数据以HTML格式渲染到标签中
- v-on:为元素绑定事件
- v-show:控制元素的显示/隐藏
- v-if:根据表达式的真假，添加/移除元素（与v-show区别开）
- v-bind:动态绑定属性
- v-for：基于数组/对象循环渲染元素
- v-on：绑定时间（点击，输入等）
- v-model：表单元素上的双向数据绑定
一、单文件组件（.vue文件）
vue的单文件组件会将一个组件的逻辑（js）、模版（html）、样式（css）封装在同一个文件里面。
import{ createApp, ref} from 'vue'
createApp({setup(){return {count:ref(0)}}
}).mount('#app')
<div id="app"><button @click="count++">Count is:{{ count}}</button>
</div>
- 用vue的格式重写上面的计数器示例：
<script setup>
import {ref} from 'vue'
const count=ref(0)
</script><template><button @click="count++">Count is: {{ count }}</button>
</template><style scoped>
button{font-weight:bold;
}
</style>
二、API风格
Vue的组件可以按照两种不同的风格书写
- 选项式API
- 组合式API
1)选项式API
使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如data、methods、mounted
选项所定义的属性都会暴露在函数内部的this上，他会指向当前的组件实例
<script>
export default{//data() 返回的属性将会成为响应式的状态//并且暴露在"this"上，便于访问和修改data() {return{count:0}},//methods 是一些用来更改状态与触发更新的函数//它们可以在模版中作为事件处理器绑定methods:{increment(){this.count++}},//生命周期钩子在组件生命周期的各个不同阶段被调用//例如这个函数就会在组件挂载完成后被调用mounted() {console.log('The initial count is ${this.count}.')}
}
</script><template><button @click="increment">Count is :{{ count }}</button>
</template>
2）组合式API
- 通过组合式API，我们可以使用导入的API 函数来描述组件逻辑。在单文件组件中，组合式API通常会与
三、标签
创建Vue示例时，el(挂载点)，data(数据），methods(方法）
v-text：设置标签的文本值
可以简写为{{}}，插值表达式
<div id="app"><h2 v-text="message+'!'"></h2><h2>深圳{{ message+"!" }}</h2>
</div>var app=new Vue({el:'#app',data:{message:'程序员'}
})
v-html:将数据以HTML格式渲染到标签中
- v-html指令的作用是：设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么，只会解析为文本
- v-html与v-text标签类似，但是可以解析渲染html结构的内容
解析文本使用v-text，需要解析html结构使用v-html
v-on:为元素绑定事件
- v-on指令的作用是：为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
vue提供了一种简便写法，v-on:等同于@
示例：
<div id="app"><input type="button" value="事件绑定" v-on:事件名="方法"><input type="button" value="事件绑定" v-on:monseenter="方法"><input type="button" value="事件绑定" v-on:dblclick="doit"><input type="button" value="事件绑定" @dblclick="doit">
</div>var app=new Vue({el:"#app",methods:{//方法show:function(event){alert("事件被触发了")},doit:function(){alert("doit方法被触发了")}}
})
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习之v-on指令基础</title>
</head>
<body><!-- 2.html结构 --><div id="app"><input type="button" value="v-on指令" v-on:click="doit"><input type="button" value="v-on简写" @click="doit"><input type="button" value="双击事件" @bdlclick="doit"><h2 @click="changeFood">{{food}}</h2></div><!-- 1.开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>// 3.创建Vue实例对象var app=new Vue({el:"#app",data:{food:"西兰花炒蛋"},methods:{doit:function(){alert("做IT");},changeFood:function(){//console.log(this.food);this.food+="好好吃！"}}})</script>
</body>
</html>
v-show:控制元素的显示/隐藏
- 根据表达式的真假，切换元素的显示和隐藏
- 原理是修改元素的dispaly，实现显示隐藏
- 指令后面的内容，最终都会解析为布尔值
- 值为true元素显示，值为false元素隐藏
<div><img src="地址" v-show="true"><img src="地址" v-show="isShow"><img src="地址" v-if="age>=18">
</div>var app=new Vue({el:"#app",data:{isShow:true,age:18}
})
v-if:根据表达式的真假，添加/移除元素（与v-show区别开）
- 根据表达值的真假，切换元素的显示和隐藏
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true，元素存在于dom树中，为false,从dom树中移除
<div id="app"><p v-if="true">我是一个p标签</p><p v-if="isShow">我是一个p标签</p><p v-if="表达式">我是一个p标签</p>
</div>var app=new Vue({el:"#app",data:{isShow:true,age:18}
})
v-bind:动态绑定属性
- 设置元素的属性（src,class,title），元素的属性都写在元素的内部
- v-bind:属性名=表达式
- 简写的话可以直接省略v-bind，只保留:属性名
- 需要动态的增删class建议使用对象的方式
<div id="app"><img src="地址"><img v-bind:"imgSrc"><img v-bind:title="imgtitle+'!!!'"><img :title="imgtitle+'!!!'"> //简写形式,冒号后面紧跟属性名,v-bind省略<img :class="isActive?'active':''"><img :class="{active:isActive}"> //对象语法
</div>var app=new Vue({el:"#app",data:{imgSrc:'图片地址',imgTitle:"苦命程序员",isActive:false}
})
v-for：基于数组/对象循环渲染元素
- 根据数据生成列表结构
- 数组经常和v-for结合使用
- 基础语法是（item，index）in 数据，item代表每一项可变，index代表索引
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上，是响应式的
<div id="app"><ul><li v-for="item in arr" :title="item">{{ item }}</li><li v-for="(item,index) in objArr">{{item.name}}</li></ul>
</div>var app=new Vue({el:"#app",data:{arr:[1,2,3,4,5],objArr:[{name:"jack"},{name:"rose"}]}
})
v-on：绑定时间（点击，输入等）
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上.修饰符可以对事件进行限制
- .enter可以限制触发的按键为回车
- 事件修饰符有多种
- 传递自定义参数，事件修饰符
<div id="app"><input type="button" @click="doit(p1)"/><input type="text" @keyup.enter="sayHi"/>
</div>var app=new Vue({el:"#app",data:{},methods:{doit:function(p1){},sayHi:function(){}}
})
事件修饰符：
https://cn.vuejs.org/v2/api/#v-on
v-model：表单元素上的双向数据绑定
- 获取和设置表单元素的值（双向数据绑定）
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据——表单元素的值
<div id="app"><input type="text" v-model="message"/>
</div>var app=new Vue({el:"#app",data:{message:"苦命程序员"}
})