Vue 2.0入门基础知识之内部指令详解


Posted in Javascript onOctober 15, 2017

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入门基础知识之内部指令详解,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery 白痴级入门教程
Nov 11 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
Vue异步组件使用详解
Apr 08 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
详解vue-cli 脚手架 安装
Apr 16 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 Javascript
JS中的多态实例详解
Oct 15 #Javascript
vue跨域解决方法
Oct 15 #Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 #Javascript
详解 vue.js用法和特性
Oct 15 #Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
JS简单实现数组去重的方法分析
Oct 14 #Javascript
jQuery响应滚动条事件功能示例
Oct 14 #jQuery
You might like
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python中反射和描述器总结
2018/09/23 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
小学生班会演讲稿
2014/01/09 职场文书
化学教师教学反思
2014/01/17 职场文书
洗车工岗位职责
2014/03/15 职场文书
生日主持词
2014/03/20 职场文书
会计系毕业生求职信
2014/05/28 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
高中生旷课检讨书
2014/10/08 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
婚礼家长致辞
2015/07/27 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
一篇文章弄懂Python中的内建函数
2021/08/07 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS