一、什么是VUE？

它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）

二、怎么使用VUE？

1、引入vue.js

2、展示HTML

  1. <div id="app">
  2.     <p>{{msg}}</p>
  3.     <p>{{ 80+2 }}</p>
  4.     <p>{{ 20>30 }}</p>
  5.     <h1 v-text="msg"></h1>
  6.     <h1 v-html="hd"></h1>
  7.     <h1 v-html="str"></h1>
  8. </div>

3、建立一个vue对象

  1. <script>
  2.     new Vue({
  3.         el:"#app",  //表示当前这个元素开始使用vue
  4.         data:{
  5.             msg:"你好啊",
  6.             hd:"<input type='button' value='啦啦'>",
  7.             str:"你妹的"
  8.         }
  9.     })
  10. </script>

三、数据绑定

1、插入文本{{ }}。如上例，也可以放表达式

2、插入html：v-html

四、vue的指令

指令：是带有v-前缀的特殊属性，通过属性来操作元素

1、v-text：在元素当中插入值

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width">
  7.      <title>Title</title>
  8.      <script src="vue.js"></script>
  9.  </head>
  10.  <body>
  11.  <div id="app">
  12.      <p>{{msg}}</p>
  13.      <p>{{ 80+2 }}</p>
  14.      <p>{{ 20>30 }}</p>
  15.      <h1 v-text="msg"></h1>
  16.      <h1 v-html="hd"></h1>
  17.      <h1 v-html="str"></h1>
  18.  </div>
  19.  <script>
  20.      new Vue({
  21.          el:"#app",  //表示当前这个元素开始使用vue
  22.          data:{
  23.              msg:"你好啊",
  24.              hd:"<input type='button' value='啦啦'>",
  25.              str:"你妹的"
  26.          }
  27.      })
  28.  </script>
  29.  </body>
  30.  </html>

示例

2、v-html：在元素当中不仅可以插入文本，还可以插入标签

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width">
  7.      <title>Title</title>
  8.      <script src="vue.js"></script>
  9.  </head>
  10.  <body>
  11.  <div id="app">
  12.      <h1>问卷调查</h1>
  13.      <form action="" method="post">
  14.          <input type="checkbox">香蕉
  15.          <input type="checkbox">苹果
  16.          <input type="checkbox">橘子
  17.          <input type="checkbox"  @click="qita">其他
  18.          <div v-html="htmlstr" v-show="test"></div>
  19.      </form>
  20.  </div>
  21.  <script>
  22.      new Vue({
  23.          el:"#app",  //表示当前这个元素开始使用vue
  24.          data:{
  25.              htmlstr:'<textarea></textarea>',
  26.              test:false  //默认是隐藏的
  27.          },
  28.          methods:{
  29.              qita:function () {
  30.                  this.test = !this.test  //当一点击其他的时候让显示
  31.              }
  32.          }
  33.  
  34.      });
  35.  
  36.  </script>
  37.  
  38.  </body>
  39.  </html>

示例

3、v-if和v-else：根据表达式的真假值来动态插入和移除元素

4、v-show：根据表达式的真假值来显示和隐藏元素

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width">
  7.      <title>Title</title>
  8.      <script src="vue.js"></script>
  9.  </head>
  10.  <body>
  11.  <div id="app">
  12.      <p v-if="pick">我是海燕</p>
  13.      <p v-show="temp">呼啦啦呼啦啦</p>
  14.      <p v-show="ok">你喜欢我吗?</p>
  15.  </div>
  16.  <script>
  17.      var vm = new Vue({
  18.          el:"#app",  //表示当前这个元素开始使用vue
  19.          data:{
  20.  //           pick:true  //显示
  21.             pick:false,   //移除，用注释给替换了
  22.  //            temp :true ,  //显示
  23.             temp :false,   //隐藏
  24.             ok:true
  25.          }
  26.      });
  27.      window.setInterval(function() {
  28.          vm.ok =! vm.ok;
  29.      },1000)  //1000代表1秒
  30.  </script>
  31.  
  32.  </body>
  33.  </html>

if-show示例

5、v-for：根据变量的值来循环渲染元素

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width">
  7.      <title>Title</title>
  8.      <script src="vue.js"></script>
  9.      <style>
  10.          ul li{
  11.              list-style: none;
  12.          }
  13.      </style>
  14.  </head>
  15.  <body>
  16.      <div id="app">
  17.         <ul>
  18.             <li v-for="item in arr">   <!-- 对一个数组的循环 -->
  19.                 {{ item }}
  20.             </li>
  21.         </ul>
  22.           <ul>
  23.             <li v-for="(item,index) in arr">
  24.                 {{ item }}:{{index}}
  25.             </li>
  26.         </ul>
  27.           <ul>
  28.             <li v-for="item in obj">
  29.                 {{ item }}
  30.             </li>
  31.         </ul>
  32.            <ul>
  33.             <li v-for="(item,key,index) in obj">
  34.                 {{ item }}:{{ key }}:{{ index }}
  35.             </li>
  36.         </ul>
  37.            <ul>
  38.             <li v-for="item in obj2">
  39.                 {{ item.username }}
  40.                 {{ item.age }}
  41.                 {{ item.sex }}
  42.             </li>
  43.         </ul>
  44.          <div v-for="i in 8">  <!--循环8次，打印1 2 3 4 5 6 7 8 -->
  45.              {{ i }}
  46.          </div>
  47.      </div>
  48.      <script>
  49.          var vm = new Vue({
  50.              el:"#app",
  51.              data:{
  52.                  arr:[11,22,33,34],
  53.                  obj:{a:"张三",c:"李四",b:"王麻子",d:"王大拿"},
  54.                  obj2:[
  55.                      {username:"jason"},
  56.                      {age:20},
  57.                      {sex:"male"}
  58.                  ]
  59.              }
  60.          })
  61.      </script>
  62.  </body>
  63.  </html>

6、v-on：监听元素事件，并执行相应的操作

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width">
  7.      <title>Title</title>
  8.      <script src="vue.js"></script>
  9.      <style>
  10.          ul li{
  11.              list-style: none;
  12.          }
  13.      </style>
  14.  </head>
  15.  <body>
  16.      <div id="app">
  17.         <ul>
  18.             <li v-for="item in arr">   <!-- 对一个数组的循环 -->
  19.                 {{ item }}
  20.             </li>
  21.         </ul>
  22.           <ul>
  23.             <li v-for="(item,index) in arr">
  24.                 {{ item }}:{{index}}
  25.             </li>
  26.         </ul>
  27.           <ul>
  28.             <li v-for="item in obj">
  29.                 {{ item }}
  30.             </li>
  31.         </ul>
  32.            <ul>
  33.             <li v-for="(item,key,index) in obj">
  34.                 {{ item }}:{{ key }}:{{ index }}
  35.             </li>
  36.         </ul>
  37.  
  38.          <input type="button" value="点我吧" v-on:click="show()">
  39.          <input type="button" value="点我吧" @click="show()">
  40.  
  41.          <!--以下三种方式都可以-->
  42.          <a href="http://www.baidu.com">我想去百度</a>
  43.          <a v-bind:href="url">我想去百度</a>
  44.          <a :href="url">我想去百度</a>
  45.      </div>
  46.      <script>
  47.          var vm = new Vue({
  48.              el:"#app",
  49.              data:{
  50.                  arr:[11,22,33,34],
  51.                  obj:{a:"张三",c:"李四",b:"王麻子",d:"王大拿"},
  52.                  str:"我来了",
  53.                  url:"http://www.baidu.com"
  54.              },
  55.              methods:{
  56.                  show:function () {
  57.                      alert(123);
  58.                      alert(vm.str);
  59.  //                    alert(this.str)  //如果没有vm,就直接用this
  60.                  }
  61.              }
  62.          })
  63.      </script>
  64.  </body>
  65.  </html>

6、v-bind：绑定元素的属性并执行相应的操作

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width">
  7.      <title>Title</title>
  8.      <script src="vue.js"></script>
  9.      <style>
  10.          .bk_1{
  11.              width: 200px;
  12.              height: 200px;
  13.              background-color: silver;
  14.          }
  15.          .bk2_2{
  16.               width: 200px;
  17.              height: 200px;
  18.              background-color: darkorange;
  19.          }
  20.         .bk_3{
  21.  
  22.              border: 5px solid #000;
  23.          }
  24.      </style>
  25.  </head>
  26.  <body>
  27.      <div id="app">
  28.          <a href="http://www.baidu.com" v-bind:title="msg">腾讯</a>   <!--绑定标题-->
  29.          <a href="http://www.baidu.com" title="啦啦啦">点我</a>   <!--绑定标题-->
  30.          <div v-bind:class="bk"></div>
  31.          <div v-bind:class="bk2"></div>
  32.  
  33.          <div :class="{bk_1:temp,bk_3:temp}">加油,吧</div>  <!-- #temp一定是一个布尔值，为true是就使用bk_2,为false就不为他-->
  34.          <div :class="[bk2,bk3]"></div> <!--如果是多个类就用[bk1,bk2,],就显示两个类的样式-->
  35.      </div>
  36.      <script>
  37.          var vm = new Vue({
  38.              el:"#app",//表示在当前这个元素开始使用VUe
  39.              data:{
  40.                  msg:"我想去腾讯上班",
  41.                  bk:"bk_1",
  42.                  bk2:"bk2_2",
  43.                  bk3:"bk_3",
  44.  //                temp: false,
  45.                  temp: true
  46.              }
  47.          })
  48.      </script>
  49.  </body>
  50.  </html>

7、v-model：把input的值和变量绑定了，实现了数据和视图的双向绑定

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width">
  7.      <title>Title</title>
  8.      <script src="vue.js"></script>
  9.  </head>
  10.  <body>
  11.  <div id="app">
  12.      <input v-model="msg">
  13.      <input v-model="msg" value="this is test">
  14.      <p>{{msg}}</p>
  15.      <input type="button" value="变化" @click="change">
  16.  </div>
  17.  <script>
  18.      new Vue({
  19.          el:"#app",  //表示当前这个元素开始使用vue
  20.          data:{
  21.  //            msg:"",
  22.              msg:"aaaaa"
  23.          },
  24.          methods:{
  25.              change:function () {
  26.                  this.msg=512
  27.              }
  28.          }
  29.      });
  30.  
  31.  </script>
  32.  
  33.  </body>
  34.  </html>

示例1

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width">
  7.      <title>Title</title>
  8.      <script src="vue.js"></script>
  9.      <style>
  10.          .cccc{
  11.              display: none;
  12.          }
  13.      </style>
  14.  </head>
  15.  <body>
  16.      <div id="app">
  17.       <div>
  18.           <input type="text" placeholder="姓名" v-model="username">
  19.           <input type="text" placeholder="年龄" v-model="age">
  20.           <input type="text"  v-model="msg" class="cccc">
  21.           <input type="submit" value="添加" @click="add">
  22.       </div>
  23.        <div>
  24.            <table cellpadding="0" border="1">
  25.                <tr v-for="(item,index) in arr">
  26.                    <td><input type="text" v-model="item.username"></td>
  27.                    <td><input type="text" v-model="item.age"></td>
  28.                    <td><input type="button" value="删除" @click="del(index)"></td>
  29.                    <td><input type="button"  @click="edit(index)" v-model="item.msg"></td>
  30.                </tr>
  31.            </table>
  32.        </div>
  33.      </div>
  34.      <script>
  35.           new Vue({
  36.              el:"#app",  //表示当前这个元素开始使用vue
  37.              data:{
  38.                 username:"",
  39.                  age:"",  //变量的初始化
  40.                  arr:[],
  41.                  msg:"编辑"
  42.              },
  43.              methods:{
  44.                  add:function () {
  45.                      this.arr.push(
  46.                          {
  47.                              "username":this.username,
  48.                              "age":this.age,
  49.                              "msg":this.msg
  50.                          }
  51.                      );
  52.                      console.log(this.arr)  //打印的是一个数组
  53.                  },
  54.                  del:function (index) {
  55.                      this.arr.splice(index,1);   //删除索引对应的哪一个值
  56.                  },
  57.                  edit:function (index) {
  58.                      console.log(index);
  59.                      if (this.arr[index].msg=="保存"){
  60.  //                        alert(this.arr[index].msg);
  61.                          this.arr[index].msg="编辑";
  62.                      }else{
  63.                          this.arr[index].msg="保存";
  64.                      }
  65.  
  66.                  }
  67.              }
  68.  
  69.          })
  70.  </script>
  71.  
  72.  </body>
  73.  </html>

示例2

8、对数组的操作

  1.     - push  #从末尾添加
  2.     - pop  #从末尾删除
  3.     - shift #从头添加
  4.     - unshift #从头删除
  5.     - splice #删除元素。splice(index,1)  #删除这个索引的那一个
  6.     - reverse  #反转

五、自定义指令

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width">
  7.      <title>Title</title>
  8.      <script src="vue.js"></script>
  9.  
  10.  </head>
  11.  <body>
  12.  <div id="app">
  13.      <input type="text" v-focus>
  14.  </div>
  15.  <script>
  16.         new Vue({
  17.              el:"#app",
  18.              data:{
  19.  
  20.              },
  21.             directives:{ //directives定义指令的
  22.                  focus:{   //focus指令的名字
  23.                      inserted:function (els) {    //els绑定的这个元素
  24.                          //inserted当绑定的这个元素  <input type="text" v-focus>显示的时候，
  25.                          els.focus();  //获取焦点的一个方法，和以前的时候是一样的
  26.                          els.style.backgroundColor="blue";
  27.                          els.style.color='#fff'
  28.                      }
  29.                  }
  30.             }
  31.          })
  32.      </script>
  33.  </body>
  34.  </html>

六、实现tag切换的小示例

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width">
  7.      <title>Title</title>
  8.      <script src="vue.js"></script>
  9.      <style>
  10.          ul li{
  11.              list-style: none;
  12.              display: inline-block;
  13.              border: 1px solid cornflowerblue;
  14.              height: 50px;
  15.              width: 200px;
  16.              background: cornflowerblue;
  17.              text-align: center;
  18.              line-height: 50px;
  19.  
  20.          }
  21.      </style>
  22.  </head>
  23.  
  24.  <body>
  25.  <div id="mybox">
  26.      <ul>
  27.          <li><span v-on:click="qh(true)">二维码登录</span></li>
  28.          <li><span v-on:click="qh(false)">邮箱登录</span></li>
  29.      </ul>
  30.      <div v-if="temp">
  31.          <img src="erweima.png" alt="">
  32.      </div>
  33.      <div v-if="!temp">  <!--取反-->
  34.          <form action="http://mail.163.com" method="post">
  35.              <!--method是为了安全   ，action：提交的地址-->
  36.              <p>邮箱：<input type="email"></p>
  37.              <p>密码：<input type="password"></p>
  38.              <p><input type="submit" value="登录"></p>
  39.          </form>
  40.      </div>
  41.  </div>
  42.  <script>
  43.      new Vue({
  44.          el:"#mybox",  //表示当前这个元素开始使用vue
  45.          data:{
  46.              temp:true
  47.          },
  48.          methods:{
  49.              qh:function (t) {
  50.                  this.temp=t
  51.              }
  52.          }
  53.      })
  54.  </script>
  55.  </body>
  56.  </html>

vue之指令的更多相关文章

  1. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  2. vue 自定义指令的使用案例

    参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...

  3. vue的指令

    我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new  Vue({          el: "#box", // element(元素) 当前作 ...

  4. vue自定义指令用法总结及案例

    1.vue中的指令有哪些?

  5. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  6. Vue自定义指令报错：Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  7. vue之指令篇 ps简单的对比angular

    这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统 难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...

  8. 第3章-Vue.js 指令扩展 和 todoList练习

    一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...

  9. 第2章-Vue.js指令

    一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...

随机推荐

  1. 实现两线程的同步一（wait/notify）

    1.使用Object的wait和notify public class WaitAndNotifyDemo { public static void main(String[] args) throw ...

  2. HashMap的源码，实现原理，底层结构

    转载一遍不错的文章,让你深入了解HashMap http://www.cnblogs.com/ITtangtang/p/3948406.html

  3. Linux调试

    参考文章: http://mp.weixin.qq.com/s/Kz4tii8O4Nk-S4SV4kFYPA 各类调试工具: 参考链接:  http://www.brendangregg.com/li ...

  4. 使用cross-env解决跨平台设置NODE_ENV的问题

    使用方法: 安装cross-env:npm install cross-env --save-dev 在NODE_ENV=xxxxxxx前面添加cross-env就可以了.

  5. DedeCMS找后台目录漏洞

    参考文章 https://xianzhi.aliyun.com/forum/topic/2064 近期,学习的先知社区<解决DEDECMS历史难题--找后台目录>的内容,记录一下. 利用限 ...

  6. python问题：TypeError: a bytes-like object is required, not 'str'

    源程序: import socket target_host = "www.baidu.com" # 127.0.0.1 target_port = 80 # 建立一个socket ...

  7. Android程序破解思路

    Android程序的一般分析与破解流程 1.如何寻找突破口是分析一个程序的关键.错误提示信息左右一般是程序验证逻辑的核心代码. 2.错误提示是android程序的字符串资源,字符串有可能硬编码到源码中 ...

  8. python,关于这个里边的私有方法（private）、保护方法(protected)、公开方法(public)

    __foo__: 定义的是特殊方法,一般是系统定义名字 ,类似 __init__() 之类的. _foo: 以单下划线开头的表示的是 protected 类型的变量,即保护类型只能允许其本身与子类进行 ...

  9. linux shell中 if else for循环以及大于、小于、等于逻辑表达式的历程

    作者:邓聪聪 比如比较字符串.判断文件是否存在及是否可读等,通常用"[]"来表示条件测试. 注意:这里的空格很重要.要确保方括号的空格.笔者就曾因为空格缺少或位置不对,而浪费好多宝 ...

  10. linux中模糊查找文件

    1.在当前目录下搜索指定文件: find . -name test.txt 2.在当前目录下模糊搜索文件: find . -name '*.txt' 3.在当前目录下搜索特定属性的文件: find . ...