Vue

来源：互联网发布：java 注解用处编辑：程序博客网时间：2024/06/06 05:20

1.1简述Vue 概念

vue是一个构建用户界面的框架(库),它的目标是通过尽可能简单的api实现响应的数据绑定和组合的视图集合
vue自身不是一个全能框架的核心是只关注视图层,因此它非常容易学习，非常容易与其它库或已有项目整合
vue在与相关工具和支持库一起使用时, 也能完美地驱动复杂的单页应用,在之后的课程中,我们会配合webpack来使用

1.2Vue特点

1.2.1. 响应的数据绑定/响应式编程
保持状态和数据的同步

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作
DOM时，我们的代码常常是命令式的、重复的与易错的。
Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将
DOM“绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。
每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与
DOM更新搅在一起。这让我们的代码更容易撰写、理解与维护。

1.3. 为什么要用Vue.js

1.3.1.1. 轻量级的框架

只关注视图层,是一个构建数据驱动的视图集合,大小只有几十kb

1.3.1.2. 简单易学

国人开发,中文文档,不存在语言障碍,易于理解与学习

1.3.1.3. 双向数据绑定

保留了angular的优点
在数据操作方面变得更为简单,极大的解放了dom操作(通过属性绑定的形式来实现)

1.3.1.4. 组件化

保留了 react框架的优点
实现html的封装,重用,在构建单页面应用方面有独特的优势

1.3.1.5. 视图,数据,结构分离

使得数据的更改变得非常简单,不需要进行逻辑代码的修改,只需要操作数据就能够完成相关的操作

1.3.1.6. 虚拟DOM

dom操作是非常耗费性能的
不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom,只不过是换了另外一种方式

1.3.1.7. 运行速度更快

相比较react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势(了解)

1.3.2. 缺点/了解
1.3.2.1. 支持特性

作为一个新兴的前端框架,在支持特性方面存在一些问题浏览器端: 抛弃了对IE9以下版本的支持android: 4.2 + ios:　ios 7+

1.3.2.2. 前后端混合受限

在使用后端的 模板引擎渲染的项目中,vue会受到一定的限制vue只能和后端的模板文件混合在一起,获取的后端数据也依赖于后端的渲染,在处理json对象和数组的时候会很麻烦

1.4. MVVM模式简介

大致可以分为三个部分:

M: model,模型,在这里指的是数据模型
V: view,视图,在这里指的就是我们写的页面
VM ViewModel,是数据模型和视图连接的纽带(桥梁)
我们要把数据模型上面的数据绑定到视图上,要通过这个纽带(桥梁)来实现

1.5Vue的环境配置

兼容性提示： Vue.js 不支持 IE8 及其以下版本。

1.5.1 创建项目

vue init webpack-simple music
进入文件夹内部
cd music
下载依赖包
npm install
运行该项目
npm run dev

1.5.2. 实例

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title>Vue入门之Helloworld</title>        <!--第1步：引入Vue库-->        <script src="https://unpkg.com/vue/dist/vue.js"></script>    </head>    <body>        <!--第2步:  通过id属性设置视图的入口-->        <div id="app">            <!--Vue的模板的绑定数据的方法， 类似于很多其他前端的模板，可以用两对花括号进行绑定Vue中的数据对象的属性 -->            {{ message }}        </div>        <script>            //第3步：创建模型数据            var modelData = {                message: 'Hello Vue!'            }            //第4步: 创建vue对象            var app = new Vue({ // 创建Vue对象。Vue的核心对象。                el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器                data: modelData// data: 是Vue对象中绑定的数据模型            });        </script>    </body></html>

阅读全文

0 0