Vue基础指令与案例演示
1.v-text与v-html
v-text只会发数据渲染到标签，不会对html标签进行解析、
v-html会对html标签进行解析
<div id="box">
<!-- vue的指令：vue提供的一种行间属性，你可以加在标签上，对这个DOM元素应用一些行为。 -->
<h1>{
{msg}}</h1>
<!-- v-text 把数据渲染到标签 -->
<h1 v-text="num"></h1>
<!-- v-text 不会对html标签进行解析，只是普通字符串 -->
<h1 v-text="hehe"></h1>
<!-- 会对html标签进行解析 -->
<h1 v-html="hehe"></h1>
</div>
const vm = new Vue({
el: '#box',
data: {
msg: 'Hello Vue',
num:100,
hehe:"<i style='color:red'>abc</i>"
}
})
2.v-bind，v-bind可以绑定标签的属性，之后这个属性就可以用vue的数据
<div id="box">
<h1>{
{msg}}</h1>
<img v-bind:src="url" >
<button type="button" @click="changeImg()">更换图片</button>
<a v-bind:href="href">进入百度</a>
<!--v-bind 可以简写，直接给个冒号 -->
<a :href="href">进入百度</a>
</div>
const vm = new Vue({
el: '#box',
data: {
msg: 'Hello Vue',
url:'https://cn.vuejs.org/images/logo.png',
href:'http://www.baidu.com'
},
methods:{
changeImg(){
//alert("Abc");
console.log(this instanceof Vue);
this.url="img/a.jpg"
this.href="http://www.163.com"
}
}
})
3.v-on事件的绑定，v-on可以用来绑定某些事件，可以省略为@
<div id="box">
<h1>{
{msg}}</h1>
<button type="button" v-on:click="show(100)">一个按钮</button>
<!-- 绑定事件时，事件函数名后面的括号，如果你传递参数，可以省略不写 -->
<button type="button" v-on:click="test">一个按钮</button>
<!-- 绑定事件时，可以缩写 使用@符号 来替代v-on -->
<button type="button" @click="haha()">一个按钮</button>
</div>
const vm = new Vue({
el: '#box',
data: {
msg: 'Hello Vue',
num: 500
},
//定义事件的处理函数
methods: {
show: function(num) {
//this代表的是vue对象
alert(this.num)
alert("点击了" + num);
},
test: function() {
alert("test");
},
//es6语法
haha(){
alert("haha")
}
}
})
4.v-model表单项的数据绑定，其实现的是 数据的双向绑定即 数据变–视图变，视图变–数据变
<div id="box">
A的值：<input type="text" id="" value="" v-model="a" />
<br>
B的值：<input type="text" id="" value="" v-model="b" />
<br>
<button type="button" @click="add()">计算结果</button>
<h4>结果：{
{result}}</h4>
</div>
new Vue({
el: '#box',
data: {
a: '',
b: '',
result: '0'
},
methods: {
add() {
this.result = this.a*1 + this.b*1;
}
}
})
5.v-pre指令 v-pre 让vue不要去解析{ {}} 保持原有的内容
<div id="box">
{
{msg}}
<!-- {
{msg}} v-pre 让vue不要去解析{
{}} 保持原有的内容-->
<h1 v-pre>{
{msg}}</h1>
</div>
new Vue({
el:'#box',
data:{
msg:"hello"
}
})
6.v-clock指令，可以让这个标签隐藏，直到解析完成后出现
<div id="box">
<h1 v-cloak>{
{msg}}</h1>
</div>
new Vue({
el:'#box',
data:{
msg:"hello"
},
beforeMount:function(){
//模拟阻塞，这个模板没有挂载完毕，用户就会看到{
{}}用户体验不好
//我们为了提高用户体验，如果模板没有挂载完毕，就不要看到{
{}}
//可以在标签上使用 v-clock 来提高用户体验
alert("abc");
}
})
7.计算属性，当我要用到一个数据，这个数据是根据其他属性的变化的得来的，我就可以使用计算属性来做
<div id="box">
姓:<input type="" name="" id="" value="" v-model="xing" />
<br>
名:<input type="" name="" id="" value="" v-model="ming" />
<br>
<!-- 全名:<input type="" name="" id="" value="" v-model="xing.concat(' ').concat(ming)"/> -->
<input type="" name="" id="" value="" v-model="fullname">
</div>
new Vue({
el: '#box',
data: {
xing: '',
ming: ''
},
//我要用到一个数据，这个数据是根据其他属性的变化的得来的，我就可以使用计算属性来做
//计算属性
computed: {
//这个fullname函数，在第一次初始化的时候，会调用一次
//下来就是这个函数中用的属性一变化，这个函数调用
fullname: function() {
var x=this.xing;
var m=this.ming;
console.log("fullname函数调用了")
return x.concat(' ').concat(m);
}
}
})
案例：反转字符串
<div id="box">
姓:<input type="" name="" id="" value="" v-model="xing" />
<br>
名:<input type="" name="" id="" value="" v-model="ming" />
<br>
<input type="" name="" id="" value="" v-model="fullname">
</div>
new Vue({
el: '#box',
data: {
xing: '',
ming: ''
},
computed: {
//这个fullname函数，在第一次初始化的时候，会调用一次
//下来就是这个函数中用的属性一变化，这个函数调用
fullname: {
//返回计算属性fullname的值
get: function() {
var x = this.xing;
var m = this.ming;
console.log("get函数调用了")
return x.concat(' ').concat(m);
},
//可以监听计算属性值fullname的变化
set:function(value){
//value形参就是fullname变化之后的值
console.log("fullname 一变化，set方法就会调用",value)
var arr=value.split(' ');
this.xing=arr[0];
this.ming=arr[1];
}
}
}
})
8.属性的侦听
扫描二维码关注公众号，回复：
12848378 查看本文章
<div id="box">
<input type="" name="" id="" value="" v-model="msg" />
</div>
var vm=new Vue({
el: '#box',
data: {
msg: "hello",
num: 100
},
watch: {
//监听msg属性的变化
msg: function(newValue, oldValue) {
console.log("只要我侦听的属性msg一变化，就会调用", newValue, oldValue);
},
//监听num属性的变化
//参数1：你监听的这个属性变化之后的值，
//参数2：你监听的这个属性变化之前的值
num: function(newValue, oldValue) {
console.log("只要我侦听的属性msg一变化，就会调用", newValue, oldValue);
}
}
//另外一种写法
vm.$watch('msg',function(newValue,oldVue){
console.log(newValue,oldVue);
})
//vue实例属性 $data 可以取出vue中配置的data属性的值
var v=vm.$data.msg;
var v=vm.$data.num;
alert(v);
//获取vue管理的这个模板对象
var divObj=vm.$el;
alert(divObj);
})
9.class属性的绑定
<style>
.aclass{
color: red;
}
.bclass{
background-color: pink;
}
</style>
<div id="box">
<h1 class="aclass">可惜没如果</h1>
<h1 :class="'aclass'">可惜没如果</h1>
<h1 :class="['aclass','bclass']">可惜没如果</h1>
<h1 :class="{'aclass':true,'bclass':false}">可惜没如果</h1>
<h1 :class="myclass">可惜没如果</h1>
<h1 :class="[myclass,myclass1]">可惜没如果</h1>
</div>
<script type="text/javascript">
var vm= new Vue({
el: '#box',
data: {
num: 100,
myclass:'aclass',
myclass1:'bclass'
}
})
10.style属性值的绑定
<div id="box">
<h1 style="color: pink">可惜没如果</h1>
<h1 :style="{'color':'pink'}">可惜没如果</h1>
<h1 :style="{'color':'pink','background':'black'}">可惜没如果</h1>
<h1 :style="{'color':a,'background':b}">可惜没如果</h1>
</div>
<script type="text/javascript">
var vm= new Vue({
el: '#box',
data: {
a:'pink',
b:'black'
}
})
</script>