不同于早期基于dom元素开发,获取dom元素操作它们,在vue当中使用的是以v-开头的语法,这些语法统称为vue指令。
指令介绍
v-text 设置标签文本值(textcontent)
v-text作用与双大花括号作用一样,将数据填充到标签中。但没有闪烁问题!(显示文本),这里只有
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<p v-text="msg + '!'"></p>
<p>{{ msg }}</p>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
msg: "Hello v-text"
}
}
}
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>
v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<p>{{msg}}</p>
<span v-html="msg"></span>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
msg: '<span style="color:red">v-html</span>'
}
}
}
//挂载到html当中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>
可以看到无论是使用v-text也好还是使用花括号也好{{}},它只是将文本显示出来。但是使用v-html的时候那么html的各种属性都能够渲染出来。
如果你有html结构,并且要渲染,那么使用v-html指令,如果只是文本,那么v-text指令就行了。
- v-html指令的作用是:设置元素的innerHTML内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本解析文本使用v-text,需要解析html结构使用v-html
v-on 为元素绑定事件
- v-on: 冒号后面是event参数,例如click、change。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<p>counter:{{counter}}</p>
<button type="button" v-on:click="btn()" v-on:mouseout="counter ++">按钮</button>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
counter: 0
}
},
methods:{
btn(){
this.counter ++
}
}
}
//挂载到html当中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>
注意:在属性里面去使用data里面定义的变量是需要使用this的(在整个vue实例里面去使用是要使用this的),在挂载的视图里面是不需要使用this的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<!--准备一个容器-->
<div id="app">
<h1 v-text="content + '!'">hhh</h1>
<h1>哈哈 {{message}} </h1>
<p v-html="content"></p>
<button type="button" @click="doIt">按钮doIt</button> <br>
<input type="button" value="v-on" v-on:click="doIt">
</div>
<script type="text/javascript">
//创建Vue实例,要想使用vue就必须创建,否则免谈,是一切的开端
//在创建vue的时候,传不传参数,传几个,分别是什么数据类型,只传一个参数,参数类型是对象
//这个对象叫做配置对象,比如axios({url:'http://xxxx'})要发请求也要配置对象,配置对象key是不能够乱修改的
new Vue({ //不需要使用 const app = new Vue.....多此一举
el: "#app", //指定为当前vue实例为哪个容器服务,值通常为css选择器字符串
data:{ //data用于存储数据,数据供el所指定的容器去使用,容器之外的不管
message: "lucas123456",
content: '<span style="color:red">v-jhtml</span>'
},
methods:{
doIt:function(){
alert("做IT");
}
}
})
</script>
</body>
</html>
指令缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>
<button type="button" @click="btn()" @mouseout="counter ++">按钮</button>
在实际开发的时候需要做一些更加复杂的逻辑,比如更改页面里面元素的显示,那你可能会想这样就需要操作dom元素了,但是在vue里面这不太适用,因为vue的一大特点就是不需要操作dom元素了,不可以操作dom元素如何更改页面的显示呢?
vue开发的项目有个特点就是页面由数据生成,数据改变页面会同步发生改变,其实也就是在事件当中如何修改数据。通过this语法关键字就可以点出.
<h2 @click="changeFood">{{ food }}</h2>
methods:{
changeFood:function(){
console.log(this.food)
this.food = this.food + "很好吃"
}
}
可以看到在vue当中无需考虑如何修改dom元素,重点放在如何修改我们的数据,在数据更新之后使用数据的那个元素会同步更新。
v-bind
于动态绑定一个或多个属性值,或者向另一个组件传递props值(这个后面再介绍)
使用v-bind就可以在属性里面传递变量了。其实也就是vue渲染为HTML。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="hello-vue">
<!--href取到url变量的值-->
<a v-bind:href="url">百度</a>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
url: "http://www.baidu.com"
}
}
}
Vue.createApp(HelloVueApp).mount("#hello-vue")
</script>
</body>
</html>
绑定Class 相比下面style更加实用
操作元素(标签)的 class 和 style 属性是数据绑 定的一个常见需求。 例如希望动态切换class,为div显示不同背景颜色 ,可以动态的去绑定class。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
.test {
width: 200px;
height: 200px;
background: grey;
}
.active {
background: orange;
}
</style>
</head>
<body>
<div id="hello-vue">
<div v-bind:class="{active: isActive}" class="test"></div>
<button type="button" v-on:click="btn()">增加样式</button>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
isActive: false
}
},
methods:{
btn(){
if(this.isActive){
this.isActive = false
}else{
this.isActive = true
}
}
}
}
Vue.createApp(HelloVueApp).mount("#hello-vue")
</script>
</body>
</html>
data里面定义的属性可以在整个view实例里面去使用,这个是要用this的。
- v-bind:style 的对象语法看着非常像 CSS,但其实是一个 JavaScript 对象。
- 可以使用v-bind在style样式中传递样式变量。
- 使用时需要将css样式名中带”-“的转成驼峰命名法,如font-size,转为fontSize
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
.test {
width: 200px;
height: 200px;
background: grey;
}
.active {
background: orange;
}
</style>
</head>
<body>
<div id="hello-vue">
<div v-bind:style="{background:background,fontSize:fontSize + 'px'}">
hello-vue
</div>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
fontSize: '24',
background: 'orange'
}
}
}
Vue.createApp(HelloVueApp).mount("#hello-vue")
</script>
</body>
</html>
指令缩写
- v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的 属性。 但对于一些频繁用到的指令来说, 就会感到使用繁琐。
- 因此,Vue 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:
<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>
<!-- 缩写 -->
<a :href="url"> ... </a>
<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>