Vue学习笔记1_下列不属于vue.js提供现代web开发中常见的高级功能的是( )-CSDN博客

本文链接：https://blog.csdn.net/qq_45867875/article/details/117851532

第一章：

一.Vue.js介绍

Vue.js是一个渐进式JavaScript框架，它让Web开发变得更加的简单，同时也颠覆了传统前端的开发模式。它提供了现代Web开发中常见的高级功能，如：

1.解耦视图与数据 2.可复用的组件 3.前端路由 4.状态管理 5.虚拟DOM(Virtual DOM)

二.MVVM模式

MVVM模式是Model-View-ViewModel模式的缩写，Vue.js在设计上使用了这种模式。

MVVM模式是由软件架构MVC衍生而来的。当View（视图层：页面）变化时，会自动更新ViewModel（视图模型：本质是Vue实例，也就是const vm = new Vue()创建出来的），反之亦然。View和ViewModel之间通过双向绑定（Data bindings）联系，Dom Listeners监视view(视图)的改变，里面有个input的事件监听文本框的改变，会把这个数据保存到model（模型：数据对象，代表data）中去。

第二章：

一.第一个页面实现

el是不可缺少的选项。el用于指定一个页面中已存在的DOM元素来挂载Vue实例，他可以是HTMLElement，也可以是CSS选择器

<!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, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{msg}}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 第一种方式
        //var app =  new Vue({
        //     el:document.getElementById('app'),
        //     data(){
        //         return{
        //             msg:'hellow 张三'
        //         }
        //     }
        // })

        // 第二种方式
        //var app =  new Vue({
        //     el:"#app",
        //     data(){
        //         return{
        //             msg:'hellow 张三'
        //         }
        //     }
        // })

        // 第三种方式
        var app =  new Vue({
            data(){
                return{
                    msg:'hellow 张三'
                }
            }
        }).$mount('#app')

    </script>
</body>
</html>

在挂载成功后可以通过app.$el来访问该元素

<!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, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{msg}}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var app =  new Vue({
            data(){
                return{
                    msg:'hellow 张三',
                }
            }
        }).$mount('#app')
        console.log(app.msg);//hellow 张三
        console.log(app.$el);//<div id="app">hellow 张三</div>
        app.msg = 'hellow 李四'
        console.log(app.msg);//hellow 李四
    </script>
</body>
</html>