1,Vue-ES6的經常使用語法-Vue經常使用指令

時間 2019-11-20

標籤 vue es6 經常使用語法指令欄目 JavaScript 简体版

原文原文鏈接

1,Vue-ES6的經常使用語法-Vue經常使用指令html

首頁,https://www.cnblogs.com/GGGG-XXXX/p/9503208.htmlvue

1,ES6框架:https://www.cnblogs.com/GGGG-XXXX/articles/9439825.htmlsql

2,Vue指令:https://www.cnblogs.com/GGGG-XXXX/articles/9428761.html數據庫

1 聲明變量const let var

ES6之前 var關鍵字來聲明變量，不管聲明在何處都存在變量提高這個事情~~會提早建立變量~npm

做用域也只有全局做用域以及函數做用域~ 因此變量會提高在函數頂部或全局做用域頂部~django

let 關鍵字表示變量，const 表示常量。都是塊級做用域，好比一個函數內部，代碼塊{}內部~app

2,模版字符串,框架

模版字符串,大小寫切換鍵上面的``,ide

<body>
<div id="app">

</div>
<script>
    let ele=document.getElementById('app'); //先獲取app這個做用域,
    let name='xiaoming';   //聲明一個變量,
    ele.innerHTML=`
                <div>
                <ul>
                    <li>小明</li>
                    <li>小花</li>
                    <li>小強</li>
                    <li>${name}</li>  //使用${變量名} 替換內容,
                </ul>
            </div>
                `
</script>
</body>

3,函數:函數

箭頭函數，是函數的快捷寫法，類比Python的匿名函數 lambda。

最直觀的三個特色

　　-- 不須要function關鍵字來建立函數

　　-- 省略return關鍵字

　　-- 繼承當前上下文的this關鍵字（由於箭頭函數的調用者是當前上下文，跟普通函數區別開） *************** this 跟最近的調用他的對象有關*********

箭頭函數博客

https://www.cnblogs.com/fundebug/p/6904753.html

// 函數在哪裏調用了 才決定this到底引用的是誰~~~
// 最後一個調用函數的對象纔是傳到函數裏的上下文對象this~~~

console.log(this)

function test() {
    console.log(this)
};

let obj = {
    a: 1,
    test: test,
};

let obj2 = {
    b: 3,
    obj: obj,
};

obj.test();
test();
obj2.obj.test();

View Code

var Num=num=>num*3;
console.log(Num(3));

4,數據的解構相似於pytohn裏面的**

<script>
   let obj={
       name:'xuge',
       age:77,
   }
    let array=['想,小魚','過去','各學科']
    let {name,age}=obj;
   console.log(name)
   console.log(age)

    let [name1,name2,name3]=array
    console.log(name1)
    console.log(name2)
    console.log(name3)
</script>

類
-- class定義類
-- extends 繼承
-- constructor 構造方法
-- 子類想要有this 在構造方法裏執行super()

ES6 引入了關鍵字class來定義一個類，constructor是構造方法，this表明實例對象。

類之間經過extends繼承，繼承父類的全部屬性和方法。

super關鍵字，它代指父類的this對象，子類必須在constructor中調用super()方法，

不然新建實例時會報錯，由於子類沒有本身的this對象。調用super()獲得this，才能進行修改。

<script>
    class Animal{
        constructor(){
            this.type = "animal"
        }
        says(say){
            console.log(say)
        }
    }
    class Dog extends Animal {
        constructor(){
            super();
            this.type = "dog";
        }
        says(say){
            console.log(say)
        }
    }
    let dog = new Dog();
    dog.says("wangwang~~~~~")


</script>

View Code

Vue指令,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
//div是做用域
<div id="app">  
    {{name}}
    {{hobby}}
</div>
<script>
    const app = new Vue({
        el: "#app", //獲取到這個做用域,
        data: {
            name: "小黑",  //數據寫在data裏面,
            hobby: "學習"
        }
    })
</script>
</body>
</html>

Vue的指令

Vue的指令directives很像咱們所說的自定義屬性，指令是Vue模板中最經常使用的功能，

它帶有v-前綴，功能是當表達式改變的時候，相應的行爲做用在DOM上。

v-on 點擊,寫爲:@click

v-bind 綁定,寫爲冒號 :

data:存放方法的地方,

method:存放方法的地方,

v-text,v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-text="name"></p>
    <p v-html="hobby"></p>

</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            name:'小明',
            hobby:`
            <ul>
                <li>學習</li>
                <li>燙頭</li>
            </ul>
            `
        }
    })
</script>
</body>
</html>

v-text,v-html

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{name}}</h1>
    <p>他喜歡吃的食物</p>
    <ul>
        <li v-for="(food,index) in foods" :key="index">{{food}}{{index}}</li>
    </ul>
    <ul>
        <li v-for="item in array">{{item.name}}年齡是{{item.age}} 愛好是{{item.hobby}}</li>
    </ul>
</div>
<script>
   const app=new Vue({
       el:'#app',
       data:{
           name:'小新新',
           foods:['豆汁','滷煮','驢打滾'],
           array:[{
               name:'旭哥',
               age:77,
               hobby:'睡覺',
           }]
       }
   })
</script>
</body>
</html>

v-for

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="role=='vip'">
        <h2>xxx提供服務</h2>
    </div>
    <div v-else-if="role=='svip'">
        <h2>yyy提供服務</h2>
    </div>
    <div v-else>
        <h2>沒有權限</h2>
    </div>
</div>
<script>
   const app=new Vue({
       el:'#app',
       data:{
           role:'svip'
       }
   })
</script>
</body>
</html>

v-if-else

v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
   <div v-show="is_show">
       <p>dlh</p>
   </div>
</div>
<script>
   const app=new Vue({
       el:'#app',
       data:{
           is_show:true, //true也能夠是換成數字,
       }
   })
</script>
</body>
</html>

View Code

v-on:

全寫v-on:click,或者簡寫做@click

bind的簡寫,:

進行取值,設置值,app.is_green=false

這個示例代碼,能夠直接點擊改變顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .alex_color{
            width: 100px;
            height: 100px;
            border: solid 1px red;
        }
        .bg{
            background-color: green;
        }
    </style>
</head>
<body>
<div id="app">
   <p class="alex_color" :class="{bg:is_green}">alex</p>
    <!--<p>alex</p>-->
    <!--<button @click="my_click">點擊戴綠</button>-->
    <button @click="my_click(567)">點擊變色</button>
</div>
<script>
   const app=new Vue({
       el:'#app',
       data:{
           is_green:false
       },
       methods:{
           my_click:function (data) {
               // alert(data)//先驗證一下是否綁定了,
               // this.is_green=true;
               this.is_green=!this.is_green;  //!是直接取反,
           }
       }
   })
</script>
</body>
</html>

點擊來回切換顏色

鼠標移入移出的效果,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>練習代碼</title>
    <script src="./vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <div v-on="{mouseenter:OnMouseEnner,mouseleave:OnMouseLeave}">鼠標移入移出效果</div>
</div>
<script>
   const app=new Vue({
       el:'#app',
       methods:{
           OnMouseEnner:function () {
               console.log('XXXX')
           },
           OnMouseLeave:function(){
               console.log('YYYY')
           },
       }
   })
</script>
</body>
</html>

鼠標移入移出效果,

v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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="input">
    <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea>

    <select name="" v-model="girl">
        <option value="1">wangwei </option>
        <option value="2">liangshuang</option>
        <option value="3">jihuifang</option>
        <option value="4">liangying</option>
    </select>
    {{input}}
    {{article}}
    {{girl}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            input: "測試input",
            article: "還有article",
            girl: null,
        }
    })
</script>
</body>
</html>

v-model

後面加.lazy就是,輸入框不聚焦的時候,才顯示輸入的內容,懶惰一下,.trim是去空格,.number是把值變爲數字,由於默認的是字符串類型

指令修飾符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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.trim="input">
    <!--<input type="text" v-model.lazy.number="input">-->
    <pre>{{input}}</pre>
    <!--{{typeof input}}-->
    {{input}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            input: "",
            article: "",
            girl: [1,2],
        }
    })
</script>
</body>
</html>

指令修飾符

自定義指令修飾符,

須要在控制檯, 修改值,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>練習代碼</title>
    <script src="../vue.js"></script>
    <style>
        .card{
            width: 100px;
            height: 100px;
            border:solid 1px greenyellow;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="card" v-duan="haoxin">

    </div>
    <button @click>點此換位置</button>
</div>
<script>
    Vue.directive('duan',function (el,binding) {
        console.log(el)
        console.log(binding)
        if(binding.value){
            el.style.position='fixed';
            el.style.bottom=0;
            el.style.right=0;
        }
    })
    const app=new Vue({
        el:'#app',
        data:{
            haoxin:false
        }
    })
</script>
</body>
</html>

自定義指令修飾符-1

如今點擊能夠把位置換回來,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>練習代碼</title>
    <script src="../vue.js"></script>
    <style>
        .card{
            width: 100px;
            height: 100px;
            border:solid 1px greenyellow;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="card" v-duan.top.right="haoxin">

    </div>
    <button @click="my_click">點此換位置</button>
</div>
<script>
    Vue.directive('duan',function (el,binding) {
        console.log(el)
        console.log(binding)
        if(binding.value){
            el.style.position='fixed';
            // el.style.bottom=0;
            // el.style.right=0;
            for(let site in binding.modifiers)
                el.style[site]=0;
        }else{
            el.style.position='static'
        }
    })
    const app=new Vue({
        el:'#app',
        data:{
            haoxin:false
        },
    methods:{
            my_click:function () {
                this.haoxin=!this.haoxin
            }
    }
    })

</script>
</body>
</html>

自定義指令修飾符

計算屬性 computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>練習代碼</title>
    <script src="../vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <table>
       <thead>
            <th>科目</th>
            <th>成績</th>
       </thead>
       <tbody>
            <tr>
                <td>Python基礎</td>
                <td><input type="text" v-model.number="Python"></td>
            </tr>
            <tr>
                <td>Django項目</td>
                <td><input type="text" v-model.number="django"></td>
            </tr>
            <tr>
                <td>數據庫</td>
                <td><input type="text" v-model.number="sql"></td>
            </tr>
            <tr>
                <td>Linux</td>
                <td><input type="text" v-model.number="Linux"></td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{avg}}</td>
            </tr>
            <tr>
                <td>總成績</td>
                <td>{{sum}}</td>
            </tr>
       </tbody>
    </table>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            Python:60,
            django:60,
            sql:60,
            Linux:60,
        },
    //此處是計算屬性,計算屬性是放入內存,讀的時候快,
    computed:{
        sum:function () {
            return this.Python+this.django+this.sql+this.Linux
        },
        avg:function () {
            return this.sum/4
        },
    }
    })
</script>
</body>
</html>