二、VUE初体验

二、VUE初体验

vue官网地址：https://cn.vuejs.org/

1、什么是vue？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式javascript框架

它是以数据驱动和组件化的思想构建的,与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。其核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2、vue的特点

渐进式框架

-w633

如果只使用 Vue 最基础的声明式渲染的功能，则完全可以把 Vue 当做一个模板引擎来使用
如果想以组件化开发方式进行开发，则可以进一步使用 Vue 里面的组件系统
如果要制作 SPA（单页应用），则可以使用 Vue 里面的客户端路由功能
如果组件越来越多，需要共享一些数据，则可以使用 Vue 里的状态管理
如果想在团队里执行统一的开发流程或规范，则使用构建工具

所以，可以根据项目的复杂度来自主选择使用 Vue 里面的功能。

数据驱动

Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新.

在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery

MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染 M（model）：普通的javascript数据对象 V（view）：前端展示页面 VM（ViewModel）：用于双向绑定数据与页面，对于我们的课程来说，就是vue的实例

3、VUE核心功能

基础功能：页面渲染、表单处理提交、帮我们管理DOM(虚拟DOM)节点

组件化开发：增强代码的复用能力，复杂系统代码维护更简单

前端路由：更流畅的的用户体验、灵活的在页面切换已渲染组件的显示，不需与后端做多余的交互

状态集中管理：MVVM响应式模型基础上实现多组件之间的状态数据同步与管理

前端工程化：结合webpack等前端打包工具，管理多种静态资源，代码，测试，发布等，整合前端大型项目。

4、体验vue代码

开发工具：Visual Studio Code

常用插件：

Auto Rename Tag：能够自动更改结束标签
Live Server：自动搭建本地服务器
Prettier - Code formatter：代码美化
Vetur：但vue组件格式支持
vscode-icons：美化文件图标

5、快速上手

<body>
    <div id="app">
        <a v-bind:href="link">{{title}}</a>
        <input type="text" v-model="link">

        <button @click="fn1()">点击</button>
    </div>
</body>
<script src="../libs/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            link:"http://www.yanhongzhi.com",
            title:"闫老师的博客"
        },
        methods:{
            fn1(){
                alert(this.title);
            }
        }
    })
</script>

Mr.Yan

Vue实战（二）-- Vue初体验