蓝鸥旗下品牌:鸥课学院
全国咨询电话:13152008057
您的位置: 首页 > 最新资讯 > 干货 | 前端工程师需掌握的 Vue 知识点大总结

干货 | 前端工程师需掌握的 Vue 知识点大总结

2018-09-27 蓝鸥
3925人 浏览:
一、框架和库的区别

框架(framework):有着自己的语法特点、都有对应的各个模块。

库(library):专注于一点。

框架的好处:

  • 提到代码的质量,开发速度

  • 提高代码的复用率

  • 降低模块之间的耦合度(高内聚低耦合)


UIuser interface

GUI:graphical user interface

CLI:command line interface

API:application interface

思维模式的转换:从操作DOM的思维模式 切换到以数据为主。



二、Vue概述


1、what

是一个渐进式的构建用户界面的js框架


2、where

小到的简单的表单处理,大到复杂的数据操作比较频繁的单页面应用程序


3、why
  • 方便阅读的中文文档

  • 容易上手 (学习曲线比较缓和)

  • 体积小

  • 基于组件化的开发方式

  • 代码的可读性、可维护性得到了提高


4、how

工作方式:可以通过丰富的指令扩展模板,可以通过各种各样的插件来增强功能


搭建环境


方式1

全局安装 vue-cli

$ npm install --global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

安装依赖

$ cd my-project

  $ npm install

  $ npm run dev

方式2

直接引入对应的js文件



三、Vue中基础知识


1、双花括号

mustache(胡子)/interpolation(插值表达式)

语法:

<any>{{表达式}}</any>

作用:将表达式执行的结果 输出当调用元素的innerHTML中;还可以将数据绑定到视图。


2、指令-循环指令

基本语法1:

<any v-for="tmp in array"></any>


基本语法2:

<any v-for="(value,index) in array"></any>

作用:在遍历array这个集合时,将临时变量保存在tmp中,创建多个any标签。


3、指令-选择指令

语法:

<any v-if="表达式"></any>

  <any v-else-if="表达式"></any>

  <any v-else="表达式"></any>

作用:根据表达式执行结果的真假,来决定是否要将当前的这个元素,挂载到DOM树。


4、指令-事件绑定

语法:

<any v-on:eventName="handleEvent"></any>

作用:给指定的元素 将handleEvent的方法绑定给指定eventName事件。


5、指令-属性绑定