VUE 框架

一、什么是vue

            它是一个构建用户界面的JAVASCRITPO框架

二、怎么使用VUE

(1)、引入vue.js
    如：<script src='vue.js'><script>
(2)、展示html
    如：<div id="app">
             <input type="text v-model="msg">
              <p>{{msg}</p>   
          </div>
(3)、建立vue对象
         new Vue({
                el:"#app",   //表示在当前这个元素内开始使用VUE 
                data{
                       msg:""
              }   
             })

三、在元素当中插入值

{{}}，可以方表达式

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

v-text:在元素当中插入值
v-html:在元素当中不仅可以插入文本，还可以插入标签，
v-if:根据表达式的真假来动态插入和移出元素
v-show：根据表达式的真假来隐藏和显示元素

v-if 和v-show的区别：
     v-if改为false时，它就在dom中不存在，它被注释代替，而v-show改为false是，它在dom中存在，只是在v-showzhong 添加了隐藏属性

v-for：根据变量的值来循环渲染元素
v-on：监听元素事件，并执行想应的操作
对数组的操作：
push
pop
shift
unshift
splice
reverse

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

v-bind可以被：代替
v-on可以被@代替

v-model:实现了数据和视图的双向绑定
v-model份三步绑定：
        1、把元素的值和数据想绑定
        2、当输入内容时，数据同步发生变化，视图 ----数据的驱动
        3、当改变数据时，输入的内容会发生变化，数据-----视图的驱动
自定义指令：

 new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{

            },
            directives: {
                focus: {    //指令的名字
                    //当绑定的元素显示时
                    inserted: function (tt) {
                        tt.focus();
                    }
                }
            }

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <p>
        {{msg}}
    </p>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            msg:""
        }
    })
</script>

</body>
</html>
index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
            display: inline-block;
            width: 150px;
            height: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li>
            <span v-on:click="er(true)">二维码登录</span>
        </li>

        <li>
            <span v-on:click="er(false)">邮箱登录</span>
        </li>
    </ul>
    
    <div v-show="temp">
        <img src="erma.jpg" >
    </div>
    
    <div v-show="!temp">
        <form action="http://www.163.com" method="post">
            <p><input type="email"></p>
            <p><input type="password"></p>
            <p><input type="submit" value="登录"></p>
        </form>
    </div>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            temp:true
        },
        methods:{
            er:function(t){
                this.temp=t
            }
        }
    })
</script>

</body>
</html>
tap切换
<!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 v-for="(index,item) in arr">
            {{item}}:{{index}}
        </li>

        <hr>

        <li v-for="(item,key,index2) in obj">
           {{index2}} :{{key}}:{{item}}
        </li>

        <hr>

        <li v-for="item in obj2">
            {{item.username}}
            {{item.age}}
            {{item.sex}}
        </li>

    </ul>
</div>

<script>
new Vue({
    el:"#app",
    data:{
        arr:[11,22,33],
        obj:{'a':"王兴平",'b':"鲁刚","c":"小耗子"},
        obj2:[
            {'username':"刘伟"},
            {'age':"20"},
            {'sex':"female"}
            ]
    }
})
</script>

</body>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input v-text="msg">
          <p>{{msg}}</p>
    <p v-html="message"></p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
             msg:"ff",
             message:"<input type='submit'>"

        }
    })
</script>
</body>
</html>
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 v-if="pick">人生自古谁无死</p>
    <p v-else>留取丹心照汗青</p>
    <p v-show="temp">文天祥</p>
    <p v-show="ok">变化</p>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            pick:false,
            temp:true,
            ok:true
        }
    })
        window.setInterval(function(){
            vm.ok=!vm.ok
        },1000)
</script>

</body>
</html>
v-if_show
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input v-model="msg">
    <p>{{msg}}</p>
    <input type="submit" value="变化" v-on:click="change">
</div>
<script>
    new Vue({
        el:"#app",
        data:{
           msg:"ddd"
        },
        methods:{
            change:function () {
                this.msg=85555;
            }
        }
    })
</script>

</body>
</html>
v-model
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(index,item) in arr">
            {{item}}:{{index}}
        </li>
    </ul>
    <hr>
    <input type="submit" value="点我吧" v-on:click="show">
    <a v-bind:href="url">我要去百度</a>
</div>

<script>
  new Vue({
        el:"#app",
        data:{
            arr:[11,22,33,55],
            url:"http://www.qq.com",
        },
        methods: {
            show: function () {
                this.arr.pop();
            }
        }
     })
</script>


</body>
</html>
v-on_bind
<!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>
    new Vue({
        el:"#app",
        data:{
            htmlstr:"<textarea></textarea>",
            test:false
        },
        methods:{
            create:function(){
                this.test=!this.test;
            }
        }
    })
</script>
</body>
</html>
动态生成url
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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:{
            focus:{
                inserted:function (tt) {
                    tt.focus();
                    tt.style.backgroundColor='red';
                    tt.style.color='#fff'


                }
            }
        }
    })
</script>

</body>
</html>
自定义指令

 

posted @ 2018-01-25 17:01  孟庆健  阅读(397)  评论(0)  编辑  收藏  举报