Vue基础

v-html元素Html：

可以将带有html，标签的属性翻译为最终的结果，比如

html代码：

<div id="demo"v-html="text">
	{{text}}
</div>

js代码：

	var demo = new Vue({
			el:"#demo",
			data:{
				text:"<a href='http://www.baidu.com'>百度一下</a>",
			},
		})

v-once

v-once一次性绑定修饰符，该指令无需取值，让双向绑定变成单线绑定，直接添加到开始标签即可，ps:就是只能绑定一次，下次再更改的话无法更改，比如

html代码：

<div id="demo"v-once>
	{{daan}}
</div>

控制台代码：


无法再次更改原本的元素

v-pre

v-pre跳跃编译修饰符，就是讲直接跳过vue的编译，比如

html代码：

<div id="demo" v-pre>
	{{daan}}
</div>

页面显示：

就是直接显示没有进行vue编译的状态
ps：这两个不怎么常用，看看就可以了

v-bind

v-bind动态属性：常用于动态绑定HTML元素的属性，
例如id，class，src，href，改变任意一方都会实时改变

html代码：

<div id="demo">
	<a v-bind:href="urlValue">百度一下</a>
	<img v-bind:src="imgValue">
</div>

js代码：

data:{
	urlValue:"http:www.baidu.com",
	imgValue:"./img/1.PNG"
},

页面显示：

注意：

文本节点用{{}}文本插值语法，属性节点用v-bind动态属性修饰符。

v-on

v-on事件绑定

html代码

<button v-on:click="show">
	{{btn}}
</button>

<div class="a1" v-show="showArea"></div>

js代码：

var demo = new Vue({
			el:"#demo",
			//绑定数据
			data:{
				btn:"按钮",
				showArea:true
			},
			methods:{
				show:function(){
					if(this.showArea){
						this.showArea = false
					}else{
						this.showArea = true
					}
				}
			}	
		})

这个是点击按钮让div显示消失

methods是用来承接这个事件的方法，需要在这个里面写操作的一些东西

语法糖

语法糖是指在不影响功能的情况下，添加某种方法，实现相同的效果，进而方便开发。

Vue为v-on和v-bind这两个常用的指令，提供了语法糖，也可以说是特定简写

ps：
v-bind：可以直接省略v-bind直接用：即可，
v-on：可以省略v-on用@即可，两者容易记混

html代码：

<img :src="imgValue">

<button @click="show">
	{{btn}}
</button>

这样写即可，会变得比较方便