前端-VUE框架

Vue框架體系

第一個Vue程序

WebStore新建空項目，新建一個HTML，打開https://www.bootcdn.cn/vue/，使用其中一個版本的vue.min.js，複製<script>標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            color: red;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
</head>
<body>
<div class="bg">
    hello world!!
    {{msg}}
</div>
<script>
    new Vue({
        el:'.bg',
        data:{
            msg:'hello vlue!!'
        }
    })
</script>
</body>
</html>

打開瀏覽器，可以看到如下效果

Vue的插值語法{{ msg }} 和指令及指令縮寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            color: red;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
</head>
<body>
<!--v-bind:id 綁定某個ID-->
<div class="bg" v-bind:id="bg1">
    hello world!!
    {{msg}}
    <div>
        {{ (count+1)*10 }}
    </div>
    <div v-html="template">
        {{template}}
    </div>
    <a href="http://www.baidu.com">百度</a>
    <!--和上面的效果一樣-->
    <a v-bind:href="url">百度2</a>
    <a :href="url">百度3</a>
    <div>
        <button type="button" v-on:click="submit()">加數字</button>
        <button type="button" @click="submit()">加數字方式二</button>
    </div>
</div>
<script>
    new Vue({
        el:'.bg',
        data:{
            msg:'hello vlue!!',
            count:0,
            url:'http://www.baidu.com',
            template:'<div>hello template</div>',
            bg1:'app-bind'
        },
        methods:{
            submit:function () {
                this.count ++
            }
        }
    })
</script>
</body>
</html>

打開瀏覽器，顯示效果如下

Vue的計算屬性(computed)與偵聽器(watch)

watch一般監聽的是一個變量(也是能是個單一的變量，可能是一個數組)，computed可以監聽很多個變量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<body>
<div id='app'>
    {{msg}}
    <p>
        {{msg1}}
    </p>
</div>
<script>
    var arr = 'new test'
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
            another:'another Hello Vue!!'
        },
        watch: {
            msg: function (newval, oldval) {
                console.log('newval is:' + newval)
                console.log('oldval is:' + newval)
            }
        },
        computed: {
            msg1:function () {
                return 'computed:'+this.msg + "," + this.another + arr
            }
        }
    })
</script>
</body>
</html>

我們按F12，在開發者調試工具裏，去改變msg的值，這時第一行和第二行的msg 都會動態改變
改變msg1的值，這時第二行的msg1會動態改變
改變arr的值，此時不會改變，但這時再去改變msg或msg1的值，此時連帶arr都會動態改變

watch:異步場景
computed:數據聯動

條件渲染

v-if,v-else,v-else-if 和 v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<body>
<div id='app'>
    {{msg}}
    <p>
        {{msg1}}
    </p>
</div>
<script>
    var arr = 'new test'
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
            another:'another Hello Vue!!'
        },
        watch: {
            msg: function (newval, oldval) {
                console.log('newval is:' + newval)
                console.log('oldval is:' + newval)
            }
        },
        computed: {
            msg1:function () {
                return 'computed:'+this.msg + "," + this.another + arr
            }
        }
    })
</script>
</body>
</html>

列表渲染

v-for,v-for與v-if結合使用,Class與Style綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<body>
<div id="app">
    <div v-for="item in list">
        {{item}}
    </div>
    <div v-for="item in list2">
        姓名:{{item.name}} 年齡:{{item.age}}
    </div>
    <div v-for="item in list2">
<!--        <div v-if="item.age > 29" v-bind:style="style1">-->
        <div v-if="item.age > 29"
             :class="{'active': true}"
             :style="style1">
            老人:{{item.age}}
        </div>
        <div v-else
            :class="['active','add','more',{'another':true}]">
            年輕人:{{item.age}}
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
            style1: {
                color: `red`,
                textShadow: `0 0 5px green`
            },
            list: [1, 2, 3, 4, 5],
            list2: [{
                name: 'liwei',
                age: 16
            }, {
                name: 'lili',
                age: 30
            }]
        },
    })
</script>
</body>
</html>