Vue指令

Vue的指令

指令(Directives) 是带有v- 前缀的特殊属性,指令属性是单一的js表达式.

指令的职责就是表达式的值发生变化时,在DOM中做出相应的回应.

1、v-text和v-html

v-text:插入一段文本

//插入一段文本
<div id="app">
    <p v-text="message"></p>
</div>
<script>
    var vm = new Vue({
        el:'#app',    //表示在当前这个元素内开始使用VUE
        data:{
            message:'hello world !'
        }
    })
</script>

View Code

v-html:既可以插入一段文本也可以插入html标签

//既可以插入一段文本也可以插入html标签

<div id="app">
    <p v-html="message"></p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:"<input type='button'>"
        }
    })
</script>

View Code

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

v-bind 指令可以更新 HTML 属性：

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

缩写==>可以用：代替v-bind

<!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">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .bk_1{
            width: 200px;
            height: 200px;
            background-color: silver;
        }
        .bk2_2{
             width: 200px;
            height: 200px;
            background-color: darkorange;
        }
       .bk_3{

            border: 5px solid #000;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="http://www.baidu.com" v-bind:title="msg">腾讯</a>   <!--绑定标题-->
        <a href="http://www.baidu.com" title="啦啦啦">点我</a>   <!--绑定标题-->
        <div v-bind:class="bk"></div>
        <div v-bind:class="bk2"></div>

        <div :class="{bk_1:temp,bk_3:temp}">加油,吧</div>  <!-- #temp一定是一个布尔值，为true是就使用那个类，false则不使用那个类-->
        <div :class="[bk2,bk3]"></div> <!--如果是多个类就用[bk1,bk2,],就显示两个类的样式-->
    </div>
    <script>
        var vm = new Vue({
            el:"#app",//表示在当前这个元素开始使用VUe
            data:{
                msg:"我想去腾讯上班",
                bk:"bk_1",
                bk2:"bk2_2",
                bk3:"bk_3",
//                temp: false,
                temp: true
            }
        })
    </script>
</body>
</html>

View Code

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

数组的v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<!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">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <ul id="example-1">
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </ul>
</div>


</body>

<script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        }
    })
</script>
</html>

View Code

结果：

在 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">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<ul id="example-2">
    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
</ul>


</body>

<script>
    var example2 = new Vue({
        el: '#example-2',
        data: {
            parentMessage: 'Parent',
            items: [
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        }
    })
</script>
</html>

View Code

结果：

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

对象的 `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">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<ul id="v-for-object" class="demo">
    <li v-for="value in object">
        {{ value }}
    </li>
</ul>


</body>

<script>
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30
            }
        }
    })
</script>
</html>

View Code

结果：

你也可以提供第二个的参数为键名：

<ul id="v-for-object" class="demo">
    <div v-for="(value, key) in object">
        {{ key }}: {{ value }}
    </div>
</ul>

结果：

第三个参数为索引：

<ul id="v-for-object" class="demo">
    <div v-for="(value, key, index) in object">
        {{ index }}. {{ key }}: {{ value }}
    </div>
</ul>

结果：

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

事件:click\keydown

可以用@代替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">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="example-2">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">Greet</button>
</div>


</body>

<script>
    var example2 = new Vue({
        el: '#example-2',
        data: {
            name: 'Vue.js'
        },
// 在 `methods` 对象中定义方法
        methods: {
            greet: function (event) {
// `this` 在方法里指当前 Vue 实例
                alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })

    // 也可以用 JavaScript 直接调用方法
    example2.greet() // => 'Hello Vue.js!'
</script>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li {
            list-style: none;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li>
            <input type="checkbox">苹果
        </li>
        <li>
            <input type="checkbox">香蕉
        </li>
        <li>
            <input type="checkbox">香梨
        </li>
        <li>
            <input type="checkbox" v-on:click="create()">其它
        </li>
        <li v-html="htmlstr" v-show="test">

        </li>

    </ul>

</div>
<script>
    var vm = new Vue({
        el: "#app", //表示在当前这个元素内开始使用VUE
        data: {
            htmlstr: "<textarea></textarea>",
            test: false
        },
        methods: {
            create: function () {
                this.test = !this.test;
            }
        }
    })

</script>

</body>
</html>

动态生成html

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

条件判断(v-if\v-else)

v-if 指令将根据表达式的真假值(true 或 false )来决定是否插入元素。

<!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">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <ul v-if="ok">
        <li>
            哈哈哈
        </li>
    </ul>

    <ul v-else>
        <li>
            呵呵呵
        </li>
    </ul>

</div>

</body>
<script>

    var s=new Vue({
        el: '#app',
        data: {
            ok: true
        }
    })

</script>

View Code

改变布尔值后，

实现tag切换

<!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">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
            display: inline-block;
            border: 1px solid cornflowerblue;
            height: 50px;
            width: 200px;
            background: cornflowerblue;
            text-align: center;
            line-height: 50px;

        }
    </style>
</head>

<body>
<div id="mybox">
    <ul>
        <li><span v-on:click="qh(true)">二维码登录</span></li>
        <li><span v-on:click="qh(false)">邮箱登录</span></li>
    </ul>
    <div v-if="temp">
        <img src="erweima.png" alt="">
    </div>
    <div v-if="!temp">  <!--取反-->
        <form action="http://mail.163.com" method="post">
            <!--method是为了安全   ，action：提交的地址-->
            <p>邮箱：<input type="email"></p>
            <p>密码：<input type="password"></p>
            <p><input type="submit" value="登录"></p>
        </form>
    </div>
</div>
<script>
    new Vue({
        el:"#mybox",  //表示当前这个元素开始使用vue
        data:{
            temp:true
        },
        methods:{
            qh:function (t) {
                this.temp=t
            }
        }
    })
</script>
</body>
</html>

View Code

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

根据表达式的真假值来渲染元素

用法和v-if大致一样：

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

根据时间切换2段文本内容

<!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">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
   <ul>
          <li v-show="ok">
         一闪一闪
      </li>
      <li v-show="!ok">亮晶晶</li>
   </ul>

</div>
</body>

<script>
   var vm = new Vue({
     el: '#app',
     data: {
      ok: true
     }
   })

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

View Code

7、实现了数据和视图的双向绑定

可以用 v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。

因为它会选择 Vue 实例数据来作为具体的值。

你应该通过 JavaScript 在组件的data 选项中声明初始值。

输入框

<!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">
    <title>Title</title>
    <script src="vue.js"></script>

</head>

<body>
<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>

<p>textarea 元素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob',
message2: '菜鸟教程\r\nhttp://www.runoob.com'
}
})
</script>
</body>
</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">
    <title>Title</title>
    <script src="vue.js"></script>

</head>

<body>
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>

<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
</body>
</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">
    <title>Title</title>
    <script src="vue.js"></script>

</head>

<body>
<div id="app">
<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>选中值为: {{ picked }}</span>
</div>

<script>
new Vue({
el: '#app',
data: {
picked : 'Runoob'
}
})
</script>
</body>
</html>

View Code

选中后，效果如下图所示：

select 列表

以下实例中演示了下拉列表的双向数据绑定：

<!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">
    <title>Title</title>
    <script src="vue.js"></script>

</head>

<body>
<div id="app">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>

<div id="output">
选择的网站是: {{selected}}
</div>
</div>

<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
</body>
</html>

View Code

选取 Runoob，输出效果如下所示：

8、自定义指令

<!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">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-focus>
</div>
<script>
       new Vue({
            el:"#app",
            data:{

            },
           directives:{ //directives定义指令的
                focus:{   //focus指令的名字
                    inserted:function (els) {    //els绑定的这个元素
                        //inserted当绑定的这个元素  <input type="text" v-focus>显示的时候，
                        els.focus();  //获取焦点的一个方法，和以前的时候是一样的
                        els.style.backgroundColor="blue";
                        els.style.color='#fff'
                    }
                }
           }
        })
    </script>
</body>
</html>

View Code

小练习——维护用户信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
      <div id="app">
        <div>
            <input type="text" placeholder="姓名" v-model="username">
            <input type="text" placeholder="年龄" v-model="age">
            <input type="button" value="增加" @click="add">
        </div>
          <div>
                <table cellpadding="0" border="1">
                    <tr v-for="(item,index) in arr">
                        <td><input type="text" class="txt" v-model="item.username"> </td>
                        <td>{{item.age}}</td>
                        <td>{{index}}</td>
                        <td><input type="text" class="txt"></td>

                        <td><input type="button" value="删除" @click="del(index)"></td>
                    </tr>
                </table>
          </div>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                username: "",
                age: "",
                arr: []
            },
            methods: {
                add: function () {
                    this.arr.push({username:this.username,age: this.age});
                    console.log(this.arr);
                },
                del: function (index) {
                    this.arr.splice(index,1); //删除数组中指定索引位置的元素，第二个参数是指定删除项目的数量
                }
            }


        })


    </script>

</body>
</html>

View Code

数组操作

- push  #从末尾添加
    - pop  #从末尾删除
    - shift #从头添加
    - unshift #从头删除
    - splice #删除元素。splice(index,howmany,item1,.....,itemX)，从index位置开始删除howmany个元素，如果有item则用item替换被删除的元素

 - reverse #反转

posted @ 2018-01-30 17:56 听风。阅读(285) 评论(0) 收藏举报

刷新页面返回顶部

听风。

Vue指令

Vue的指令

1、v-text和v-html

v-text:插入一段文本

v-html:既可以插入一段文本也可以插入html标签

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

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

数组的v-for

对象的 v-for

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

事件:click\keydown

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

条件判断(v-if\v-else)

实现tag切换

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

根据时间切换2段文本内容

7、实现了数据和视图的双向绑定

输入框

复选框

单选按钮

select 列表

8、自定义指令

小练习——维护用户信息

数组操作

公告

对象的 `v-for`