Vue基本使用

時間  2020-03-15
標籤 vue 基本 使用 简体版
原文   原文鏈接

Vue

Vue是遵循MVVW架構模式實現的前端框架javascript

npm導入路徑：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.jshtml

MVVW架構 Model數據 View模板 ViewModel處理數據前端

ES6的經常使用語法：

變量的定義，var，let，constvue

  1. Var 變量的提高，函數做用域 全局做用域，從新定義不會報錯，能夠從新賦值
  2. let 塊級做用域 { }，從新定意會報錯，能夠從新賦值
  3. const 定義不可修改的常量，不能夠從新賦值

箭頭函數的this取決於當前的上下文環境：相似於python的匿名函數java

this指當前函數最近的調用者，距離最近的調用者python

解構：
字典解構 {key,key,...} 注：要使用key才行
數組結構 [x,y,.....]es6

let obj = {
        a:1,
        b:2
    };
    let hobby = ["吹牛", "特斯拉", "三里屯"];
    let {a,b} = obj;
    let [hobby1,hobby2,hobby3] = hobby;
    console.log(a);
    console.log(b);
    console.log(hobby1);
    console.log(hobby2);
    console.log(hobby3);

Vue的核心思想是數據驅動視圖

Vue的經常使用指令

v-text：獲取文本內容npm

v-html：獲取html內容數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2 v-text="name"></h2>
    <h3 v-text="age"></h3>
    <div v-html="hobby"></div>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        name:"PDD",
        age:18,
        hobby:"<ul><li>學習</li><li>刷劇</li><li>Coding</li></ul>"
    }
});
</script>
</body>
</html>

v-for：循環獲取數組瀏覽器

v-for：循環獲取字典

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(course,index) in course_list" :key="index">{{index}}:{{course}}</li>
        <li v-for="(item,index) in one" :key="index">
            {{index}}:{{item.name}}:{{item.age}}:{{item.hobby}}
        </li>
    </ul>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        course_list:["classname","teacher","student"],
        one:[{name:"eric",age:"18",hobby:"music"},
            {name:"bob",age:"18",hobby:"dance"}]
    }
})
</script>
</body>
</html>

v-bind：自定製顯示樣式，動態綁定屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_app{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:class="{my_app:is_show}">
    </div>
    <img :src="my_src" alt=""> <!--  v-bind: 能夠簡寫爲 : -->
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        is_show:true, //true表示顯示style樣式，false不顯示style樣式
        my_src:"http://i0.hdslb.com/bfs/archive/590f87e08f863204820c96a7fe197653e2d8f6e1.jpg@1100w_484h_1c_100q.jpg"
    }
})
</script>
</body>
</html>

v-on@事件名：事件綁定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- v-on@click只會執行一次，是在第一次進入頁面的時候，@click會循環執行 -->

    <button @click="my_click('hello')" v-on="{mouseenter:my_enter,mouseleave:my_leave}">
        點擊彈窗
    </button>
<!--    <button @click="my_click('hello')" @mouseenter="my_enter",@mouseleave="my_leave">  繁瑣寫法-->
<!--        點擊彈窗     -->
<!--    </button>    -->
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{},
    methods:{
        my_click:function(x){
            alert("luke" + x)
        },
        my_enter:function(){
            console.log("鼠標移入事件")
        },
        my_leave:function(){
            console.log("鼠標移出事件")
        }
    }
})
</script>
</body>
</html>

v-if：條件判斷
v-if v-else-if v-else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="role == 'admin' ">管理員你好</div>
    <div v-else-if="role == 'hr' ">查看簡歷</div>
    <div v-else>沒有權限</div>

</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        role:"admin"
    },
    methods:{}
})
</script>
</body>
</html>

v-show：布爾值類型判斷

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-show="admin">管理員你好</div>
    <div v-show="hr">查看簡歷</div>
    <div v-show="others">沒有權限</div>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        admin:true,
        hr:false,
        others:false,
    },
    methods:{}
})
</script>
</body>
</html>

綜合案例

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-show="admin">管理員你好</div>
    <div v-show="hr">查看簡歷</div>
    <div v-show="others">沒有權限</div>
    <button @click="my_click">點擊顯示或隱藏</button>
    <div v-show="is_show">hello</div>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        admin:true,
        hr:false,
        others:false,
        is_show:false
    },
    methods:{
        my_click:function(){
            this.is_show=!this.is_show
        }
    }
})
</script>
</body>
</html>

v-model：獲取數據，標籤的屬性設置 ，獲取其屬性值，用戶信息等，例如input，select等

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="username">
    {{username}}
    <hr>
    <textarea type="text" cols="30" rows="10" v-model="article">
        {{article}}
    </textarea>
    <hr>
    <select name="" v-model="choices">
        <option value="1">阿薩德</option>
        <option value="2">主線程</option>
        <option value="3">權威</option>
    </select>
    {{choices}}
    <hr>
    <select name="" v-model="choices_multiple" multiple>
        <option value="1">阿薩德</option>
        <option value="2">主線程</option>
        <option value="3">權威</option>
    </select>
    {{choices_multiple}}
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        username:"1234",
        article:"123456",
        choices:"",
        choices_multiple:['1']
    },
    methods:{}
})
</script>
</body>
</html>

v-model.lazy：失去光標綁定數據事件
v-model.lazy.number：數據類型的轉換
v-model.lazy.trim：清除空格

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model.lazy="username">
        {{username}}
    <hr>
    <!--  前端默認只顯示一個空格，pre使數據原始化展現  -->
    <input type="text" v-model.lazy="username">
        <pre>{{username}}</pre>
    <hr>
    <!--    -->
    <input type="text" v-model.lazy.trim="username_trim">
        <pre>{{username_trim}}</pre>
    <hr>
    <input type="text" v-model.lazy.number="article">
    {{article}}
    {{typeof article}}
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        username:"1234",
        username_trim:"1234",
        article:"123456"
    },
    methods:{}
})
</script>
</body>
</html>

自定義指令

v-自定義的函數（指令）：自定製函數（指令）
Vue.directive（）

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="my_box" v-pin.right.top="pinned"></div>
</div>
<script>
    Vue.directive("pin",function(el,binding){
        console.log(el); //指令的標籤元素
        console.log(binding); //指令的全部信息
        let adr = binding.modifiers;
        if(binding.value){
            //定位到瀏覽器的右下角
            el.style.position = "fixed";
            // el.style.right='0';
            // el.style.bottom='0';
            //指令修飾符定位
            for (let posi in adr){
                el.style[posi]=0;
            }
        }else{
            el.style.position = "static";
        }
    });
    const app = new Vue({
        el:"#app",
        data:{
            pinned:true
        }
    })
</script>
</body>
</html>

方法集合

v-text v-html v-for v-if v-else-if v-else v-bind 綁定屬性 v-on 綁定事件 v-show display v-model 數據雙向綁定 input textarea select 指令修飾符 .lazy .number .trim 自定義指令 Vue.directive（'指令名'，function(el,參數binding){ }） el 綁定指令的標籤元素 binding 指令的全部信息組成的對象 value 指令綁定數據的值 modifiers 指令修飾符組成的對象

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