从零开始的vue学习笔记(一)
前言
项目要用vue.js,今天开始自学vue.js官方教程,记录下自己的学习摘要,方便后面查阅(此笔记按照学习天数,每天一篇)
Vue.js是什么
Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。
安装
直接<script>
引入
直接下载开发版的js文件,然后引入到html中,或者直接用cdn的js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
NPM
npm install vue
大型应用用npm安装管理(需要安装node.js环境),能很好地和诸如 webpack 或 Browserify 模块打包器配合使用
vue cli工具(命令行工具,暂且不学)
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。
Vue Devtools
在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用
初步介绍
概念
- 声明式渲染、模板语法、响应式、指令(前缀v-的特殊语法)、数据双向绑定
- 基础指令简介:
- 绑定(v-bind)
- 条件(v-if、v-else、v-else-if、v-show)
- 循环(v-for)
- 事件监听(v-on)
- 表单输入数据双向绑定(v-model)
- 组件化构建应用(抽象与复用、组件间prop通讯)