vue指令

一、什么是VUE

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

二、怎么使用VUE

1.引入vue.js

<head>
	<script src='vue.js'></script>
</head>

2.展示HTML

<div id="app">
    <p>{{msg}}</p>
    <p>{{ 80+2 }}</p>
    <p>{{ 20>30 }}</p>
    <h1 v-text="msg"></h1>
    <h1 v-html="hd"></h1>
    <h1 v-html="str"></h1>
</div>

3.建立一个vue对象

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

三、数据绑定

1.插入文本{{}}，可以放表达式

2.插入html: v-html

四、vue指令

1.v-text: 在元素当中插入值

2.v-html：不仅可以插入文本，还可以插入代码

3.v-if和v-else: 根据表达式的真假值动态插值

4.v-show: 根据表达式的真假值来显示和隐藏

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

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

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

8.v-model: 把input的值和变量绑定了

9.对数组的操作

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

五、自定义指令

<!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>

六、实现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>
posted @ 2020-04-05 22:48  CarryAuroral  阅读(173)  评论(0)  编辑  收藏  举报