vue实例成员 插值表达式 过滤器基础教程示例详解

目录

• 一. 什么是Vue
• 二.为什么学Vue
• 三.如何使用Vue
• 下载安装？
• 插值表达式
• 四、vue特点
• 1.虚拟DOM
• 2.数据的双向绑定
• 3.单页面应用
• 4.数据驱动
• 五、Vue实例
• 六、实例成员
• - 挂载点 | el
• - 自定义插值表达式括号| delimiters
• - 数据 | data
• - 过滤器 | filters
• - 方法 | methods
• - js对象(即字典)补充
• - 插值表达式转义 | delimters
• - 计算属性 | computed
• - 监听属性 | watch

一. 什么是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的导入:

插值表达式:

    
    
    {{ 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 }}
    

以上就是vue实例成员 插值表达式 过滤器基础教程示例详解的详细内容，更多关于vue实例成员 插值表达式 过滤器教程的资料请关注脚本之家其它相关文章！