如何在HTML绑定数据
绑定纯html
- 将标签页渲染出来,而不是显示标签出来;
- 直接在标签中添加v-html=你要改变的数据名;
<div id="app" v-html="name"></div>
<script>
let app = new Vue({
el:"#app",
data:{
name:"<strong>前端</strong>"
}
});
</script>
显示出来的就是加粗的前端
绑定属性
- 需要借助一个v-bind指令,后面写你要添加的属性
- 可以简写省略v-bind,直接
:+绑定的属性
就可以;
<div>
<a :href="link">百度</a>
</div>
<script>
let app = new Vue({
el:"app",
data:{
link:"http://baidu.com"
}
});
</script>
注意一
- 当渲染属性值为布尔值的时候(true)或者(false),效果就是不一样了,并不是简单的true或者false渲染出来,而是当值为false的时候,属性会被移除;
<div id="app">
<!--我们用缩写的语法-->
<button :disabled="dis_true">
我是true
</button>
<button :disabled="dis_false">
我是false
</button>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
dis_true:true,
dis_false:false
}
});
</script>
- 我们通过v-bind指令的缩写,给两个
button
标签属性,设置一个为true,一个为false,效果是
<button disabled="disabled">我是true</button>
<button>我是false</button> /*属性直接被移除*/
注意二
- 支持JavaScript表达式
<div id="app">{{ num+3 }}</div>
<script>
let app = new Vue({
el:"#app",
data:{
num:2
}
});
</script>
- 渲染出来结果为5 ;
<div id="app">{{ ok ? 'yes':'no' }}</div>
<script>
let app = new Vue({
el:"#app",
data:{
ok:true
}
});
</script>
- 渲染出来结果为yes
虽然vue支持JavaScript表达式运算,只能在简单的情况下才会这样玩,运算比较复杂的时候,一定要用vue的computed属性进行计算;
总结
- 在视图绑定数据的方法,Mustache语法(双大括号语法),绑定纯HTML,绑定属性,支持JavaScript表达式写法,以及表达式写法和computed区别;
十个指令
v-text指令
- 用于更新标签包含的文本,作用和大括号一样,只是在标签中绑定
<div id="app">
<p v-text="msg"></p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:'hello,vue'
}
});
</script>
<p v-text="msg"></p>
<p>{{msg}}</p>
v-show指令
- 元素的显示和隐藏,控制display css属性
- 取值为true/false.分别对应着显示/隐藏
<div id="app">
<p v-show="show1">我是true</p>
<p v-show="show2">我是false</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
show1:true,
show2:false
}
});
</script>
- 第一个p标签的v-show,元素正常显示;第二个p标签的v-show设置为false,不显示,解析代码为
<p>我是true</p>
<p style="display:none;">我是false</p>
v-if指令
- 取值也是true或者false,控制元素是否被渲染出来;
<div id="app">
<p v-if="if_1">我是true</p>
<p v-if="if_2">我是true</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
if_1:true,
if_2:false
}
});
</script>
解析效果为
- 看到了吧,设置为true的
标签,成功渲染出来,而设置为false的
标签,直接被一行注释代替了,并没有被解析渲染出来。
- 与v-show的区别也就显示出来了,
注意 : 在需要频繁切换显示/隐藏,就用v-show,运行后不太可能需要切换显示/隐藏,就用v-if
v-else指令
- if和else在编程中一般都是成对出现的,在vue中也不例外,它没有对应的值,但是要求一个兄弟节点必须使用v-if指令,也是,没有if,哪有else;
<div id="app">
<p v-if="if_1">我是if</p>
<p v-else>我是else</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
if_1:false
}
});
</script
下面说完我想吐槽下用markdown记笔记插图片的梗,很无语.
- 只有第二个
被渲染出来了,第一个
标签由于v-if指令的值为false,直接被忽视了,不渲染;
- 同理,一旦第一个标签的v-if指令值为true,被忽视的就是第二个
.v-if和v-else只有一个会被渲染出来;
java
见第一个最上面.
v-for指令
- 有时候data中存放的数据不是简单的数字或者字符串,而是数组array类型,这个时候想把数组的元素显示在视图上,就需要用到vue提供的v-for指令,来实现列表的渲染;
div id="app">
<div v-for="item in list">{{item}}</div>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
list:['Tom','John','Lisa']
}
});
</script>
- item表示每个元素,我理解的相当于遍历了
//解析出来为三个div, 其中包含的值分别是数组中的元素;
<div>Tom</div>
<div>John</div>
<div>Lisa</div>
页面中渲染为:
Tom
John
Lisa
想拿索引?
也很简单,我们稍微改动下代码,把html部分的代码修改为
<div id="app">
<div v-for="(item,index) in list">
{{index}}.{{item}}
</div>
</div>
- 在循环过程中,我们不但要拿到数组的每个元素item,我们还获取每个元素的索引,写法如上,循环的时候加上(index,item)
效果图/源码图为:
0.Tom <div>0.Tom</div>
1.John <div>1.John</div>
2.Lisa <div>2.Lisa</div>
提醒:v-for指令除了可以迭代数组,还可以迭代对象和整数。 (这里我没测试,有兴趣的可以测试告诉我哈哈)
v-bind指令
- 前面提过v-bind指令的作用和用法,动态绑定DOM元素的属性,比较常见的如:标签的href属性,标签的src属性
- 这里就不说了
v-on指令
- v-on 指令相当于绑定事件的监听器,绑定的事件触发了,可以指定事件的处理函数,在前面vue一种介绍了methods选项的时候,用到了v-on(我记得),这里还是配合methods演示
<div id="app">
<button v-on:click="say">点击</button>
</div>
<script>
let app = new Vue({
el:"#app",
methods:{
say(){
console.log('hello');
}
}
});
</script>
此外,如果你想给处理程序say( )传参数,也是可以的,用法跟普通的方法一致。
<div id="app">
<button v-on:click="say('Tom')">
点击
</button>
</div>
<script>
let app = new Vue({
el:"#app",
methods:{
say(name){
console.log('hello,'+name);
}
}
});
</script>
渲染出来的是:hello,Tom
v-model指令
- 一般用在表单输入,它帮助我们实现表单控件和数据的双向绑定,相对以前手动更新Dom,是不是很好;
<div id="app">
<input v-model="msg" type="text">
<p>你输入:{{ msg }}</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:''
}
});
</script>
- 只要给input控件添加v-model指令,并关联的数据msg,我们就可以轻松的把用户输入的内容都绑定在msg上,是不是感受到了MVVM带来的快感哈哈哈
v-once指令
- 最后一个v-once指令,它的特点是只渲染一次,后面元素中的数据在更新变化都不会重新渲染;
<div id="app">
<input v-model="msg" type="text">
<p v-once>你输入:{{ msg }}</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:'hello,公众号的同学们'
}
});
</script>
- 修改了
标签,增加了v-once指令;
- msg的初始值不再是空字符串;(这个我总忘,第一次渲染需要有内容的)
- 由于msg有了初始值,第一次渲染的时候,input控件和
标签都有了内容,由于
标签我们增加了v-once指令.所以,后期我们更新msg值的时候,
标签的内容不会改变;
总结
这节讲了
- v-html
- v-bind
- v-text
- v-show
- v-if
- v-else
- v-once
- v-model
- v-on
- v-for
十个指令你会了几个呢?是不是so easy? 都能看明白就是在实际开发中如何具体去应用了.
今日吐槽:
1. MarkDown
有的人应该知道,MarkDown引用的两种方式,(这里我笼统的归结为两种)
- 本地和在线,本地都知道,哪天图片丢失了,或者没有上传就无法显示了,
本地可以直接创建文件夹使用绝对路径,这里不多说. - 在线上传有很多种,什么GitHub啊 ,上传服务器之类的,base64转码啊(超级麻烦)总之就是为了获取在线图片的网址,反正就是很烦,可是又必须zheyan这样,Mac人家可以直接在线在线就上传到微博了,图床(好像这个插件自带的)具体是不是这两字我也不知道,没查,Windows不支持.,所以很郁闷,这里的图片我是上传到我微博,然后复制的地址,哪天微博dongtaish动态删了就没有了,所以在微博我备注上博客存图.很心塞......
2.代码格式
- 在MarkDown上还支持vue格式的代码高亮显示,到这里jiubuzi就不支持了,全是白的,为了看着更突然清晰,手动一个个改成了java代码块风格,很是无无语,好了,吐槽完毕.
再见~