Vue基本指令

2018-06-24 01:25:57来源：未知阅读 ()

模板对象

vue指令

一：模板对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <title>Title</title>
</head>
<body>
 <div id="app">
     {{4+5}}
     {{2>3}}
    <p v-text="msg">{{msg}}</p>
     <h1 v-text="str">{{str}}</h1>
     {{msg}}

     <h3 v-html="aa">
         {{aa}}

     </h3>


 </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'你是sb吗',
            str:'哈哈 你个傻吊',
            aa:'<i>are you ok?</i>'

        }
    })
</script>
</html>

二、Vue指令

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

1.v-text和v-html

v-text:在元素当中插入值,只能是文本

v-html:在元素不中不仅可以插入文本，还可以插入标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
</head>
<body>
      <div id="app">
        <p>{{msg}}</p>
        <p>{{80+2}}</p>
        <p>{{20>30}}</p>
        {{msg}}
          我是：<h1 v-text="msg">{{str}}</h1>
          你是：<h1 v-text="msg">2222222222222</h1>

          <h2 v-html="hd"></h2>
          <h2 v-html="str"></h2>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                msg: "我是老大",
                hd: "<input type='button' value='你是shei?'>",
                str: "我要发财!"
            }
        })
    </script>
</body>
</html>

View Code

2.v-if和v-show

v-if: 根据表达式的真假值来动态插入和移除元素,如果条件成立插入一个元素，如果没有就删除，注意：删除时代码里面就没有了，查看控制台发现该元素的的代码被注释了

v-show:根据表达式的真假值来隐藏和显示元素，条件不成立的时候知识用css的display:none,将该元素的代码隐藏了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-if="pick">
        <h1>你是对的</h1>
    </div>
    <div v-else>
        <h1>我是对的</h1>
    </div>


    <p v-show="bd">i am ctz</p>

    <p v-show="ok">好好学习天天写代码</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            pick: false,
            bd: false,
            ok: true
        }
    });

    window.setInterval(function () {
        vm.ok = !vm.ok
    }, 1000)
</script>
</html>

View Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-show="yes">Yes!</h1>
            <h1 v-show="no">No!</h1>
            <h1 v-show="age >= 25">Age: {{ age }}</h1>
            <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

View Code

3.v-for

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <title>Title</title>
</head>
<body>
 <div id="app">
     <!--item我们要取的值index为该值早数组中的索引-->
     <h3 v-for="(item,index) in arry">
         {{index}}--->{{item}}
     </h3>

     <h4 v-for="(v,key,index) in dic">
       {{index}}---{{key}}-----{{v}}
     </h4>


     <h4 v-for="(item,index) in obj1">
         {{index}}----{{item.name}}---{{item.hobby}}
     </h4>
     
     <button v-on:click="f">点我删除</button>
 </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            arry:[111,222,333,444,555],
            dic:{name:'陈太章',age:21,addr:'云南昆明'},
            obj1:[
                {name:'赵俊明',hobby:'搞基'},
                {name:'肖博雅',hobby:'被搞'},
                {name:'八级哥',hobby:'互搞'}
            ]
        },
        methods:{
            f:function () {
                vm.arry.pop()
            }
        }
    })
</script>
</html>

4.v-on

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app" >
<p><input type="checkbox" name="fruit" value="a">苹果</p>
<p><input type="checkbox" name="fruit" value="b">香蕉</p>
<p><input type="checkbox" name="fruit" value="c">梨</p>
<p><input type="checkbox" name="fruit" value="a" v-on:click="cc">其他</p>
<div v-html="aa" v-show="isshow"></div>
</div>

</body>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
           aa:'<textarea placeholder="请输入你喜欢吃的水果"></textarea>',
           isshow:false

        },
        methods:{
            cc:function () {
                 this.isshow=!this.isshow
            }
        }
    })
</script>
</html>

动态生成标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <title>Title</title>
    <style>
        ul li{
            list-style: none;
            display: inline-block;
            border:1px solid blueviolet;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
  <ul>
      <li v-on:click="ewmlogin">二维码登录</li>
      <li v-on:click="acountlogin">账号密码登录</li>
  </ul>

  <div v-if="ewm">
      <img src="erma.jpg" alt="请用手机扫码登录">
  </div>

  <div v-if="account">
      <form action="">
          <p>账号:<input type="text"></p>
          <p>密码:<input type="text"></p>
          <p>密码:<input type="submit" value="登录"></p>
      </form>
  </div>
</div>
</body>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            ewm:true,
            account:false
        },
        methods:{
           ewmlogin:function () {
               vm.ewm=true;
               vm.account=false
           } ,
          acountlogin:function () {
              vm.account=true;
              vm.ewm=false
          }
        }
    })
</script>
</html>

tab切换方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <title>Title</title>
    <style>
        ul li {
            list-style: none;
            display: inline-block;
            border: 1px solid blueviolet;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <!--<li v-on:click="login(true)">二维码登录</li>-->
        <!--<li v-on:click="login(false)">账号密码登录</li>-->
        <li @click="login(true)">二维码登录</li>
        <li @click="login(false)">账号密码登录</li>
    </ul>

    <div v-if="log">
        <img src="erma.jpg" alt="请用手机扫码登录">
    </div>

    <div v-if="!log">
        <form action="">
            <p>账号:<input type="text"></p>
            <p>密码:<input type="text"></p>
            <p>密码:<input type="submit" value="登录"></p>
        </form>
    </div>
</div>
</body>
<script>
    var vm=new Vue(
        {
            el:'#app',
            data:{
              log:true
            },
            methods:{
                login:function (el) {
                    vm.log=el
                }
            }
        }
    )
</script>
</html>

tab切换方式er

`v-on` 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

5.v-bind

v-bind:绑定元素的属性来执行相应的操作

v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class v-bind:argument="expression"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <title>Title</title>
    <style>
        .bk_1{
            background-color: cornflowerblue;
            width: 200px;
            height: 200px;
        }
        .bk_2{
            background-color: red;
            width: 200px;
             height: 200px;
        }
        .bk_3{

            border: 5px solid #000;
        }
    </style>
</head>
<body>
<div id="app">
    <h5><a href="http://www.baidu.com" v-bind:title="msg">百度一下</a></h5>

    <div :class="bk1"></div>
    <div :class="bk2"></div>

    <div :class="{bk_2:tmp,bk_3:tmp}"></div>

    <div :class="[bk2,bk3]"></div>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:"问问百度",
            bk1:'bk_1',
            bk2:'bk_2',
            bk3:'bk_3',
            tmp:false

        }
    })
</script>

</html>

View Code

`v-bind` 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

6 v-model

v-model:实现了数据和视图的双向绑定

 分成了3步：
 1）把元素的值和数据相绑定
 2）当输入内容时，数据同步发生变化，视图  ---数据的驱动
 3）当改变数据时，输入内容也会发生变化，数据-》视图的驱动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg"> <br>
    <h1>{{msg}}</h1>
    <button @click="f">点击切换</button>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:''
        },
        methods:{
            f:function () {
              vm.msg='一个能打的都没有'
            }
        }
    })
</script>
</html>

View Code

自定义指令

需求:

当进入一个页面时，输入框获取焦点，且背景颜色是绿色，字体颜色是篮色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-focus>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{},
        directives:{
            focus:{ //指令的名字
                //当绑定的元素显示时
                inserted:function (tt) {
                    tt.focus();
                    tt.style.backgroundColor='green';
                    tt.style.color='blue'
                }
            }
        }
    })
</script>
</html>

View Code

计算属性computer

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                temp: 1001
            },
           computed: {
               msg: function () {

                   if(this.temp > 1000){
                       return parseInt(this.temp/10)-1
                   } else {
                       return this.temp-1
                   }
               }
           }
        })
    </script>
</body>
</html>