Vue(知識講解)

時間  2019-12-11
標籤 vue 知識 講解 简体版
原文   原文鏈接 
1、什麼是VUE
 它是一個構建用戶界面的JAVASCRITP0框架

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、在元素當中插入值
 {{}}，裏面能夠放表達式
 指令：是帶有V-前綴的特殊屬性，經過屬性來操做元素

 v-text:在元素當中插入值

 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>{{msg}}</p>
        <p>{{80+2}}</p>
        <p>{{20>30}}</p>
        {{msg}}
          我是：<h1 v-text="msg">{{str}}</h1>
          你是：<h1 v-text="msg">2222222222222</h1>

          <h2 v-html="hd"></h2>
          <h2 v-html="str"></h2>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在當前這個元素內開始使用VUE
            data:{
                msg: "我是老大",
                hd: "<input type='button' value='你是小三'>",
                str: "我要發財!"
            }
        })
    </script>
</body>
</html>
View Code

 


 v-if: 根據表達式的真假值來動態插入和移除元素
<!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", //表示在當前這個元素內開始使用VUE
            data:{
                pick: false,
                temp: true,
                ok: true
            }
        })

         window.setInterval(function(){
             vm.ok = !vm.ok;
         },1000)

    </script>

</body>
</html>
View Code

 


 v-show:根據表達式的真假值來隱藏和顯示元素
<!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;
            border: 1px solid cornflowerblue;
            height:40px;
            line-height: 40px;
            width: 120px;
            text-align: center;
        }
    </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-show="temp">
            <img src="erma.jpg">
        </div>
        <div v-show="!temp">
            <form action="http://mail.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: "#mybox",
            data: {
                temp: true
            },
            methods: {
                qh: function (t) {
                    this.temp = t
                }
            }
        })
    </script>
</body>
</html>
View Code

 


 v-for:根據變量的值來循環渲染元素
<!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="(item,index3) in arr">
                {{item}}: {{index3}}
            </li>
        </ul>

          <ul>
            <li v-for="(item,key,index) in obj">
                {{item}}:{{key}}:{{index}}
            </li>
        </ul>
          <ul>
            <li v-for="item in obj2">
                {{item.username}}
                {{item.age}}
                {{item.sex}}
            </li>
        </ul>

          <!--<div v-for="i in 8">-->
              <!--{{i}}-->
          <!--</div>-->

          <input type="button" value="點我吧!" @click="show()">

          <a :href="url">我想去百度</a>

    </div>
    <script>
        new Vue({
            el: "#app", //表示在當前這個元素內開始使用VUE
            data:{
                arr: [11,22,3344,55],
                obj: {a:"張三",b:"李四",c:"王大拿",d:"謝大腳"},
                obj2:[
                    {username: "jason"},
                    {age: 20},
                    {sex: "male"}
                ],
                str: "我來了",
                url: "http://www.qq.com"
            },
            methods: {
                show: function () {
                    this.arr.pop();
                }
            }
        })



    </script>

</body>
</html>
View Code

 


 v-on:監聽元素事件，並執行相應的操做
<!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;
            border: 1px solid cornflowerblue;
            height:40px;
            line-height: 40px;
            width: 120px;
            text-align: center;
        }
    </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-show="temp">
            <img src="erma.jpg">
        </div>
        <div v-show="!temp">
            <form action="http://mail.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: "#mybox",
            data: {
                temp: true
            },
            methods: {
                qh: function (t) {
                    this.temp = t
                }
            }
        })
    </script>
</body>
</html>
View Code

 


 對數組的操做：
 push
 pop
 shift
 unshift
 splice
 reverse

 v-bind:綁定元素的屬性來執行相應的操做
 v-model:實現了數據和視圖的雙向綁定
 分紅了3步：
 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>
    <style>
        ul li{
            list-style: none;
        }
        .tipbox{
            width: 200px;
            height:200px;
            border: 1px solid cornflowerblue;
            position: absolute;
            background-color: #aaaaaa;
            top: 200px;
            left: 600px;

        }
    </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>{{item.username}}</td>
                        <td>{{item.age}}</td>
                        <td>{{index}}</td>
                        <td><input type="button" value="刪除" @click="del(index)"></td>
                        <td><input type="button" value="修改" @click="showBox(index)"></td>
                    </tr>
                </table>
          </div>
          <div class="tipbox" v-show="isShow">
              <p><input type="text" placeholder="姓名" v-model="m_username"></p>
            <p><input type="text" placeholder="年齡" v-model="m_age"></p>
            <p>
                <input type="button" value="肯定" @click="save()">
                <input type="button" value="取消" @click="cancel()">
            </p>
          </div>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在當前這個元素內開始使用VUE
            data:{
                username: "",
                age: "",
                arr: [],
                isShow:false,
                m_username: "",
                m_age: "",
                n: 0
            },
            methods: {
                add: function () {
                    this.arr.push({username:this.username,age: this.age});
                    console.log(this.arr);
                },
                del: function (index) {
                    this.arr.splice(index,1);
                },
                showBox: function (index) {
                    this.isShow = true;
                    this.n = index;
                    this.m_username = this.arr[index].username;
                    this.m_age = this.arr[index].age;
                },
                cancel: function () {
                    this.isShow = false
                },
                save: function () {
                    this.arr[this.n].username = this.m_username;
                    this.arr[this.n].age = this.m_age;
                    this.isShow = false
                }
            }


        })


    </script>

</body>
</html>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程