框架(framework):有着自己的语法特点、都有对应的各个模块。
库(library):专注于一点。
框架的好处:
提到代码的质量,开发速度
提高代码的复用率
降低模块之间的耦合度(高内聚低耦合)
UI:user interface
GUI:graphical user interface
CLI:command line interface
API:application interface
思维模式的转换:从操作DOM的思维模式 切换到以数据为主。
是一个渐进式的构建用户界面的js框架
小到的简单的表单处理,大到复杂的数据操作比较频繁的单页面应用程序
方便阅读的中文文档
容易上手 (学习曲线比较缓和)
体积小
基于组件化的开发方式
代码的可读性、可维护性得到了提高
工作方式:可以通过丰富的指令扩展模板,可以通过各种各样的插件来增强功能
方式1
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
安装依赖
$ cd my-project
$ npm install
$ npm run dev
方式2
直接引入对应的js文件
mustache(胡子)/interpolation(插值表达式)
语法:
<any>{{表达式}}</any>
作用:将表达式执行的结果 输出当调用元素的innerHTML中;还可以将数据绑定到视图。
基本语法1:
<any v-for="tmp in array"></any>
基本语法2:
<any v-for="(value,index) in array"></any>
作用:在遍历array这个集合时,将临时变量保存在tmp中,创建多个any标签。
语法:
<any v-if="表达式"></any>
<any v-else-if="表达式"></any>
<any v-else="表达式"></any>
作用:根据表达式执行结果的真假,来决定是否要将当前的这个元素,挂载到DOM树。
语法:
<any v-on:eventName="handleEvent"></any>
作用:给指定的元素 将handleEvent的方法绑定给指定eventName事件。