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 相关文章推荐
JS去除数组重复值的五种不同方法
Sep 06 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
js图片预加载示例
Apr 30 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
Node.js返回JSONP详解
May 18 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
自己前几天写的无限分类类
2007/02/14 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
php中__toString()方法用法示例
2016/12/07 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python项目跨域问题解决方案
2020/06/22 Python
公司财务总监岗位职责
2013/12/14 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
教师节演讲稿
2014/05/06 职场文书
超市理货员岗位职责
2014/07/04 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
研修心得体会
2014/09/04 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
2015年资料员工作总结
2015/04/25 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
学雷锋广播稿大全
2015/08/19 职场文书