IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue.js 基础学习篇(一)——初识 vue 和实例创建 -> 正文阅读

[JavaScript知识库]Vue.js 基础学习篇(一)——初识 vue 和实例创建

初识 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 可以自定义组件(标签),封装了里面的 htmlcssjs,直接就可以使用,且不会产生逻辑冲突。

??②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", // document.getElementById("#app") 等效
     data:{}
   });
  </script>

说明:
??Vue 实例中的 el 属性可以被叫作挂载点,接收一个字符串类型,可以使用 css 类的选择器去选择挂载的元素,一般来说,使用的是 id(其实这里也可以用 DOM 操作通过 id 名来获取元素)。挂载点表示 vue.js 对该元素及里面的元素生效,挂载点中的元素使用 vue,js 的语法会被有效的识别并编译成原生的 js 代码(挂载点是必须的,用于需要 Vue 管理的元素)。

??Vue 实例中的 data 属性可以被称作数据,接收一个对象值。数据是 vue 中非常重要的一环,因为 vue 的一大特点就是数据与视图分离,数据的变化推动视图的变化。
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??
??

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-27 16:07:20  更:2021-07-27 16:09:02 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/4 14:44:37-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码