Vue：开发环境搭建与初识Vue

马尔盖云

已于 2022-07-28 19:07:35 修改

阅读量294

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-07-28 15:37:50 首次发布

本文链接：https://blog.csdn.net/maergaiyun/article/details/126036266

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.1 Vue开发环境搭建

安装Vue-devtools
1. ~~克隆gitee项目（存在浏览器版本不兼容问题)~~
```
git clone https://gitee.com/wen_zhao/devtools.git
```
2. ~~切换到add-remote-devtools分支~~
```
git checkout -b add-remote-devtools origin/add-remote-devtools
```
3. ~~安装依赖~~
```
cnpm i
```
4. 打包
```
npm run build
```
5. 在chrome浏览器中添加扩展程序
解决浏览器警告提醒
- 全局配置设置关闭
```
Vue.config.productionTip = false
```

1.2 第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
</div>
<script>
    Vue.config.productionTip = false
    var app = new Vue({
        el: '#app',     // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
        data: {         // 用于储存数据，数据供el指定的容器使用
            message: 'first vue',
        },
    });

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

注意
1. 一个vue实例只能接管一个容器
2. 插值语法{{}}可以读取到data的所有属性
3. data中数据发生变化时，容器中用到的数据会自动更新

1.3 模板语法

插值语法

用在标签体内容
指令语法

用在标签的解析（标签属性、标签体内容和绑定事件等）

1.4 双向数据绑定

单项数据绑定

只能从data流向页面
双向数据绑定

不仅可以从data流向页面，也能从页面表单元素（输入元素）流向data

1.5 MVVM模型在Vue中的使用

在这里插入图片描述

M

Model（模型），对应data的数据
V

View（视图），模板
VM

ViewModel（视图模型），Vue实例对象

1.6 数据代理

原理

通过一个对象代理另一个对象属性的读写

不使用数据代理

let obj1 = {
    a: "a"
}

let obj2 = {
    b: obj1.a
}

obj2.a = "2a"
console.log(obj2.a) // 2a
console.log(obj1.a) // a

使用数据代理

let obj1 = {
    a: "a"
}
let obj2 = {
    b: obj1.a
}

Object.defineProperty(obj2, "a", {
    get() {
        return obj1.a
    },
    set(value) {
        obj1.a = value
    }
})
    
obj2.a = "2a"
console.log(obj2.a)
console.log(obj1.a)

Vue中的数据代理
1. 通过Vue对象代理data/_data中的属性的读写
2. 可以更加方便的读写vue中的data的数据
3. 通过Object.defineProperty()把data中的属性添加到Vue对象上，每个属性都有setter/getter

马尔盖云

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue：开发环境搭建与初识Vue

不仅可以从data流向页面，也能从页面表单元素（输入元素）流向data。用在标签的解析（标签属性、标签体内容和绑定事件等）ViewModel（视图模型），Vue实例对象。Model（模型），对应data的数据。通过一个对象代理另一个对象属性的读写。在chrome浏览器中添加扩展程序。安装Vue-devtools。只能从data流向页面。View（视图），模板。.........
复制链接

扫一扫