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教程