vue学习11.21-优快云博客

vue特点：

采用组件化开发，提高代码复用率和维护

声明式编码，不需要直接操作DOM元素

使用diff算法，把虚拟DOM变成真实DOM，

如果两个容器都用vue的实例，只选最上面的容器。

一个容器使用两个vue实例也不行。

url写在data中，

v-model只能绑定输入类元素（都有value值）

input，select

v-model:value,也可以写为v-model，默认收集value值

el和data的两种写法（茴字的两种写法），

el第一种：el: '#app'

el第二种const v = new Vue

v.$mount('#app')

$mount是挂载的意思

data第一种对象式

data: { }

第二种函数式

data:function() {

return {

name:'尚硅谷'

}

如果写成data:()=>,就变成全局windows的对象了，

可以在data函数中打印this，看看是哪个实例

MVVM架构模型，Vue的设计受到这个模型的启发。

Model view viewModel，

原型上有的东西，模板上可以直接用，可以直接{{ }}输出。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="haha">
        <div class="box">
            <h1>{{ name }}</h1>
            <h1>{{ school.name }}</h1>
            <h1>{{ $options }}</h1>
            <h1>{{ 1+1 }}</h1>


        </div>
        <a v-bind:href="url" :x="hello">点我跳转到{{ school.name }}</a>
        <input type="text" v-model:value="name">


    </div>
</body>

<script>
    const v = new Vue({
        // el: '#app',
        data: function () {
            console.log('打印', this);

            return {
                name: 'jack',
                url: 'http://www.sdau.edu.cn',
                hello: '你好',
                school: {
                    name: '尚硅谷',

                }
            }
        },

        // data: () => {
        //     console.log('打印', this);
        // },
        methods: {

        }
    })

    v.$mount('#haha');
</script>

<style>
    .box {
        height: 400px;
        width: 400px;
        background-color: #e8699c;
    }

    .body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
</style>

</html>