目录
一、单文件组件（.vue文件）
vue的单文件组件会将一个组件的逻辑（js）、模版（html）、样式（css）封装在同一个文件里面。
js
import{ createApp, ref} from 'vue'
createApp({
setup(){
return {
count:ref(0)
}
}
}).mount('#app')
template
<div id="app">
<button @click="count++">
Count is:{{ count}}
</button>
</div>- 用vue的格式重写上面的计数器示例：
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上，他会指向当前的组件实例
js
<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通常会与
js
三、标签
创建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方法被触发了")
}
}
})
html
<!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元素隐藏
vue
<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树中移除
vue
<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建议使用对象的方式
vue
<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可以结合其他指令一起使用
- 数组长度的更新会同步到页面上，是响应式的
vue
<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可以限制触发的按键为回车
- 事件修饰符有多种
- 传递自定义参数，事件修饰符
vue
<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指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据------表单元素的值
vue
<div id="app">
<input type="text" v-model="message"/>
</div>
var app=new Vue({
el:"#app",
data:{
message:"苦命程序员"
}
})