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 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
python为什么要安装到c盘
2020/07/20 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
转让协议书
2015/01/27 职场文书
创先争优个人总结
2015/03/04 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
教师远程培训心得体会
2016/01/09 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL