不同于早期基于dom元素开发，获取dom元素操作它们，在vue当中使用的是以v-开头的语法，这些语法统称为vue指令。
指令介绍
指令： 带有 v- 前缀的特殊属性。 指令的作用： 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 。 在整个vue的编写过程当中，只要带v-的，那么都是常用的vue的指令。这里的指令都不一样，但是基本达到的效果是一样的，只不过指令的能力不一样，目的都是实现响应式。
v-text 设置标签文本值（textcontent）
v-text作用与双大花括号作用一样，将数据填充到标签中。但没有闪烁问题!（显示文本），这里只有
可以看到做文本的时候可以使用v-text， 同时也可以看到在vue框架里面可以在HTML标签当中使用vue属性。（每个html都有标签，标签都自带属性，属性可以设置样式，可能是值的属性，可能是显示东西的属性。vue提供的一些属性是可以绑定到html标签上面的，正常情况下p标签是没有v-text属性的，但是使用了vue框架之后，那么就可以将vue的属性作用于原生的html标签上面了。） 最终将v-text渲染为一个html的文本，在开发过程当中使用vue的语法，但是在实际最终会将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="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
显示HTML文本的，某些情况下，从服务端请求的数据本身就是一个 HTML 代码，如果用双大括号会将数据解释为普通文本，而非HTML 代码，为了输出真正的 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 为元素绑定事件
在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。 在 Vue 中如何监听 事件呢 ? 使用 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>指令缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 属性。 但对于一些频繁用到的指令来说， 就会感到使用繁琐。 因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写 : v-on 缩写：<!-- 完整语法 -->
<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值(这个后面再介绍)
应用场景 : 图片地址 src 、超链接 href 、动态绑定一些类、样式等等 5.1 绑定超链接 v-bind 指令后接收一个参数，以冒号分割。 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。使用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的。
绑定 Style- 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>