VUE 框架

时间  2019-12-08
标签 vue 框架 繁體版
原文   原文链接

1、什么是vuehtml

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

2、怎么使用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:"" } })

3、在元素当中插入值app

{{}}，能够方表达式框架

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

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、把元素的值和数据想绑定 二、当输入内容时，数据同步发生变化，视图 ----数据的驱动 三、当改变数据时，输入的内容会发生变化，数据-----视图的驱动 自定义指令： 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>
自定义指令
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程