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的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
js键盘事件的keyCode
Jul 29 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
Vue声明式渲染详解
May 17 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 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版(3)
2006/10/09 PHP
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
php文件上传类的分享
2017/07/06 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
python的常见矩阵运算(小结)
2019/08/07 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
本科毕业生的求职信范文
2013/11/20 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
情人节寄语大全
2014/04/11 职场文书
搞笑爱情保证书
2014/04/29 职场文书
3的组成教学反思
2014/04/30 职场文书
初中学习计划书范文
2014/09/15 职场文书
电工实训报告总结
2014/11/05 职场文书
北京颐和园导游词
2015/01/30 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
MySQL Router的安装部署
2021/04/24 MySQL