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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
javascript this详细介绍
2016/09/19 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
微信小程序实现循环动画效果
2018/07/16 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python发布模块的步骤分享
2014/02/21 Python
python制作一个桌面便签软件
2015/08/09 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
恶意软件的定义
2014/11/12 面试题
学校教师安全责任书
2014/07/23 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
起诉书格式范文
2015/05/20 职场文书
2016年寒假生活小结
2015/10/10 职场文书
oracle索引总结
2021/09/25 Oracle