一、插值

1.1 +号运用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">{{ greeting + greeting }}</div>
  10.  
  11.     <script>
  12.         new Vue({
  13.             el: "#app",
  14.             data: {
  15.                 greeting: "Hello world"
  16.             }
  17.         })
  18.     </script>
  19.  
  20. </body>
  21. </html>

　　

二、v-text

类似双大括号语法渲染数据的另一种方式是使用v-text。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app" v-text="greeting"></div>
  10.  
  11.     <script>
  12.         new Vue({
  13.             el: "#app",
  14.             data: {
  15.                 greeting: "Hello world"
  16.             }
  17.         })
  18.     </script>
  19.  
  20. </body>
  21. </html>

　　

三、v-html

双大括号语法无法渲染HTML标签，我们需要使用v-html。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app" v-html="greeting"></div>
  10.  
  11.     <script>
  12.         new Vue({
  13.             el: "#app",
  14.             data: {
  15.                 greeting: "<h1>Hello world</h1>"
  16.             }
  17.         })
  18.     </script>
  19.  
  20. </body>
  21. </html>

　　

四、v-for

接下来，我们看看数组和对象的渲染方式。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app" >
  10.          <ul>
  11.              <li v-for="item in guniang">{{ item }}</li>
  12.          </ul>
  13.  
  14.         <ul>
  15.             <li v-for="item in students">{{ item.name }}的爱好是{{ item.hobby }}</li>
  16.         </ul>
  17.         <ul>
  18.             <li v-for="item in student">{{ item }}</li>
  19.         </ul>
  20.     </div>
  21.  
  22.     <script>
  23.         new Vue({
  24.             el: "#app",
  25.             data: {
  26.                 guniang: ['逛街', '美甲', '吃'],
  27.                 students: [
  28.                     {
  29.                         name: "jiaxiaoliang",
  30.                         hobby: 'girls'
  31.                     },
  32.                     {
  33.                         name: "zhaofengfeng",
  34.                         hobby: 'girls'
  35.                     },
  36.                     {
  37.                         name: 'xiaohe',
  38.                         hobby: 'boys'
  39.                     }
  40.                 ],
  41.                 student: {
  42.                     name: 'alex',
  43.                     age: 87
  44.                 }
  45.             }
  46.         })
  47.     </script>
  48.  
  49. </body>
  50. </html>

　　

五、v-if

渲染数据的时候，同样也可以使用条件判断，我们来看看。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app" >
  10.          <div v-if="name == 'guniang'">
  11.              欢迎美女光临~~
  12.          </div>
  13.         <div v-else-if="name == 'pizza'">
  14.             欢迎帅哥光临
  15.         </div>
  16.         <div v-else>
  17.             滚~~
  18.         </div>
  19.     </div>
  20.  
  21.     <script>
  22.         new Vue({
  23.             el: "#app",
  24.             data: {
  25.                 name: "guniang"
  26.             }
  27.         })
  28.     </script>
  29.  
  30. </body>
  31. </html>

通过上面的代码我们可以看出，v-if的作用是控制标签的显示，它通过判断添加标签，底层采用的是appendChild来实现的，下面我们来看一个同样也是控制标签显示的另一个指令v-show。

六、v-show

与v-if不同的是，v-show通过样式的display控制标签的显示。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7.     <style>
  8.         .box {
  9.             height: 100px;
  10.             width: 100px;
  11.             background-color: red;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="app" >
  17.          <div v-show="isShow" class="box">xxxx</div>
  18.     </div>
  19.  
  20.     <script>
  21.         new Vue({
  22.             el: "#app",
  23.             data: {
  24.                 isShow: true
  25.             }
  26.         })
  27.     </script>
  28.  
  29. </body>
  30. </html>

　　

与v-if不同的是，v-show通过样式的display控制标签的显示。

v-if和v-show的性能比较

我们简单比较一下二者的区别：

实现方式：v-if底层采用的是appendChild来实现的，v-show通过样式的display控制标签的显示，正因为实现方式上面有差异，导致了他们的加载速度方面产生了差异；

加载性能：v-if加载速度更快，v-show加载速度慢

切换开销：v-if切换开销大，v-show切换开销小

v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。

七、v-bind

绑定属性，不多说了，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7.     <style>
  8.         .active {
  9.             height: 100px;
  10.             width: 100px;
  11.             background-color: red;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="app" >
  17.          <!--<div v-bind:class="{active: isActive}">xxxx</div>-->
  18.         <!--<div v-bind:class="[isActive]">Hello World!</div>-->
  19.         <div :class="[isActive]">Hello World!</div>
  20.     </div>
  21.  
  22.     <script>
  23.         new Vue({
  24.             el: "#app",
  25.             data: {
  26.                 isActive: 'active',
  27.             }
  28.         })
  29.     </script>
  30.  
  31. </body>
  32. </html>

　　

八、v-model

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7.     <style>
  8.         .active {
  9.             height: 100px;
  10.             width: 100px;
  11.             background-color: red;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="app" >
  17.         <input type="text" v-model="name"/>
  18.  
  19.         <input type="checkbox" value="男" v-model="gender"/>
  20.         <input type="checkbox" value="女" v-model="gender"/>
  21.  
  22.         <p>请选择你的女朋友</p>
  23.         <select id="" name="" v-model="girlFriends">
  24.             <option>alex</option>
  25.             <option>peiqi</option>
  26.             <option>egon</option>
  27.         </select>
  28.  
  29.         <hr>
  30.         {{ name }}
  31.         {{ gender }}
  32.         {{ girlFriends}}
  33.     </div>
  34.  
  35.     <script>
  36.         new Vue({
  37.             el: "#app",
  38.             data: {
  39.                 name: 'pizza',
  40.                 gender: [],
  41.                 girlFriends: []
  42.             }
  43.         })
  44.     </script>
  45.  
  46. </body>
  47. </html>

　　

九、v-on

另一个非常重要的指令是v-on，使用v-on我们可以在标签上面绑定事件，注意我们新建的vue实例app01中多了一个属性，methods，在methods中，是我们具体事件的实现方式。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7.     <style>
  8.         .box {
  9.             color: green;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="app" >
  15.         <p v-bind:class="{box: isShow}">alex</p>
  16.  
  17.         <button v-on:click="doAlex">点击让Alex变绿</button>
  18.     </div>
  19.  
  20.     <script>
  21.         new Vue({
  22.             el: "#app",
  23.             data: {
  24.                 name: 'pizza',
  25.                 gender: [],
  26.                 girlFriends: [],
  27.                 isShow: false
  28.             },
  29.             methods: {
  30.                 doAlex: function () {
  31.                     this.isShow = true;
  32.                 },
  33.                 doPeiqi: function () {
  34.                 }
  35.             }
  36.         })
  37.     </script>
  38.  
  39. </body>
  40. </html>

　　

十、指令修饰符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7.     <style>
  8.         .box {
  9.             color: green;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="app" >
  15.         <table border="1">
  16.             <thead>
  17.                 <tr>
  18.                     <th>学科</th>
  19.                     <th>成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>Python</td>
  25.                     <td><input type="text" v-model.number="python"/></td>
  26.                 </tr>
  27.                 <tr>
  28.                     <td>Linux</td>
  29.                     <td><input type="text" v-model.lazy="linux"/></td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>Vue</td>
  33.                     <td><input type="text" v-model.trim="vue"/></td>
  34.                 </tr>
  35.  
  36.             </tbody>
  37.         </table>
  38.  
  39.         <hr>
  40.         {{ python }}
  41.         {{ linux }}
  42.         {{ vue }}
  43.     </div>
  44.  
  45.     <script>
  46.         const vm = new Vue({
  47.             el: "#app",
  48.             data: {
  49.                 python: 60,
  50.                 linux: 60,
  51.                 vue: 60
  52.             }
  53.         })
  54.     </script>
  55.  
  56. </body>
  57. </html>

　　

十一、计算属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7.     <style>
  8.         .box {
  9.             color: green;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="app" >
  15.         <table border="1">
  16.             <thead>
  17.                 <tr>
  18.                     <th>学科</th>
  19.                     <th>成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>Python</td>
  25.                     <td><input type="text" v-model.number="python"/></td>
  26.                 </tr>
  27.                 <tr>
  28.                     <td>Linux</td>
  29.                     <td><input type="text" v-model.lazy="linux"/></td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>Vue</td>
  33.                     <td><input type="text" v-model.trim="vue"/></td>
  34.                 </tr>
  35.                 <tr>
  36.                     <td>总成绩</td>
  37.                     <td>{{ sumScore }}</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.  
  42.         <hr>
  43.         {{ python }}
  44.         {{ linux }}
  45.         {{ vue }}
  46.         {{ sumScore }}
  47.  
  48.         <h1>{{ greeting }}</h1>
  49.         <h1>{{ reversedGreeting }}</h1>
  50.  
  51.         <input type="text" v-model="name"/>
  52.     </div>
  53.  
  54.     <script>
  55.         const vm = new Vue({
  56.             el: "#app",
  57.             data: {
  58.                 python: 60,
  59.                 linux: 60,
  60.                 vue: 60,
  61.                 greeting: "hello vue!",
  62.                 name: 'alex',
  63.             },
  64.             methods: {
  65.  
  66.             },
  67.             computed: {
  68.                 sumScore: function () {
  69.                     console.log(1);
  70.                     return this.python + this.linux + this.vue;
  71.                 },
  72.                 reversedGreeting: function () {
  73.                     return this.greeting.split('').reverse().join('');
  74.                 },
  75.             },
  76.             watch: {
  77.                 name: function () {
  78.                     console.log(2);
  79.                     console.log("hahahah");
  80.                 }
  81.             }
  82.         })
  83.     </script>
  84.  
  85. </body>
  86. </html>

　　

十二、自定义属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7.     <style>
  8.         .box {
  9.             background-color: red;
  10.             width: 100px;
  11.             height: 100px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="app" >
  17.  
  18.         <div v-pos.bottom.right="post" v-bind:class="{ box: isBox }">alex is big sb.</div>
  19.     </div>
  20.  
  21.     <script>
  22.         Vue.directive("pos", function (el, bindding) {
  23.             console.log("el: ", el);
  24.             console.log("bindding: ", bindding);
  25.             if (bindding.value) {
  26.                 el.style.position = 'fixed';
  27.                 for (let key in bindding.modifiers) {
  28.                     el.style[key] = 0;
  29.                 }
  30.             }
  31.         });
  32.  
  33.         const vm = new Vue({
  34.             el: "#app",
  35.             data: {
  36.                 isBox: true,
  37.                 post: false,
  38.             },
  39.             methods: {
  40.  
  41.             },
  42.             computed: {
  43.  
  44.             },
  45.             watch: {
  46.  
  47.             }
  48.         })
  49.     </script>
  50.  
  51. </body>
  52. </html>

　　

十三、获取DOM元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../statics/vue.min.js"></script>
  7.     <style>
  8.         .box {
  9.             color: green;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="app" >
  15.         <p ref="myAlex">alex</p>
  16.  
  17.         <button v-on:click="doAlex">点击让Alex变绿</button>
  18.     </div>
  19.  
  20.     <script>
  21.         const VM = new Vue({
  22.             el: "#app",
  23.             data: {
  24.                 name: 'pizza',
  25.                 gender: [],
  26.                 girlFriends: [],
  27.                 isShow: false
  28.             },
  29.             methods: {
  30.                 doAlex: function () {
  31.                     this.$refs.myAlex.style.color = 'green';
  32.                 },
  33.                 doPeiqi: function () {
  34.                 }
  35.             }
  36.         })
  37.     </script>
  38.  
  39. </body>
  40. </html>

　　

vue学习之三常用命令的更多相关文章

  1. 一张图学习vim常用命令

    一张图学习vim常用命令

  2. goland学习-go常用命令使用

    goland学习-go常用命令使用 1.跨平台编译:env GOOS=linux GOARCH=amd64 go build 2.获取go第三方包:go get -u github.com/go-sq ...

  3. Redis学习笔记--常用命令

    以下为本人学习Redis的备忘录,记录了大部分常用命令 1.客户端连接redis服务端: ===启动Redis服务端 redis-server /yourpath/redis.conf ===启动Re ...

  4. Linux_学习_01_常用命令大全

    一.文件目录 1.列出目录 ls -a #显示隐藏文件 -l #显示文件和目录的详细资料 -h -lrt tree #显示文件和目录由根目录开始的树形结构 lstree #显示文件和目录由根目录开始的 ...

  5. Git学习 --> 个人常用命令add,commit以及push

    Git命令行配置1 安装Github2 安装msysgit3 要配置用户名和油箱  git config --global user.name <用户名> 我的命令就是:git confi ...

  6. Hexo学习笔记--常用命令及部署步骤

    参考资料: Hexo搭建Github静态博客:http://www.cnblogs.com/zhcncn/p/4097881.htmlHexo:独立博客新玩法:http://www.aips.me/h ...

  7. SQL学习笔记---常用命令

    常用命令 变量 1.声明 declare @变量名 类型,… 2.赋值 1.同时赋值多个变量(可以结合查询) select @变量名=表达式1,表达式2 2.单个赋值(推荐) set @变量名=表达式 ...

  8. Redis 学习之常用命令及安全机制

    该文使用centos6.5 64位    redis3.2.8 一.redis常用命令 键值常用命令: 1. keys 返回满足pattern的所有key. 127.0.0.1:6379> ke ...

  9. ionic学习笔记—常用命令

    Ionic CLI介绍 Ionic CLI是开发Ionic应用程序过程中使用的主要工具.它就像一个瑞士军刀:它在一个界面下汇集了大量工具. CLI包含许多对Ionic开发至关重要的命令,例如start ...

随机推荐

  1. Android源码中中一种常见的struct使用方法

    直接看例子: #include<iostream> #include<stdlib.h> using namespace std; struct Base{ int ba; i ...

  2. purge recyclebin之后dba_segments仍然有BIN$段

    现象: purge recyclebin之后dba_segments仍然有BIN$段. 如下,执行了purge recyclebin之后: SQL> select segment_name,SE ...

  3. Linux下安装PHP 5.4.3（以Apache为WebServer）

    转载http://www.cnblogs.com/rainisic/archive/2012/05/23/Apache_PHP_Install.html 下载PHP 官方下载:http://www.p ...

  4. html2canvas - 解决办法之图片跨域导致的截图空白

    1. 后端支持:图片要是cdn上的地址,并且允许图片跨域,header头中设置应为 Access-Control-Allow-Origin:  * 2. 前端配置 var opts = { scale ...

  5. jQuery的一些静态方法

    // 该方法被绑定在jQuery对象上,只能通过$.noConflict()调用 noConflict: function( deep ) { // 取消$在window上的绑定,方法是将_$绑定到w ...

  6. vs2017编译网狐荣耀服务端的心得

    1.找不到d3dx9.h 从D:\Microsoft DirectX SDK (June 2010)\Include复制 d3dx9.hd3dx9anim.hd3dx9core.hd3dx9effec ...

  7. Spark学习笔记--Spark在Windows下的环境搭建

    本文主要是讲解Spark在Windows环境是如何搭建的 一.JDK的安装 1.1 下载JDK 首先需要安装JDK,并且将环境变量配置好,如果已经安装了的老司机可以忽略.JDK(全称是JavaTM P ...

  8. Laravel 5.1 中如何使用模型观察者

    有时候我们需要在一个表更改后,触发某个事件,最常见的比如,首页推荐商品 1 更改了,需要清空所有首页商品缓存. 首先我们需要在建立一个观察者类,比如 App\Model\Observers\Proje ...

  9. TX失败策略2

    自从有了人类,就有了智慧和精神.但总有一些思想家跳出来说人定胜天的理论,这是一种严重的误导.人类社会和自然界一样,遵守统一的自然定律.人就像不能改变物理定律一样改社会定律.更不可能因片面的社会现象遮盖 ...

  10. Fiddler 教程（转载，鉴于原作者关闭了访问fiddler系列文章）

    阅读目录 Fiddler的基本介绍 Fiddler的工作原理 同类的其它工具 Fiddler如何捕获Firefox的会话 Fiddler如何捕获HTTPS会话 Fiddler的基本界面 Fiddler ...