最近在学习vue.js,连续看了一个星期的视频教材,整个人都是懵的,于是打算停一下脚步,把在视频里面看到的知识整理一番,出一个自己的笔记。
vue.js中很多的修饰符都是以 v- 的形式出现的,下面将一些常用的指令:
1、v-cloak
我们用vue来传输数据的时候,往往会用到类似 {{ msg }} 这样的内容,正常情况下这样的内容只有程序员可以看到,而有一种情况,当用户的网络不ok,<script> 语句还没有将数渲染到浏览器的时候,用户会意外看到原本不应该看到的东西,这就影响了用户体验,这时 v-cloak 的作用就显现了。
v-cloak的作用,就是在数据没有用传输到浏览器之前,将 {{ msg }} 先隐藏起来,这就类似于css里面的 display:none和 display:bolck,数据没有传输过来的时为 none ,数据传输完成再给他显示为 block 。
v-cloak 主要解决页面闪烁问题
<h1 v-cloak> {{ msg }} </h1>
2、v-text
v-text 没有闪烁问题,因为一般用 v-text 的时候,不会在元素内添加别的值, v-text 会覆盖元素里面的值
<h1 v-text = 'msg'>这句话在数据传输完毕后会被 msg 里面的值覆盖</h1>
3、v-html
和 v-text 类似的一个指令 v-html 他们在写法上几乎一模一样,但 v-html 比 v-text 多了一个作用,就是支持 html 的编译,而 v-text 中的值会原样输出
<div id ="app" v-html = 'msg'></h1>
<script>
var vm = new Vue({
el:#app, // el 的值表示当前 new 这个实例要控制的区域
data:{
msg:'<h1>这句话将会以h1的格式显示在浏览器页面上</h1>' // data 里面存放的是 el 中要用到的数据
},
methods:{
//这个 methods 属性定义了当前 Vue 实例所有可用的方法
}
});
</script>
4、v-bind
v-bind 是 vue 中用于绑定数据的属性的指令, v-bind 中可以写合法的 js 指令,同时 v-bind 也可以简写为 : +绑定的属性。
<input id = "app" type ="text" v-bind:value="myvalue" :title ="mytitle">
<script>
var vm = new Vue({
el:"#app",
data:{
text:"按钮",
mytitle:"这是一个标题。"
},
})
</script>
5、v-on
v-on 是 vue 中用于绑定事件方法的指令, v-bind 中可以写合法的 js 指令 , 同时 v-bind 也可以简写为 @ +绑定属性。
<input id ="app" type = "button" :value ="myvalue" v-on:click="show">//此处的 v-on 完全可以用@来表示
<script>
var vm =new Vue({
el:'#app',
data:{
myvalue:"点击"
},
methods:{
show:function(){
alert("你好,世界!")
}
}
});
</script>
暂时就先写这五个,后面再补充