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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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学习笔记之二 php入门知识
2011/01/12 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
Python解析、提取url关键字的实例详解
2018/12/17 Python
详解Python_shutil模块
2019/03/15 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
后勤主管工作职责
2013/12/07 职场文书
文科生自我鉴定
2014/02/15 职场文书
职业女性的职业规划
2014/03/04 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
Windows server 2016服务器基本设置
2022/08/14 Servers