初识 vue 和实例创建
库和框架
??通用 JavaScript 库提供适应任何需求的功能。所有通用库都致力于通过将常用功能封装为新 API ,来补偿浏览器接口、弥补实现差异,例如 jQuery 就是对原生 js 的 DOM 进行了一系列封装的一个库。 ??框架(framework )涵盖各种不同的模式,但各自具有不同的组织形式,用于搭建复杂应用程序。框架对常见的任务提供了稳健的实现机制,比如组件定义及重用、控制数据流、路由,等等。在框架中使用各种库和插件都是非常常见的现象,框架本身就是为了大型项目的工程化而被创造的。
Vue 概述
??我们现在通常所说的 Vue ,是指 Vue 全家桶,例如 Vue 的核心语法 vue.js ,@vue/cli 脚手架,vue-x 状态管理,vue-router 路由,axios 库,element-ui/antd 插件,webpack 打包工具, node 环境,npm 管理,es6 语法等各种工具、库和插件的综合使用。
为什么要学 Vue ?
??JavaScript 框架越来越多地表现为单页应用程序(SPA,Single Page Application )。 SPA 使用 HTML5 浏览器历史 API ,在只加载一个页面的情况下通过 URL 路由提供完整的应用程序用户界面。与此同时,原生的 js 不支持组件化,框架在应用程序运行期间负责管理应用程序的状态以及用户界面组件,组件的使用能够复用并提升原生 js 的性能。vue 的强大在于对于各种工具的使用和代码的封装,极大地提升了开发人员的效率。
Vue 的特点
??①Vue 的一个特点就是组件化开发。Vue 可以自定义组件(标签),封装了里面的 html 、css 和 js ,直接就可以使用,且不会产生逻辑冲突。
??②Vue 对于原生的 js 性能有了很大提升,需要知道的是 DOM 操作在 js 中是非常消耗性能的一步操作(因为它需要去遍历整个页面),而在 Vue 中它不需要进行大量的 DOM 操作。
??③Vue 提倡的是数据与视图分离,数据的变化推动视图的变化(这里的数据包括一切的文本,内容等)。
Vue 中的一句真理
??所有需要进行变动的数据必须以变量的形式存储。当你没有思路的时候,就想想这句话。
Vue 实例创建
Vue 引入
??使用 <script> 元素,将 Vue 版本文件以 src 属性引入(一般来说,有开发和生产两个版本)。可以使用本地文件、CDN 引入或者 npm 商店的方式引入,这里不再过多阐述。
创建 Vue 实例
??引入 Vue 之后,我们可以使用 new Vue() 方法创建一个 Vue 实例,它接收一个对象当参数。
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app"></div>
<script>
const app = new Vue({
el: "#app",
data:{}
});
</script>
说明: ??Vue 实例中的 el 属性可以被叫作挂载点,接收一个字符串类型,可以使用 css 类的选择器去选择挂载的元素,一般来说,使用的是 id (其实这里也可以用 DOM 操作通过 id 名来获取元素)。挂载点表示 vue.js 对该元素及里面的元素生效,挂载点中的元素使用 vue,js 的语法会被有效的识别并编译成原生的 js 代码(挂载点是必须的,用于需要 Vue 管理的元素)。
??Vue 实例中的 data 属性可以被称作数据,接收一个对象值。数据是 vue 中非常重要的一环,因为 vue 的一大特点就是数据与视图分离,数据的变化推动视图的变化。 ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??
|