Vue的用法和es6的語法

阿新 • • 發佈：2018-11-26

一.es6的語法

1.let

　　基本語法:

　　　　ES6 新增了let命令，用來宣告變數。它的用法類似於var，但是所宣告的變數，只在let命令所在的程式碼塊內有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

　　特點:

　　　　1.區域性作用域

　　　　2.不會存在變數提升

　　　　3.變數不能重複宣告

2.const

　　基本用法
　　　　const宣告一個只讀的常量。一旦宣告，常量的值就不能改變。

const PI = 3.1415;
PI  
// 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面程式碼表明改變常量的值會報錯。

　　特點:

　　　　1.區域性作用域

　　　　2.不會存在變數提升

　　　　3.不能重複宣告,只宣告常量不可變得量

let和const

3.模版字串

tab鍵上面的反引號 ${變數名}來插值
let name = '未來';
let str = `我是${name}`

4.箭頭函式

function(){} ===  ()=>{} this的指向發生了改變

而是與箭頭函式和普通函式的區別總結兩點：　　1、es5的普通函式，this指向是指向了呼叫者，比如vue例項的方法（在methods中聲明瞭一個方法）是由vue例項vm呼叫的，所以this指向vm。
　　2、箭頭函式的this指向它的呼叫者所在的上下文，也就是vm例項所在的上下文（定義vm的父類），即window

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name=" 
viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
    /*
    function add(x){
        return x
    }
    add(5);
    */
//    let add = function (x) {
//        return x;
//    }
//    add(10);

//    let add2 = (x)=>{
//        return x
//    }
//    let add2 = x => x;
//    console.log(add2(30));

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
    let person = {
        methods:{
          fav:function(){

          }

        },
        name: "日天",
        age: 30,
        fav: function () {
            console.log(this); //this指向 當前的物件
            console.log(this.name);
        }
    }

    /*
     let person2 = {
        name: "日天2",
        age: 30,
        fav:  () => {
            console.log(this); //this指向 發生了改變。this指向 定義person2的父級物件(上下文)
            console.log(this.name);
        }
    }

    person2.fav()
    */
//    物件的單體模式
        let person3 = {
            name:'日天',
            fav(){
                console.log(this); //當前this
            }
//            fav:function () {
//
//            }
        }
        person3.fav();
</script>
</body>
</html>

箭頭函式

5.es6的類

　　原型 prototype 當前類的父類（繼承性）

    class Person{
        constructor(name){
            this.name = name;
        }
        fav(){
        }            
    }
    Vue的基本用法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>

    /*
    function Vue(name,age) {
        this.name = name;
        this.age = age;
    }
//    基於原型給物件宣告方法
    Vue.prototype.showName = function () {
        console.log(this.name);
    }

    var p1 = new Person('alex','29');
    */

    class Person{
        constructor(name='alex',age=18){
            this.name = name;
            this.age = age;
        }
        showname(){
            console.log(this.name);
        }
        showage(){

        }
    }

    let V = new Person();
    V.showname();
</script>

</body>
</html>

es6的類

二.Vue的介紹

1.前端的三大框架

框架	介紹
vue	尤雨溪,漸進式的JavaScript框架
react	Facebook公司，裡面的高階函式非常多，對初學者不用好
angular	谷歌公司,目前更新到6.0，學習angular得需要玩一下typescript

2.什麼是Vue

　　它是構建使用者介面的JavaScript框架（讓它自動生成js,css，html等）

3.Vue的基本引入和建立

　　(1)下載

　　　　cdn方式下載

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

　　(2)引包

<script src='./vue.js'></script>

　　(3)Vue的模板語法

<!--模板語法-->
<h2>{{ msg }}</h2>
<h3>{{ 'hhahda' }}</h3>
<h3>{{ 1+1 }}</h3>
<h4>{{ {'name':'alex'} }}</h4>
<h5>{{ person.name }}</h5>
<h2>{{ 1>2? '真的': '假的' }}</h2>
<p>{{ msg2.split('').reverse().join('') }}</p>

　　(4)例項化

//2.例項化物件
new Vue({
    el:'#app', //繫結那塊地
    data:{
        //資料屬性  種子
        msg:'黃瓜',
        person:{
            name:'wusir'
        },
        msg2:'hello Vue'
    }
});

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <!--模板語法-->
    <h2>{{ msg }}</h2>
    <h3>{{ 'hhahda' }}</h3>
    <h3>{{ 1+1 }}</h3>
    <h4>{{ {'name':'alex'} }}</h4>
    <h5>{{ person.name }}</h5>
    <h2>{{ 1>2? '真的': '假的' }}</h2>
    <p>{{ msg2.split('').reverse().join('') }}</p>
    <div>{{ text }}</div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
    //2.例項化物件
    new Vue({
        el:'#app', //繫結那塊地
        data:{
            //資料屬性  種子
            msg:'黃瓜',
            person:{
                name:'wusir'
            },
            msg2:'hello Vue',
            text:'<h2>日天</h2>'
        }
    });
</script>

</body>
</html>

Vue的基本使用

4.資料繫結

　　1、插入文字{{ }}。如上例，也可以放表示式

　　2、插入html：v-html

5.Vue的指令

　　指令：是帶有v-字首的特殊屬性，通過屬性來操作元素

　　(1)v-text：在元素當中插入值

　　　　v-text相當於innerText

<!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">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <p>{{ 80+2 }}</p>
    <p>{{ 20>30 }}</p>
    <h1 v-text="msg"></h1>
    <h1 v-html="hd"></h1>
    <h1 v-html="str"></h1>
</div>
<script>
    new Vue({
        el:"#app",  //表示當前這個元素開始使用vue
        data:{
            msg:"你好啊",
            hd:"<input type='button' value='啦啦'>",
            str:"你妹的"
        }
    })
</script>
</body>
</html>

　　(2)v-html：在元素當中不僅可以插入

　　　　v-html相當於innerHTML

<!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">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <h1>問卷調查</h1>
    <form action="" method="post">
        <input type="checkbox">香蕉
        <input type="checkbox">蘋果
        <input type="checkbox">橘子
        <input type="checkbox"  @click="qita">其他
        <div v-html="htmlstr" v-show="test"></div>
    </form>
</div>
<script>
    new Vue({
        el:"#app",  //表示當前這個元素開始使用vue
        data:{
            htmlstr:'<textarea></textarea>',
            test:false  //預設是隱藏的
        },
        methods:{
            qita:function () {
                this.test = !this.test  //當一點選其他的時候讓顯示
            }
        }

    });

</script>

</body>
</html>

　　(3)v-if和v-else：根據表示式的真假值

　　(4)v-show：根據表示式的真假值來顯

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>

<div id="content">
    {{ add(2,3) }}
    <button v-on:click='handlerClick'>隱藏</button>
    <div class="box" v-show='isShow'></div>
    <div class="box2" v-if="isShow"></div>

    <div v-if="Math.random() > 0.5">
        有了
    </div>
    <div v-else>
        沒了
    </div>

</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
    //資料驅動檢視
    new Vue({
        el: '#content',
        data() {
            //data中是一個函式 函式中return一個物件，可以是空物件 但不能不return
            return {
                msg: "<h2>alex</h2>",
                num: 1,
                isShow: true
            }
        },
        methods: {
            add(x, y) {
                console.log(this.num);
                return x + y
            },
            handlerClick() {
                //資料驅動
                console.log(this);
                this.isShow = !this.isShow;

            }
        }
    })
</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">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="pick">我是</p>
    <p v-show="temp">呼啦啦呼啦啦</p>
    <p v-show="ok">你喜歡我嗎?</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",  //表示當前這個元素開始使用vue
        data:{
//           pick:true  //顯示
           pick:false,   //移除，用註釋給替換了
//            temp :true ,  //顯示
           temp :false,   //隱藏
           ok:true
        }
    });
    window.setInterval(function() {
        vm.ok =! vm.ok;
    },1000)  //1000代表1秒
</script>

</body>
</html>

if-show

v-if和v-show的區別

　　v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。

　　v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

　　相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

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

　　(5)v-on：監聽元素事件，並執行相應的

　　(6)v-bind：繫結元素的屬性並執行相應

v-bind可以繫結標籤中任何屬性  
v-on 可以監聽 js中所有事件

簡寫：
v-bind:src  等價於   :src
v-on:click 等價於    @click

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }

    </style>
</head>
<body>

<div id="app">
    <!--<button v-on:click = 'handlerChange'>切換顏色</button>-->
   <!--v-bind 標籤中所有的屬性 img標籤src alt,a標籤的href title id class-->
    <!--<img v-bind:src="imgSrc" v-bind:alt="msg">-->
    <!--<div class="box" v-bind:class = '{active:isActive}'></div>-->

     <button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切換顏色</button>
   <!--v-bind 標籤中所有的屬性 img標籤src alt,a標籤的href title id class-->
    <img :src="imgSrc" :alt="msg">
    <div class="box" :class = '{active:isActive}'></div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
    //資料驅動檢視  設計模式 MVVM  Model  View  ViewModel

    //宣告式的JavaScript框架

//    v-bind和v-on的簡便寫法 :  @
    new Vue({
        el: '#app',
        data() {
            //data中是一個函式 函式中return一個物件，可以是空物件 但不能不return
            return {
                imgSrc:'./1.jpg',
                msg:'美女',
                isActive:true
            }
        },
        methods:{
            handlerChange(){
//                this.isActive = !this.isActive;
                this.isActive = false;
            },
            handlerLeave(){
                this.isActive = true;
            }
        }
       
    })
</script>

</body>
</html>

　　(7)v-for：根據變數的值來迴圈渲染元素

　　　　v-for可以遍歷列表，也可以遍歷物件,在使用vue的v-for指令的時候，一定要繫結key,避免vue幫咱們計算DOM

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .active {
            background-color: green;
        }

    </style>
</head>
<body>

<div id="app">
    <ul v-if="data.status === 'ok'">
        <!--v-for的優先順序是最高的     diff演算法-->
        <li v-for = '(item,index) in data.users' :key="item.id" >
            <h3>{{ item.id }} -- {{ item.name }} -- {{ item.age }}</h3>
        </li>
    </ul>
    <div v-for = '(value,key) in person'>
        {{ key }}-----{{ value }}
    </div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>

    new Vue({
        el: '#app',
        data() {

            return {
                data: {
                    status: 'ok',
                    users: [
                        {id: 1, name: 'alex', age: 18},
                        {id: 2, name: 'wusir', age: 30},
                        {id: 3, name: 'yuan', age: 48}
                    ]
                },
                person:{
                    name:'alex'
                }
            }
        },
        methods: {}

    })
</script>

</body>
</html>

　　(8)v-model：把input的值和變數繫結

<!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">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input v-model="msg">
    <input v-model="msg" value="this is test">
    <p>{{msg}}</p>
    <input type="button" value="變化" @click="change">
</div>
<script>
    new Vue({
        el:"#app",  //表示當前這個元素開始使用vue
        data:{
//            msg:"",
            msg:"aaaaa"
        },
        methods:{
            change:function () {
                this.msg=512
            }
        }
    });

</script>

</body>
</html>

6.對陣列的操作

    - push  #從末尾新增
    - pop  #從末尾刪除
    - shift #從頭新增
    - unshift #從頭刪除
    - splice #刪除元素。splice(index,1)  #刪除這個索引的那一個
    - reverse  #反轉

7.自定義指令

<!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">
    <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:{ //directives定義指令的
                focus:{   //focus指令的名字
                    inserted:function (els) {    //els繫結的這個元素
                        //inserted當繫結的這個元素  <input type="text" v-focus>顯示的時候，
                        els.focus();  //獲取焦點的一個方法，和以前的時候是一樣的
                        els.style.backgroundColor="blue";
                        els.style.color='#fff'
                    }
                }
           }
        })
    </script>
</body>
</html>

View Code

8.偵聽器

　　雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 通過 watch 選項提供了一個更通用的方法，來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時，這個方式是最有用的。

　　watch可以監聽單個屬性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <button @click = 'clickHandler'>修改</button>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data(){
                return {
                    msg:"alex",
                    age:18
                }

            },
            methods:{
                clickHandler(){
                    this.msg = "wusir"
                }
            },
            watch:{
                //watch單個屬性，如果想監聽多個屬性 宣告多個屬性的監聽
                'msg':function (value) {

                    console.log(value);

                    if (value === 'wusir'){
                        alert(1);
                       this.msg = '大武sir'
                    }
                },
                'age' :function (value) {
                    
                }
            }
        })
    </script>
</body>
</html>

9.計算屬性 computed

　　監聽多個屬性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <p>{{ myMsg }}</p>
    <button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                msg: "alex",
                age: 18
            }

        },
        created() {
            //定時器  ajax  庫 function(){}
            setInterval(() => {

            })
        },
        methods: {
            clickHandler() {
                //this的指向就是當前物件
                this.msg = "wusir";
                this.age = 20;
            },
            clickHandler: function () {
                console.log(this);
            }

        },
        computed: {
            myMsg: function () {
                //業務邏輯

//                    計算屬性預設只有getter方法
                return `我的名字叫${this.msg},年齡是${this.age}`;
            }
        }
    })

    console.log(vm);
</script>
</body>
</html>

Vue的用法和es6的語法

MVVM設計模式

資料驅動邏輯流程

Vue的用法和es6的語法

Webstorm 添加新建.vue文件功能並支持高亮vue語法和es6語法

Webstorm 新增 .vue 檔案功能並支援高亮和ES6語法

Vue js使用es6語法來實現元件

webstorm中es6語法報錯，.vue檔案中es6語法報錯

webstorm和vue中es6語法報錯的解決方式

（轉）關於ES6的模塊功能 Module 中export import的用法和註意之處

es6語法入門let 和 const 命令

es6 語法（map、set和array 的對比）

es6 語法（map、set和obj 的對比）

es6 語法（Proxy和Reflect 的對比）

es6 語法（iterator和for...of循環）

mysql數據庫 BETWEEN 語法的用法和邊界值解析

amd cmd commonjs 模塊規範和 es6 的 module 語法

Linux九陰真經之九陰白骨爪殘卷5（ansible用法二之Playbook和YAML語法）

vue.js 中 :is 與 is 的用法和區別,學習全域性與區域性註冊元件

es6語法淺克隆物件和陣列

vue動態繫結class的3種方式物件語法和陣列語法

Vue框架-基礎知識(vue指令、例項生命週期、計算屬性與監聽屬性、插槽理解、元件介紹、資料互動、ES6語法等)

ES6語法之正則擴充套件和Promise

Vue的用法和es6的語法

MVVM設計模式

資料驅動邏輯流程

相關推薦