Vue基础介绍

一、Vue基本介绍

1、Vue.js目前最火的的一个前端框架，三大主流前端框架之一。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层。

2、Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。

3、提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。

vue是用来构建用户界面的渐进式框架，可谓是后起之秀，生态完善。
特点：采用组件化模式，提高代码复用率，让代码更好的维护。
　　　声明式编码，让编码人员不需操作dom，提高开发效率。（心有灵犀）
　　　使用虚拟DOM（内存里的数据）+优秀的Diff算法，尽量复用DOM节点。

二、Vue下载和引入

下载

　　下载Vue.js文件到本地

　　https://cdn.jsdelivr.net/npm/vue/dist/vue.js

安装引入

　　<script>引入vue.js文件后，Vue被注册为一个全局的变量，是一个构造函数

三、Vue数据驱动模型

轻量级的以数据驱动的前端JS框架
js通过操作DOM来改变页面的显示，而Vue通过操作数据来实现页面的更新与展示。
虚拟的DOM
核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。
MVVM模式

M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图问的双向操作（无需开发人员干涉）

Vue实例

实例中，可以包含挂在元素（el），数据（data），模板（template），方法（methods）与生命周期钩子（created等）等选项
app.$el === document.getElementById(‘app’)

    <body>

        <!-- 将来的Vue实例会控制这个元素中所有内容 -->

        <!-- V（View），Vue实例所控制的这个元素区域 -->

        <div id="app">

            <!-- 通过Vue提供的指令，很方便就能把data里的数据渲染到页面，不用手动操作dom了

           （前端Vue之类的框架，不提倡去手动操作dom） -->

            <p>{{ msg }}</p>

        </div>

        <script>

            //导入包,就有Vue的构造函数

            //VM,这个new出来的vm对象,就是调度者

            var vm = new Vue({   //{}配置对象

                el:'#app',   //element,这个Vue实例要控制页面上的哪个区域

                data:{   //M,data就是用来保存当前页面数据的

                    msg:'欢迎学习Vue'

                }

            })

        </script>

    </body>

{undefined{}}插值表达式
插值，不仅可以插变量，还可以进行运算
{{'helloworld'.split('').reverse().join('')}}

Vue指令

v-model：用于双向绑定
v-text：用于更新绑定元素中的内容
v-html：用于更新绑定元素中的html内容
v-show：用于根据表达式的值的真假条件显示隐藏元素，切换元素的display CSS属性
v-if：用于根据表达式的值的真假条件渲染元素
v-for：用于遍历数据渲染元素或模板
v-on：用于在元素上绑定事件
v-bind：用于在元素属性上绑定数据 v-bind：可以简写成 :