vue基础

前端开发规范流程

目录构建规范

1. src 源代码开发目录，也是我们编程人员主要的操作目录，我们大部分代码都在里面

2. config 配置目录 webpack/gulp的配置目录

3. script 脚本命令启动目录

   • env.js 项目的环境配置文件
   • dev.js 开发环境
   • prod.js 生产环境

4. public/static 静态资源开发目录 - 不会经过webpack编译的目录

5. assets 静态资源开发目录 - 会经过webpack编译的目录

   • img
     • <4k 图片可以转换为base64(前端性能优化的方案)
     • >4K 只会经过webpack压缩、编译一下

6. components 组件

   • 组件是一个 html css js img 等的一个聚合体

7. lib 插件 比如jq

8. pages 页面

   • home首页
   • category 分类
   • list 列表
   • login
   • register

9. routes 路由配置

10. utils 封装模块

11. doc

    • 后端接口文档
    • 产品经理的文案
    • 项目的开发流程规范

12. test

    • 测试目录

    • 测试你的代码质量

前端环境

1. 生产环境 - 代码经过打包、压缩、编译
2. 开发环境 - 代码没有经过打包、压缩
3. 测试环境
4. 预上线环境
5. 上线环境
6. 其他环境

OOCSS命名规范

案例： Bootstrap

js命名方式

1. 变量
   • num
   • nickName
   • nick_name
2. 常量
   • NUM
   • GET_DATA
3. 函数名
   • fn
   • checkNum
4. 类
   • Person
   • BannerList

MV* 模式

随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（ MV* ）

M  Model      数据层
V  View       视图层
C  Controller 控制器 ( 业务逻辑 )        MVC
P  Presenter  提出者（ Controller 改名得来的 ） MVP
VM ViewModel  视图模型（ 业务逻辑  VM 是 由  P 改名得来的） MVVM

1. 前端MVC最从是由后端MVC演变过来的
2. 为什么前端要引入MVC?
   • 为了项目的更新和维护
   • 减轻视图的压力
   • 为了更好的解决从服务器获取数据困难
   • 为了更好的解决用户在视图中输入的数据如何更好的后台进行交互
3. MVC
4. MVP
   M
   V
   P
   这里p是中间人，是链接M 和 V 的桥梁，但是P在两者之间的关系是公平的
5. MVVM
   M
   V
   VM
   这里VM是视图模型，这里VM也是沟通M 和 V的桥梁，但是VM和V的关系更加的亲近

进入Vue的学习

Vue如何使用？

• 直接通过script标签对引入 【 基础时 】
• 还可以通过npm安装使用 【 高级 】

模板语法

mustache 语法(双大括号语法)

​ 1.语法支持度:

​ - 研究它对js语法、数据类型的支持度

​ - 语法

​ - 流程控制

​ - 条件判断

​ - 循环

​ - 三目运算符

​ - 数据类型

​ - 经过输出我们发现数据类型可行

	<div id="app">
        <p> str {{ str }} </p>
        <p> number {{ num }} </p>
        <p> null: {{ nul }} </p>
        <p> undefine: {{ und }} </p>
        <p> boolean: {{ bool }} </p>
        <p> function: {{ fn() }} </p>
        <p> arr: {{ arr[0] }} </p>
        <p> object: {{ obj.name }} </p>
        <hr>
        <p> 语法： {{ nul?1:2 }} </p>
        <p> 语法： {{ nul && 1 || 2 }} </p>
        <hr>
        <p v-html = "str"></p>
    </div>

​ 2. 写法

​ - 内容： 我们要加 {{}}

​ - 属性： 我们不加 {{}}

​ - 属性要想使用，我们必须依靠一个知识点： 指令

指令

2014年Vue1.0x问世，它借鉴了当前热火的angular的一个概念： 指令

指令是用来操作DOM的

指令其实就是封装的函数，这个函数绑定在元素身上， 那么久可以获取元素，然后就可以操作这个元素了

Vue也是MVC的衍生框架，所以它采用类似的方案

但是属性可以随意定义,但是我们希望我们添加的属性有vue标识，所以vue给它自定义的属性加了一个表示

这个标识就是 v-

指令展示

vue这边给我们提供了一些已经封装好的常用指令

-数据展示 
    <p> {{ info }} </p>
    <p v-html = "xml"> </p>
    <p v-text = "info"> </p>
		项目： v-text 和  {{}}，我们选择 {{}}
-条件渲染 
    - 单路分支
        v-if
    -双路分支
        v-if
        v-else
    -多路分支
        v-if
        v-else-if
        v-else
-条件展示
        v-show
        
    v-if的单路分支效果和 v-show 一样 
    面试： v-if  vs v-show  有何区别呢？
    v-if控制的元素的存在与否
    v-show控制的事元素的display: none 属性
    性能的差别： 
        当初始条件都为false时，v-show的初始渲染开销较高
        当频繁切换时，v-if的切换开销较高 
    项目中： 
        频繁切换： v-show
        切换不频繁： v-if
        
-对象渲染 
        v-for
-单项数据绑定 
        v-bind
        ：（简写）
-双向数据绑定
    	v-model
    		- 作用范围： 表单元素，因为它默认绑定了 value
        	- 经验： 看到表单元素，直接上v-model
-用来显示原始 Mustache 标签
    	v-pre
-只渲染元素和组件一次
    	v-once
-保持在元素上直到关联实例结束编译
    	v-cloak