Vue 2.0入门基础知识之内部指令详解
1.Vue.js介绍
当前前端三大主流框架：Angular、React、Vue。React前段时间由于许可证风波，使得Vue的热度蹭蹭地上升。另外，Vue友好的API文档更是一大特色。Vue.js是一个非常轻量级的工具，与其说是一个MVVM框架，不如说是一个js库。Vue.js具有响应式编程和组件化的特点。响应式编程，即保持状态和视图的同步，状态也可以说是数据吧；而其组件化的理念与React则一样，即“一切都是组件，组件化思想方便于模块化的开发，是前端领域的一大趋势。
2.内部指令
2-1.v-if v-else v-show：前两者一般配合使用，v-show的效果类似于v-if。
实例如下：
<body>
<div id="app">
<p v-if="flag">if</p>
<p v-else>else</p>
<p v-show="flag">show</p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
flag:true
}
});
</script>
DOM结构中，三个p标签中的内容是否显示在页面中取决于flag的布尔值属性。当flag为true时，if和show都会显示，else也不会存在于DOM结构中。v-if和v-show的不同体现在：v-if是根据条件的值判断是否加载，可以减轻服务器的压力，但是缺点是当改变条件的值，页面又要加载一次；v-show则无论条件的值是否为true，都会加载（若条件为true，则display属性设置为其默认属性，反之，设置为none）
2-2.v-for 循环指令
实例如下：
<body>
<div id="app">
<ol>
<li v-for="b in b">{{b}}</li>
</ol>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
b:['a','b','c',1,2]
}
});
</script>
页面会显示5个li，插值的效果是li会显示与数组b一 一对应的元素，v-for有点类似于for in循环
2-3 v-text v-html 文本（html字符串）指令
<body>
<div id="app">
<p v-text="msgText"></p>
<p v-html="msgHtml"></p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
msgText:"China",
msgHtml:"<span>中国</span>"
}
});
</script>
可以联想到jquery的text()、html()。到现在，你会发现前面都是利用插值操作，即{{}}，这种做法会在一定程度上影响性能。
2-4 v-on 绑定事件监听器
实例如下：
<body>
<div id="app">
<button v-on:click="Hi()">Button</button>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
methods:{
Hi:function(){
alert("Hello World!")
}
}
});
</script>
同理，类比jquery的on()方法，绑定事件用的，实例中v-on:click可以简写为@click。click可以替换成鼠标的其他操作，如mouseout、mouseover等等。
2-5 v-bind指令
实例如下：
<body>
<div id="app">
<a v-bind:style="{color:'red'}" :src="message">{{message}}</a>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>
效果为a标签显示红色，且其src属性为vm.message。v-bind指令主要用于设置html标签的属性，其简写形式为 v-bind：——>：
2-6 v-model 数据双向绑定指令
实例如下：
<body>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>
当input输入的值发生变化时，p标签包含的内容也会随之变化，且与前者保持一致。
2-7 v-pre 指令
实例如下：
<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>
第一个p标签输出“前端工程师”，而第二个p标签则会跳过vue编译，输出原始值，即{{message}}。
2-8 v-cloak指令
v-cloak指令的作用是当DOM树构建好完成页面的渲染后才执行，且其须要与css一起使用
2-9 v-once指令
v-once指令的作用是只有当DOM树第一次渲染时起作用。
总结
以上所述是小编给大家介绍的Vue 2.0入门基础知识之内部指令详解，希望对大家有所帮助！
相关文章
这篇文章主要为大家详细介绍了vue实现静态页面点赞和取消点赞的功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了详解vue移动端项目代码拆分记录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
vue3+ts+elementui-plus二次封装弹框实战教程
这篇文章主要介绍了vue3+ts+elementui-plus二次封装弹框实战教程,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
这篇文章主要介绍了全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vue自定义组件实现v-model双向数据绑定的方法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-11-11
使用Bootstrap + Vue.js实现添加删除数据示例
本篇文章主要介绍了使用Bootstrap + Vue.js实现 添加删除数据示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-02-02
vue中使用webuploader做断点续传实现文件上传功能
之前做的一个项目中，由于经常上传几百兆的压缩包，导致经常上传失败，所以就找了webuploader插件做了断点续传,断点续传除了需要前端分片，也需要后台去支持，所以做的时候做好对接协调,所以本文就给大家详细的介绍一下vue中如何使用webuploader做断点续传2023-07-07
vue验证滑块功能,在生活中很多地方都可以见到,使用起来非常方便,这篇文章主要给大家介绍了关于vue实现滑块拖拽校验功能的相关资料,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了vue中的.sync修饰符用法及原理分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家介绍了VUE3+TS递归组件实现TreeList设计实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论