Vue基础入门学习(一)

Leefs 2019-11-07 AM 5540℃ 3条

# Vue基础入门学习(一)

### 前言

作为对前端一窍不通的小编，受生活所迫，不得不入坑`VUE`，下面就从`VUE`最基础的东西开始慢慢入坑吧。。。

+ `Visual Studio Code`（小编编码使用软件）
+ `Shift+!:`快速生成头文件快捷键

### 1.创建VUE

1. 1.导入Vue的包

```vue
<script src="./lib/vue-2.6.0.js"></script>
```

2. 2.创建一个Vue的实例

```vue
<script>
    //2. 创建一个Vue的实例
    //当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数  
    var vm = new Vue({
        el:'#app',//表示，当前我们new的这个Vue实例，要控制页面上的哪个区域
        data:{// data 属性中，存放的是 el 中要用到的数据
            msg:'都来学习Java' //通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，
            //程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
        }
    })  
</script>
```

`el:`表示，当前我们new的这个Vue实例，要控制页面上的哪个区域

`data:`data 属性中，存放的是 el 中要用到的数据

3. 3.在页面上定义一个控制区域

```vue
   
   <div id="app">
       <p>{{msg}}</p>
   </div>
   ```

### 2.MVVM分析

1. 1.上述代码中的 new 出来的这个vm对象，就是 MVVM中的 VM 调度者

```html
 var vm = new Vue({
        el:'#app',
        data:{
            msg:'都来学习Java'
        }
    }) 
```

2. 2.Vue实例所控制的元素区域，就是 MVVM 中的V

```html
<div id="app">
    <p>{{msg}}</p>
</div>
```

3. 3.代码中的data 就是 MVVM中的 M,专门用来保存 每个页面的数据

```vue
data:{
	msg:'都来学习Java' 
}
```

标签: 前端, VUE

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://lilinchao.com/archives/133.html

上一篇 Thymeleaf表达式讲解(二)

下一篇 Vue基础入门学习(二)

Vue基础入门学习(一)

评论已关闭

栏目分类

标签云

友情链接申请

Vue基础入门学习(一)

评论已关闭

 栏目分类

标签云

友情链接申请

栏目分类

标签云

友情链接申请