vue.js常用屬性 es6的常用語法

1 vue.js的使用方式及文字插值

<div id="app">{{ greeting }}</div>

<script>

new Vue({

el: "#app",

data: {

greeting: "Hello Vue",

}

})

</script>

　　採用原生的dom

// 原生js

let odiv = document.getElementById("app-01");

odiv.innerText = "Hello Vue!";

2 常用指令:

　　2.1 v-text: 類似於雙大括號渲染資料的另外一種方式

<div id="app" v-text="greeting"></div>

<script>

new Vue({

el: '#app',

data: {

greeting: "Hello World"

}

})

</script>

　　2.2 v-html: 由於v-test無法渲染標籤字串, 所以引出v-html

<div id="app" v-html="greeting"></div>

<script>

new Vue({

el: "#app",

data: {

greeting: "<h1>Hello Vue</h1>"

}

})

</script>

　　2.3 v-for : 陣列和物件的渲染方式

<div id="app">
    <ul>
        <li v-for="aihao in fuming">{{aihao}}</li>
    </ul>
    <ul>
        <li v-for="student in students">姓名:{{student.name}}年齡:{{student.age}}愛好:{{student.hobby}}</li>
    </ul>
</div>
<script>
        new Vue({
        el: '#app',
        data: {
            fuming: ['黃袍哥', '吃雞', '大魚大肉'],
            students:[
                {
                    name: '張敏聰',
                    age: 23,
                    hobby: 'girls',
                },
                {
                    name:'毛尖妹妹',
                    age: 18,
                    hobby: 'study',
                },
            ],

        }
    })
</script>複製程式碼

　　2.4 v-if: 渲染資料的時候根據條件進行判斷

<div id="app">

<div v-if="role == 'cainingning'">

<h1>歡迎美女光臨</h1>

</div>

<div v-else-if="role == 'juyingying'">

<h2>'''''</h2>

</div>

<div v-else>

<h1>努力學習</h1>

</div>

<script>

let vm = new Vue({

el: '#app',

data:{

role: 'cainingning'

}

})

</script>

　　2.5 v-show:

<div id="app">

<div v-show="isShow">Hello yiyi</div>

</div>

<script>

//v-開頭的資料就是幫我們渲染資料用的

let vm = new Vue({

el: '#app',

data: {

isShow: true,

}

})

</script>

　　　　注意: v-if 的底層採用的是appendChild來實現的, v-show通過樣式的display控制標籤的顯示

　　　　載入效能：v-if載入速度更快，v-show載入速度慢

　　　　切換開銷：v-if切換開銷大，v-show切換開銷小

　　　　v-if是惰性的，它是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建，v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

　　　　一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好，如果在執行時條件很少改變，則使用v-if較好。

　　2.6 v-bind: 繫結屬性, 冒號後面跟標籤的屬性, 屬性後面的等號指向資料,

<div id="app">

<a v-bind:href="jingdong">去京東</a>

<div :class="[isActive]"></div>

</div>

<script>

let vm = new Vue({

el: '#app',

data:{

jingdong: "https://www.jd.com",

isActive: 'active',

}

})

</script>

　　2.7 v-on:使用v-on可以在標籤上面繫結事件,注意新建的例項vue.app 中多了一個屬性, methods, 在methods中, 是我們具體事件的實現方式

<div id="app">

<h1 :class="{ active: isActive}">悶騷哥</h1>

<button v-on:click="changeColor">點選變粉</button>

</div>

<script>

let vm = new Vue({

el: '#app',

data:{

isActive: false

},

methods: {

changeColor: function () {

this.isActive = !this.isActive

}

})

</script>

　　2.8 v-model: 當我們修改資料後, 修改後的資料能夠及時的渲染到模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name"/>
    <input type="checkbox" value="男" v-model="genders"/>
    <input type="checkbox" value="女" v-model="genders"/>
    <select v-model="girlfriends" multiple>
        <option>毛尖妹妹</option>
        <option>小萌芽</option>
        <option>寧寧</option>
    </select>
    <hr>
    {{name}}
    {{genders}}
    {{girlfriends}}
</div>
<!--v-model 當我們修改資料後, 修改後的資料能夠及時的渲染到模板-->
<script>

    let vm = new Vue({
        el: "#app",
        data:{
            name: 'juyingying',
            genders:[],
            girlfriends:[]
        }
    })
</script>
</body>
</html>複製程式碼

　　　　v-model: 計算屬性和監聽: ,(一下兩個有一個有屬性和監聽的詳細解釋和區別)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <tr>
            <th>學科</th>
            <th>成績</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>python</td>
            <td><input type="text" v-model="python"></td>
        </tr>
        <tr>
            <td>vue</td>
            <td><input type="text" v-model="vue"></td>
        </tr>
         <tr>
            <td>go</td>
            <td><input type="text" v-model="go"></td>
        </tr>
        <tr>
            <td>總成績</td>
            <td>{{sumScore}}</td>
        </tr>
        </tbody>
    </table>
    <hr>
    {{python}}
   {{sumScore}}
</div>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            python:88,
            vue:89,
            go:90,
        },
        //計算
        computed:{
            //在頁面載入的時候執行
            sumScore: function () {
                console.log(1);
                return this.python + this.vue + this.go
            }
        },
        //當計算的邏輯比較複雜時, 引入了watch
        //當data裡面的資料發生改變的時候, 才會執行, 用於監聽data的改變
        watch:{
            python: function () {
                console.log(2);
                alert("python 被修改了")
            }
        }

    })
</script>
</body>
</html>複製程式碼

　　　　監聽補充內容:

hobby: ['抽菸', '喝酒', '燙頭'],

obj: {

age: 32,

face: null

},

methods: {

my_click: function () {

//改變資料

// this.name = 'ju';

//改變陣列的長度能能夠被監聽到, 新值和舊址相同

// this.hobby.push('學習');

//改變陣列中的值不能被監聽到

// this.hobby[0] = 'no'

//用$set修改陣列中的值能能夠被監聽到, 新值和舊址相同

// app.$set(this.hobby, 0, '學習')

//改變物件中的資料不能被監聽到

// this.obj.face='yes'

}

},

watch: {

name: {

handler: function (val, oldVal) {

console.log(val);

console.log(oldVal)

}

},

hobby: {

handler: function (val, oldVal) {

console.log(val);

console.log(oldVal);

},

// deep: true

},

obj: {

handler: function (val, oldVal) {

console.log(val);

console.log(oldVal);

},

// deep: true

}

)

</script>

　　2.9 常用指令之指令修飾符: number:可以轉換成數字, lazy: 移除游標時計算

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <tr>
            <th>學科</th>
            <th>成績</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>python</td>
            <td><input type="text" v-model="python"></td>
        </tr>
        <tr>
            <td>vue</td>
            <td><input type="text" v-model="vue"></td>
        </tr>
         <tr>
            <td>go</td>
            <td><input type="text" v-model="go"></td>
        </tr>
        <tr>
            <td>總成績</td>
            <td>{{sumScore}}</td>
        </tr>
        </tbody>
    </table>
    <hr>
    {{python}}
   {{sumScore}}
</div>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            python:88,
            vue:89,
            go:90,
        },
        //計算
        computed:{
            //在頁面載入的時候執行
            sumScore: function () {
                console.log(1);
                return this.python + this.vue + this.go
            }
        },
        //computes, 也可以實現監聽事件,但是當計算邏輯比較複雜的時候, 載入速度慢, 所以不合適, 
        //當data裡面的資料發生改變的時候, 才會執行, 用於監聽data的改變
        watch:{
            python: function () {
                console.log(2);
                alert("python 被修改了")
            }
        }

    })
</script>
</body>
</html>複製程式碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <tr>
            <th>學科</th>
            <th>成績</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <!--number就是指令修飾符, 把他轉換成數字 , lazy就是退出游標後計算-->
            <td>python</td>
            <td><input type="text" v-model.number.lazy="python"> </td>
        </tr>
        <tr>
            <td>vue</td>
            <td><input type="text" v-model.number.lazy="vue"> </td>
        </tr>
        <tr>
            <td>go</td>
            <td><input type="text" v-model.number.lazy="go"> </td>
        </tr>
        <tr>
            <td>總成績</td>
            <td>{{sumScore}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            python: 88,
            vue: 99,
            go: 100
        },
        computed:{
            sumScore: function () {
                console.log(this);
                return this.python + this.vue + this.go
            }
        }

    })
</script>
</body>
</html>複製程式碼

　 2.10 常用指令之後去dom元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
    <style>
        .active {
            background-color: #c1e2b3;
        }
    </style>
</head>
<body>
<div id="app">
    <div ref="myRe">peiqi</div>
    <!--<div :class="[isActive]">peiqi</div>-->
    <button v-on:click="changeColor">點選讓佩奇變綠</button>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                isActive:'active',
            },
            methods: {
                changeColor:function () {
                    console.log(this);
                    this.$refs.myRe.className = this.isActive
                }
            }
        })
    </script>
</div>
</body>
</html>複製程式碼

　2.11 常用指令之自定義指令:

<meta http-equiv="x-ua-compatible" content="IE=edge">

<title>Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<script src="static/vue.min.js"></script>

<style>

.box {

width: 50px;

height: 60px;

background-color: #5bc0de;

}

</style>

</head>

<body>

<div id="app">

<div v-pos.right.bottom="post" class="box">Hello World</div>

</div>

<script>

Vue.directive('pos', function (el, bindding) {

console.log('el', el);

console.log('bindding', bindding);

let decorators = bindding.modifiers;

if(bindding.value){

//方法一

// el.style['position'] = 'fixed';

// el.style['right'] = 0;

// el.style['bottom'] = 0;

//加指令修飾符

el.style['position'] = 'fixed';

for(let key in decorators){

el.style[key] = 0

}

});

//自定義屬性

let vm = new Vue({

el: '#app',

data:{

post: true

}

})

</script>

</body>

</html>

3 es6 的常用語法:

　1 var 和 let的區別:

　　　　var有變數提升的效能, let沒有

<script>

console.log(username);

//列印undefined, 變數提升, 相當於提前定義了username

var username = 'lili';

console.log(username);

console.log(user);

//在es6 中會報錯, 無變數提升的作用

let user = 'meime'

</script>

　　var定義的變數: 全域性作用域和函式作用域, let定義的作用域: 還有塊級作用域

// var定義的變數: 只有全域性作用域和函式定義域

// let定義的變數: 有全域性作用域和函式作用域, 塊級作用域

let user = 'meime';

if(true){

var username = 'aaa';

let age = 22

}

console.log(username); //可以列印

console.log(age) // 會報錯

　　let定義的變數不能重複定義, var定義的變數可以

var username = 'pp';

var username = 'oo';

console.log(username); //可以列印

let username = 'll';

console.log(username) //會報錯, let定義的變數不能重複定義

　　　　const定義常量

　　　　:定義時必須賦值, 定義之後不能修改

　　2 常用語法之模板字串:${username1}

<div id="app">

</div>

<script>

let odiv = document.getElementById('app');

let username1 = 'a';

let username12 = 'b';

odiv.innerHTML = `

<h1>Hello ${username1}</h1>

<h1>Hello ${username12}</h1>

</script>

　　3 常用語法之物件的單例模式

//箭頭函式的this,指向定義時當定義域

//普通函式的this誰定義它指向誰,

let obj = {

name: 'yingyin',

foo(){

console.log(this);//定義的obj物件

console.log(this.name);

}

};

obj.foo();

　　4 常用語法之類

View Code

　　5 常用語法之函式的擴充套件: 箭頭函式, 預設值引數:

View Code

　　6 函式的解構和賦值

//函式的解構, 兩端的型別必須一致

let ary = [1, 2, 3];

let [a, b, c] = ary;

console.log(a, b ,c);

let obj = {

username: 'a',

age:23

};

let {username: user, age: age} = obj;

console.log(user, age);

　　　　函式的賦值

//函式的賦值

let a = 1;

let b = 2;

[a, b] = [b, a];

console.log(a, b)

vue.js常用屬性 es6的常用語法

相關文章