vue的入门/简介

时间：2022-06-03 14:31:37

vue 特点

1. 响应的数据绑定/响应式编程  2. 组件化

vue优点

1. 轻量级的框架  2. 简单易学 3. 双向数据绑定 4. 组件化 5. 视图,数据,结构分离 6. 虚拟DOM 7. 运行速度更快

vue缺点

作为一个新兴的前端框架,在支持特性方面存在一些问题

前后端混合受限

MVVM模式简介

1. M: model,模型,在这里指的是数据模型

2. V: view,视图,在这里指的就是我们写的页面

3. VM ViewModel,是数据模型和视图连接的纽带(桥梁)

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Vue入门之Helloworld</title>

        <!--第1步：引入Vue库-->

        <script src="https://unpkg.com/vue/dist/vue.js"></script>

    </head>

    <body>

        <!--第2步:  通过id属性设置视图的入口-->

        <div id="app">

            <!--Vue的模板的绑定数据的方法， 类似于很多其他前端的模板，可以用两对花括号进行绑定Vue中的数据对象的属性 -->

            {{ message }}

        </div>

        <script>

            //第3步：创建模型数据

            var modelData = {

                message: 'Hello Vue!'

            }

            //第4步: 创建vue对象

            var app = new Vue({ // 创建Vue对象。Vue的核心对象。

                el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器

                data: modelData// data: 是Vue对象中绑定的数据模型

            });

        </script>

    </body>

</html>

相关文章