VUE学习笔记1-- MVVM设计思想 / Vue 基础

杨蛋蛋~R

于 2020-10-27 20:35:23 发布

阅读量175

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_50119334/article/details/109318797

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue 基础

MVVM设计思想

M: model （模型，就是data里面的数据）
V: view（试图，就是缩写的模板，也就是DOM元素）
VM: View-Model（前面两者的结合）

简介

是一种javascript 框架
简化DOM操作
响应式数据驱动（页面是由数据生成的，当数据改变以后，页面会同步更新）

第一个Vue程序

官方文档：http://cn.vuejs.org

导入开发版本的Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

创建 Vue 实例对象，设置 el 属性和 data 属性
使用简介的模板语法把数据渲染到页面上
例：

<body>
    <div id="app">
        {{message}}
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello Vue!"
            }
        })
    </script>
</body>

el：挂载点

el 是用于设置 Vue 实例挂载（管理）的元素

Vue实例的作用范围是：
Vue 会管理 el 选项命中的元素及其内部的后代元素
关于选择器
可以使用其他的选择器，但是建议用 id 选择器
关于设置其他 dom 元素
可以设置其他的双标签（单标签不可，因为无法嵌套），但是不能使用HTML 和 body

data:数据对象

Vue 中用到的数据定义在data中，
data中可以写复杂类型的数据
例：

<body>
    <div id="app">
        {{message}}
        <!-- 获取对象中的某个值 -->
        <h2>{{school.name}}</h2>
        <!-- 获取数组中的某个值 -->
        <ul>
            <li>{{city[0]}}</li>
            <li>{{city[1]}}</li>
        </ul>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "yangdandan",
                school: {
                    name: 'AHUT',
                    mobile: 123456,
                },
                city: ['anhui', 'maanshan']
            }
        })
    </script>
</body>

杨蛋蛋~R

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习笔记1-- MVVM设计思想 / Vue 基础

Vue 基础简介是一种javascript 框架简化DOM操作响应式数据驱动（页面是由数据生成的，当数据改变以后，页面会同步更新）第一个Vue程序官方文档：http://cn.vuejs.org导入开发版本的Vue.js<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者：<!-- 生产环境版
复制链接

扫一扫