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的全局API~

Vue 2.0入门基础知识之内部指令的更多相关文章

  1. Vue 2.0入门基础知识之全局API

    3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...

  2. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  3. USB入门基础知识（转）

    源:USB入门基础知识 相关名词: 主机(Host) 设备(Device) 接口(Interface) 管道(Pipe) 管道是主机与设备端点数据传输的连接通道,代表了主机的数据缓冲区与设备端点之间交 ...

  4. Greenplum入门——基础知识、安装、常用函数

    Greenplum入门——基础知识.安装.常用函数 2017年10月08日 22:03:09 在咖啡里溺水的鱼 阅读数:8709    版权声明:本文为博主原创,允许非商业性质转载但请注明原作者和出处 ...

  5. Linux入门基础知识

    注:内容系兄弟连Linux教程(百度传课:史上最牛的Linux视频教程)的学习笔记. Linux入门基础知识 1. Unix和Linux发展历史 二者就像父子关系,当然Unix是老爹.1965年,MI ...

  6. 1)Linux程序设计入门--基础知识

    )Linux程序设计入门--基础知识 Linux下C语言编程基础知识 前言: 这篇文章介绍在LINUX下进行C语言编程所需要的基础知识.在这篇文章当中,我们将 会学到以下内容: 源程序编译 Makef ...

  7. PHP基础入门（二）---入门基础知识必备

    前言 在上一章中,我们初步了解了PHP的网页基础和PHP的入门基础,今天继续给大家分享更多有关PHP的知识. 理论知识看起来可能比较枯燥一些,但是我们的实践(敲代码)毕竟离不开它. 只有理论与实践相结 ...

  8. 【值得收藏】C语言入门基础知识大全！从C语言程序结构到删库跑路！

    01 C语言程序的结构认识 用一个简单的c程序例子,介绍c语言的基本构成.格式.以及良好的书写风格,使小伙伴对c语言有个初步认识. 例1:计算两个整数之和的c程序: #include main() { ...

  9. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

随机推荐

  1. 网络编程、三要素、Socket通信、UDP传输、TCP协议、服务端(二十五)

    1.网络编程概述 * A:计算机网络 * 是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享和信息传 ...

  2. 以太坊EVM1.0缺陷

    256位的虚拟机 目前主流的CPU是32位或64位,在这些机器上进行256位运算需要将256位分段成多个64位指令执行,执行效率比32/64位低,在存储上方面,保存一个数需要256位的存储空间,绝大多 ...

  3. iOS--控制器加载自定义view的xib

    我们在项目中,经常需要使用到自定义的view,而xib布局显得更为简洁,那么如何加载一个自定义的xib呢,网上的方法也很多很多,就是因为太多了,我经常会弄混,所以总结其中一个使用,如果以后使用到其他的 ...

  4. codeforces 459 B.Pashmak and Flowers 解题报告

    题目链接:http://codeforces.com/problemset/problem/459/B 题目意思:有 n 朵 flowers,每朵flower有相应的 beauty,求出最大的beau ...

  5. 【USACO06NOV】路障

    [题目链接] 点击打开链接 [算法] 最短路 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 5000 #de ...

  6. NOIP2003题解

    传送门 考查题型 搜索 字符串 模拟 dp T1 神经网络 题目背景 人工神经网络(Artificial Neural Network)是一种新兴的具有自我学习能力的计算系统,在模式识别.函数逼近及贷 ...

  7. Intelidea右键新建选项没有Java class选项

    Intelidea创建好项目之后,右键新建Java class的时候发现没有改选项,只有以下几个选项 把sec目录设为源码目录,首先打开Project Structure

  8. Python学习之旅—生成器与迭代器案例剖析

    前言 前面一篇博客笔者带大家详细探讨了生成器与迭代器的本质,本次我们将实际分析一个具体案例来加深对生成器与迭代器相关知识点的理解. 本次的案例是一个文件过滤操作,所做的主要操作就是过滤出一个目录下的文 ...

  9. Oracle UNDO Tablespace size & Table Size

    Table Space Query select SEGMENT_NAME,bytes/1024/1024,a.* from dba_segments a UNDO Table Space Size ...

  10. Tenka1 Programmer Beginner Contest D - IntegerotS（位运算）

    传送门 题意 给出N,K,给出N对数a[i],b[i],选择一些数使得or和小于k且\(max\sum b[i]\) 分析 枚举k的每一个1位,将其删去并让低位全为1,对于每一个这样的数c,如果a[i ...