ES6 Vue

ES6

let所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。const聲明的變量是常量，不能被修改。
解構(gòu)表達式：
（1）數(shù)組解構(gòu)
比如有一個數(shù)組： let arr = [1,2,3]，想獲取其中的值

const [x, y, z] = arr;
console.log(x, y, z);

（2）對象解構(gòu)
比如喲一個person對象：

const person = {
    name:"jack",
    age:21,
    language: ['java', 'js', 'css']
}

const {name, age, language} = person;
console.log(name);
console.log(age);
console.log(language);

如果想要用其他變量接收，需要額外指定別名：

const {name:n} = person

函數(shù)的優(yōu)化

function sum(a,b){
            return a+b;
        }
        const add = (a,b) => a+b;

對象中函數(shù)的優(yōu)化

const p = {
            name: "jack",
            age: 21,
            sayHello: function(){
                console.log("hello");
            }
        }
        p.sayHello();

優(yōu)化后

const p = {
            name: "jack",
            age: 21,
            sayHello(){
                console.log("hello");
            }
        }

        p.sayHello();

const p = {
            name: "jack",
            age: 21,
        }
        const hello = function(person){
            console.log(person.name, person.age);
        }
        hello(p);

接收參數(shù)時解構(gòu)

const p = {
            name: "jack",
            age: 21,
        }
        const hello = function({name, age}){
            console.log(name, age);
        }
        hello(p);

const hello = ({name, age}) => console.log(name, age);

map和reduce：

let arr = ['2','5','-10','15','-20']
let arr2 = arr.map(s => parseInt(s))
arr2
(5) [2, 5, -10, 15, -20]
arr2.reduce((a,b) => a+b)
-8

Vue

在本地該項目下安裝vue，在終端輸入 npm install vue --save

<body>
<div id="app">
    <button @click="handleClick">點我</button>
    <br>
    <input type="text" v-model="num"><button @click="num++">+</button>
    <h1>
        {{name}}非常帥！<br>
        {{num}}位女神為其著迷！
    </h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element,vue所作用的標(biāo)簽
        data:{
           name: "",
            num: 1,
        },
        methods:{
            handleClick(){
                console.log("hello!");
            }
        },
        created(){
            //向后臺發(fā)起ajax請求，完成對data數(shù)據(jù)初始化
           // this.name="林更新真的";
            setTimeout(() => this.name ="林更新 真的",1000)

        }
    });
</script>
</body>

指令：是帶有-v前綴的特殊屬性。例如v-model代表雙向綁定。
差值表達式：
使用{{}}方式在網(wǎng)速較慢時會出現(xiàn)問題。在數(shù)據(jù)未加載完成時，頁面會顯示出原始的{{}}，加載完畢后才顯示正確數(shù)據(jù)，稱為差值閃爍。
所以可以用指令代替差值表達式，即使用v-text和v-html指令來替代{{}}
v-text：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有html代碼，會作為普通文本輸出；v-html：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有html代碼，會被渲染。

<body>
<div id="app">
    <span v-text="name"></span><br>
    <span v-html="name"></span>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element,vue所作用的標(biāo)簽
        data:{
           name: "",
            num: 1,
        },
        methods:{
            handleClick(){
                console.log("hello!");
            }
        },
        created(){
            //向后臺發(fā)起ajax請求，完成對data數(shù)據(jù)初始化
           // this.name="林更新真的";
            setTimeout(() => this.name ="<font color='red'>林更新 真的</font>",1000)

        }
    });
</script>
</body>

剛才的v-text和v-html可以看作是單向綁定，數(shù)據(jù)影響了視圖渲染，但是反過來就不行。v-model是雙向綁定，視圖和模型之間會互相影響。

<body>
<div id="app">
    <h1>已開設(shè)下列課程</h1>
    <input type="checkbox" v-model="lessons" value="java"/>java <br>
    <input type="checkbox" v-model="lessons" value="Python"/>Python <br>
    <input type="checkbox" v-model="lessons" value="IOS"/>IOS<br>
    <h1>
        您已購買下列課程：{{lessons.join(",")}}
    </h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element,vue所作用的標(biāo)簽
        data:{
            lessons: []
        }
    });
</script>
</body>

v-on指令用于給頁面元素綁定事件，語法：

v-on: 事件名="js片段或函數(shù)名"

簡單語法：

@事件名="js片段或函數(shù)名"

不想冒泡可以加stop

<div id="app">
    <!--v-on-->
    <div style="width: 100px; height: 100px; background-color: antiquewhite;" @click="print('div')">
        div
        <button @click.stop="print('button')">點我試試</button>
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element,vue所作用的標(biāo)簽
        data:{
           name: "",
            num: 1,
            lessons: []
        },
        methods:{
            print(msg){
                console.log(msg);
            }
        }
    });
</script>

.stop：阻止事件冒泡； .prevent： 阻止默認(rèn)事件發(fā)生； .capture: 使用事件捕獲行模式； .self： 只有元素自身觸發(fā)事件才執(zhí)行（冒泡或捕獲的都不執(zhí)行）。 .one: 只執(zhí)行一次。

 <a  @click.prevent="print('百度')">百度一下，你就瘋了</a>

v-for遍歷數(shù)據(jù)渲染頁面
遍歷數(shù)組如下：

<ul>
        <li v-for="user in users">
            {{user.name + "," + user.gender + "," + user.age}}
        </li>
    </ul>

</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element,vue所作用的標(biāo)簽
        data:{  
            users:[
                {name:'柳巖', gender:'女', age:21},
                {name:'柳巖2', gender:'男', age:29},
                {name:'柳巖3', gender:'女', age:11},
                {name:'柳巖4', gender:'女', age:20},
                {name:'柳巖5', gender:'女', age:9},
            ]
        }
    });
</script>

在遍歷的過程中，如果我們需要知道數(shù)組的角標(biāo)，可以指定第二個參數(shù)：

v-for="(item, index) in items"

items:要迭代的數(shù)組；item:迭代得到的數(shù)組元素別名；index:迭代到的元素索引，從0開始。
對象的遍歷

    <ul>
        <li v-for="u in users[0]">{{u}}</li>
    </ul>

    <ul>
        <li v-for="(v, k) in users[0]">{{k + ":" + v}}</li>
    </ul>

遍歷數(shù)字

 <ul>
        <li v-for="i in 5">{{i}}</li>
    </ul>

v-if適用于一次加載時，v-show適用于頻繁使用時如菜單。
v-bind:

<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <style type="text/css">
        div#box{
            width: 100px;
            height: 100px;
            color: darkgray;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">紅色</button>
    <button @click="color='blue'">藍(lán)色</button>
    <div id="box" v-bind:class="color">
        我是盒子
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element,vue所作用的標(biāo)簽
        data:{
            color: "red",

        }
    });
</script>
</body>

<div id="app">
    <button @click="isRed=!isRed">點我切換顏色</button>
    <div id="box" v-bind:class="{red:isRed, blue: !isRed}">
        我是盒子
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element,vue所作用的標(biāo)簽
        data:{
            isRed: true

        }
    });
</script>

計算屬性：


    <!--計算屬性-->
    <h1>
        您的生日：{{birth}}
    </h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element,vue所作用的標(biāo)簽
        data:{
            isRed: true,
            birthday: 195698909899//毫秒值
        },
        computed:{
            birth(){
                const day = new Date(this.birthday);
                return day.getFullYear() + "年" + day.getMonth() + "月"+ day.getDay()+"日";
            }
        }
    });
</script>

watch監(jiān)控:

<!--watch-->
    <input type="text" v-model="num">
    <h1>num: {{num}}</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element,vue所作用的標(biāo)簽
        data:{
            num: 1
        },
        watch:{
            num(val, oldVal){
                console.log(val, oldVal);
            }
        }
    });
</script>
</body>
</html>

對象深度監(jiān)控：

<script>
    const app = new Vue({
        el:"#app",//element,vue所作用的標(biāo)簽
        data:{
            person:{
                name: "Jack",
                age: 21
            }
        },
        watch:{
            person: {
                deep: true,
                handler(val){
                    console.log(val.age)
                }
            }
        }
    });
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容