vue简介，实例成员

Vue

一. 什么是Vue

渐进式 javaScript框架

可以独立完成前后端分离时 Web项目的JavaScript框架
渐进式：可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目

二.为什么学Vue

为什么：为了前后端完全分离开发

前端三大主流框架：Angular React Vue
Vue结合了其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用
# vue是js渐进式框架
# 根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目


1)Vue框架：前台界面，页面逻辑
    1）指令:（分支结构，循环结构...），复用页面结构等
    2）实例成员:（过滤器，监听），可以对渲染的数据做二次格式化
    3）组件:（模块的复用或组合），快速搭建页面
    4）项目开发

2)DRF框架：数据（接口）
    1）基础的模块：请求、响应、解析、渲染
    2）序列化、三大认证
    3）过滤、搜索、排序、分页
    4）异常、第三方jwt、restful接口规范
    
3）为什么学习vue：
    前台框架：Angular（庞大）、React（精通移动端）、Vue（吸取前两者优势，轻量级）
    Vue一手文档是中文
    实现前后台分离开发，节约开发成本

三.如何使用Vue

• 开发版本：vue.js
• 生产版本：vue.min.js

vue的导入:

插值表达式:

    
    
    {{ info }}  
    {{ 'info' }}  渲染到页面是: info

下载安装？

插值表达式

插值表达式
     * 1）空插值表达式：{{ }}
     * 2）中渲染的变量在data中可以初始化
     * 3）插值表达式可以进行简单运算与简单逻辑
     * 4）插值表达式符合冲突解决，用delimiters自定义（了解）

四、vue特点

虚拟DOM
数据的双向应用
单页面应用
数据驱动

1.虚拟DOM

就是改变屏幕卡顿（因为加载顺序，改变DOM树的结构），用斗篷指令v-cloak即可
原理：更深的原理就是改变DOM树的结构，就改变了浏览器的加载顺序。就避开了无畏的计算，提升了效率
    用虚拟DOM浏览器（斗篷指令），内部原理：告诉浏览器当前不是最终加载的结果，浏览器就会全部加载完之后放到JS中，一次性加载完

上代码案例：从上至下代码加载的顺序

    {{ msg }}
    // 如果没有斗篷指令隐藏属性，代码加载到这里num对应的值还没有加载出来，而当下面的num加载出来的时候，屏幕就会出现闪一下

2.数据的双向绑定

什么是数据的双向应用？
大白话：两个绑一个
需要用到表单指令，v-model，内部有一个监听机制。v-bind属性指令没有监听机制

代码案例：

3.单页面应用

什么是单页面应用？
大白话：网站实际就是一个页面，页面的跳转只是做了内容的局部替换。因为通过vue可以控制一个标签，一个标签下可以写很多的内容，渐进式

4.数据驱动

什么是数据举动？
大白话：根据数据做页面布局
原理：利用循环命令，渲染生成标签。就是说，如果没有数据，就没有标签，有多少数据就自动渲染多少标签。

上代码案例：

            
            
{{ obj.title }}

//goods就是模拟的虚拟数据
let goods = [
        {
            "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
            "title": "纯种拆家专家"
        },
        {
            "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
            "title": "纯种拆家专家"
        },
        {
            "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
            "title": "纯种拆家专家"
        }
    ];

五、Vue实例

六、实例成员

- 挂载点 | el

使vue与html页面结构建立关联


    


    

注意:
# 1) html标签与body标签不能作为挂载点
# 2) 一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识

- 自定义插值表达式括号| delimiters

// 控制vue插值表达式符合
        delimiters: ['[{', '}]'],

    
{{ info }}
    
{{ msg }}
    
{{ }}
    
{{num}}
    
{{num + 10 * 2}}
    
{{ msg.length + num }}
    
{{ msg[4] }}
    
{{ msg.split('')[4] }}
    
[{ num }]

- 数据 | data

    {{ info }}
    {{ 'info' }}
    
{{ num }}
    
{{ result }}
    
{{ arr }}
    
{{ dic }}

- 过滤器 | filters

    

        
        
{{ num + 3.5 }}
        

        
{{ num | f1 }}
        
{{ 10, 20 | f2(50, 80) }}
        
{{ 10, 20,30 | f2(50, 80) }}
        
{{ 10 | f2(50, 80) }}
    

- 方法 | methods

    
测试
    
测试

- js对象(即字典)补充

let b = 20;
let dic = {
    a: 10,  // 字典本身就是对象，key都是字符串形式可以省略引号
    b  // 值为变量时，且与key同名，可以简写
};
console.log(dic)

- 插值表达式转义 | delimters

    {{ msg }}
    {[ msg ]}


 

- 计算属性 | computed

一个变量的值依赖多个变量(多变一)，且依赖的任意一个变量发生改变，该变量都会改变

    姓：
    名：
    姓名：{{ flName }}  

- 监听属性 | watch

多个变量的值依赖一个变量(一变多)，该变量发生改变，所有依赖变量都会改变

    

        姓名：
        姓：{{ firstName }}
        名：{{ lastName }}