VUE2基本介绍

一、VUE概念

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

VUE的特点：

1.遵循MVVM模式

2.编码简介，提交小，运行效率高

3.本身只关注于UI，可以引入第三库库

VUE的两大特性

响应式编程、组件化

响应式的数据绑定

这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出响应。

这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。

组件化开发

Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。

组件化开发的优点：提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发。

VUE的基础使用

1.创建Vue实例
在使用Vue.js之前，我们需要先创建一个Vue实例。可以通过以下代码创建一个最简单的Vue实例：

new Vue({
  el: '#app',
  data(){
   return{ 
        message: 'Hello Vue!'
    }
  }
})

上述代码中，el属性指定了Vue实例的挂载点，即HTML中的一个DOM元素，而data属性定义了Vue实例中的数据

2.数据绑定
Vue.js提供了一种简洁的方式来实现数据绑定。通过在HTML模板中使用双花括号{{}}，我们可以将数据与DOM元素进行绑定。例如：

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

其中{{message}}为插值表达式，可以读取到data中的所有的属性