前端-VUE框架

2024-02-06 10:08:10

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>