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

2024-10-02 16:13:11

一. 什么是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的导入:
<!--方式一: 本地-->
<script src="js/vue.js"></script>
<!--方式二: cdn-->
<script src="https://cn.vuejs.org/js/vue.min.js"></script>

插值表达式:
<div id="app">
    <!-- {{ }} 是插值表达式,中间的info是变量,可通过vue实例成员data赋值 -->
    <!-- 注意:插值表达式中可以写基础类型的数据,只有写变量时才能被data赋值 -->
    {{ info }}
    {{ 'info' }}  渲染到页面是: info
</div>

下载安装？

插值表达式

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

四、vue特点

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

1.虚拟DOM

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

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

<style type="text/css">
    [v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
    {{ msg }}
    // 如果没有斗篷指令隐藏属性，代码加载到这里num对应的值还没有加载出来，而当下面的num加载出来的时候，屏幕就会出现闪一下
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>
<!-- 避免页面闪烁-->

2.数据的双向绑定

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

代码案例：

<!-- 两个输入框内容会同时变化 -->
<input name="n1" type="text" v-model="v1">
<input name="n2" type="text" v-model="v1">
<script>
    new Vue({
        el: '#app',
        data: {
            v1: ''
        }
    })
</script>

3.单页面应用

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

4.数据驱动

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

上代码案例：

<div class="box" v-for="obj in goods">
            <img :src="obj.img" alt="">
            <p>{{ obj.title }}</p>
</div>
//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实例

<script>
    new Vue({
        // 实例成员
    })
</script>
<!--
 实例与页面挂载点(标签)一一对应
 一个页面中可以出现多个实例对应多个挂载点
 实例只操作挂载点内部内容
-->

六、实例成员

- 挂载点 | el

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

<body>
    <div id="app">

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app'  // 挂载点
    })
</script>

注意:

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

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

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

<div id="app">
    <p>{{ info }}</p>
    <p>{{ msg }}</p>
    <p>{{ }}</p>
    <p>{{num}}</p>
    <p>{{num + 10 * 2}}</p>
    <p>{{ msg.length + num }}</p>
    <p>{{ msg[4] }}</p>
    <p>{{ msg.split('')[4] }}</p>
    <p>[{ num }]</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            info: '信息',
            msg: 'message',
            num: 10,
        },
        // 控制vue插值表达式符合
        delimiters: ['[{', '}]'],
    })
</script>

- 数据 | data

<!--
1) data为vue环境(被挂载的标签内部)提供数据，采用字典{变量名:值}形式
2) 在插值表达式{{}}中，直接书写数据的key(变量名)来访问数据(值)
3) 在外部通过接收实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据
      app.$data.info
4) 在外部也可以通过实例变量app直接访问数据
     app.info
5)  在vue实例内部的方法methods中，使用变量，this.info (this其实就是等价于app)
-->
<body>
<div id="app">
    {{ info }}
    {{ 'info' }}
    <p>{{ num }}</p>
    <p>{{ result }}</p>
    <p>{{ arr }}</p>
    <p>{{ dic }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            info: 'message',
            num:100,
            result: true,
            arr: [1, 2, 3, 4, 5],
            dic: {
                name: 'xionger',
                age: 20
            }
        }
    })
</script>
<script>
    console.log(app);  // vue对象
    console.log(app.$data.info);  // message
    console.log(app.info);  // message
</script>

- 过滤器 | filters

<!--
 1) 过滤器本身就是处理数据的函数，可以将插值表达式中的数据作为参数传入过滤器函数进行处理，得到的函数返回值就是处理后的结果
 2) 过滤器使用语法 {{ ...变量 | 过滤器(...变量) }}
 3) 过滤器在实例中用filters成员提供
 4) 参数多传不处理,少传返回NaN
-->
<body>
    <div id="app">
        <!-- 插值表达式可以直接做简单的运算 -->
        <p>{{ num + 3.5 }}</p>
        <!--<p>{{ msg.split('')[5] }}</p>-->

        <p>{{ num | f1 }}</p>
        <p>{{ 10, 20 | f2(50, 80) }}</p>
        <p>{{ 10, 20,30 | f2(50, 80) }}</p>
        <p>{{ 10 | f2(50, 80) }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
          num: 100,
        },
        filters:{
            f1:function (num) {
                return num*2
            },
            f2:function (a,b,c,d) {
                return a+b+c+d
            }
        }
    })
</script>

- 方法 | methods

<!--
methods为事件提供实现体(函数)
与事件指令配合使用
-->
<style>
    .box { background-color: orange }
</style>
<div id='app'>
    <p class="box" v-on:click="pClick">测试</p>
    <p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            pClick () {
                // 点击测试
            },
            pOver () {
                // 悬浮测试
            }
        }
    })
</script>
<!-- v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->

- js对象(即字典)补充

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

- 插值表达式转义 | delimters

<!--
防止django的模板渲染语法与插值表达式冲突,前端通常会转义插值表达式的{{  }}
-->
<div id="app">
    {{ msg }}
    {[ msg ]}
</div>
<script>
new Vue({
    el: '#app',
    data: {
        msg: '12345'
    },
    // delimiters: ['{{', '}}'],
    delimiters: ['{[', ']}'],
})
</script>

- 计算属性 | computed

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

<!--
 1) computed是用来声明 方法属性(伪装成变量的方法) 的
 2) 声明的方法属性不能在data中出现
 3) 方法属性必须在页面中渲染使用，才会对该方法内部出现的所有变量进行监听
 4) 计算属性的值来源于监听方法的返回值
-->
<div id="app">
    姓：<input type="text" v-model="fName">
    名：<input type="text" v-model="lName">
    姓名：<b>{{ flName }}</b>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            fName: '',
            lName: '',
        },
        computed: {
            // flName 要在页面渲染
            flName(){
                // this.fName和this.lName是被监听的变量
                // 变量flName的值由函数的返回值决定
                return this.fName + this.lName;
            }
        }
    })
</script>

- 监听属性 | watch

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

<!--
1) watch是用来声明 方法属性 的
2) watch为data中已存在的属性设置监听事件
3) 监听的属性值发生改变，就会触发监听事件
4) 监听事件的方法返回值没有任何意义
-->
<body>
    <div id="app">
        姓名：<input type="text" v-model="fullName">
        姓：<b>{{ firstName }}</b>
        名：<b>{{ lastName }}</b>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            fullName:'',
            firstName:'',
            lastName:'',
        },
        watch:{
            fullName(){
                // 从data中拿到fullname进行操作
                namearr = this.fullName.split('');
                // 给data中的firstname和lastName赋值,渲染到插值表达式中
                this.firstName = namearr[0];
                this.lastName = namearr[1];
                // return 的值没有任何意义
            }
        }
    })
</script>

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

vue 对象添加或删除成员时无法实时更新的解决方法

前阵子将项目搬上Vue的时候偶遇一个突发问题当对象添加或删除成员时页面无法实时更新渲染,但是数组是正常的目测是ob没有监听到对象的成员有变化查看一些大家的求助回答是说ob监听的是数组length的变动对象默认没有length 新增成员时不会自增length 所以监听不到对象的变化最近大脑过于疲惫懒得看文档了... 不多废话解决方式直接上代码在实例内部可以用$set和$delete this.$set(this.age,'age',18); this.$delete(this.ag
vue中过滤器的用法

一.过滤器过滤器是vue中的一个特性,作用是用于对文本进行格式化的作用. 注意:在vue 1.0中有内置的过滤器,在2.0中去掉了内置过滤器,只有自定义过滤器二.使用位置过滤器只能应用在两个地方:双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持).例如:  <div>{{3 | addZero}}</div> <!--在v-bind中使用格式:v-bind:id="
vue定义私有过滤器和基本使用

私有过滤器和全局过滤器的方法和概念都相同,只是一个是全局都可以调用,而私有的只有自己可以调用, 全局过滤器点这里全局过滤器使用方法也和全局过滤器一致,只是定义的地方不同全局过滤器是在 script 中通过Vue.filter 定义私有过滤器定义方法: <script> let vm = new Vue({ el:'#app', data:{ }, filters: { // 当前实例私有的过滤器 } }) </script> 在vm实列中,有和 data 同级的 filte
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失,最近研究了一下这个问题的原因和解决办法,这里和大家分享一下. 1.闪现的原因这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况.因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue才会执行相应的JS代码. 2.解决的办法其实在了解了原因之后我们就有了大概的思路,既然是在JS执行之前会出
简单了解vue 插值表达式Mustache

一.本节说明用样例详细的说明插值表达式{{}}的使用,将模型数据插入到页面当中. 插值表达式为什么叫Mustache(英文:八字须)呢?看看{{内容}}的两个大括号像不像八字胡子呢! 二.怎么做 <div id="app" style="background-color:aquamarine">  <h2>{{firstName.length}}(使
vue基础语法之插值表达式详解

目录一.vscode插件介绍二.插值表达式介绍三.插值表达式示例1 四.插值表达式示例2 五.插值表达式注意点六.插值表达式补充总结一.vscode插件介绍在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击刷新,插件会帮我们自动进行刷新,是不是非常方便,提高了我们的开发效率,节省了我们每次修改代码都要点击一次刷新的操作. 安装步骤如下图所示:安装Live Se
vue实例成员插值表达式过滤器基础教程示例详解

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

目录本文总览 1.数值类型 2.布尔型 3.字符串 3.1 字符串字面值 3.2 字符串模板 4.数组 4.1 普通数组 4.2 原⽣类型数组 5.类型检测和类型转换 5.1 智能转换 5.2 is 与 !is 操作符 5.3 转换操作符: as 与 as? 总结本文总览上一篇学习了Kotlin基础语法知识,本篇开始会深入探讨一下Kotlin各个基础语法点.首先来熟悉Kotlin的数据类型和类型转换版块. 1.数值类型在Kotlin中提供了数值类型: 整数类型:Byte,Short,In
vue3中的透传attributes教程示例详解

目录引言绑定样式对象数组透传的attributes 透传 attributes 之样式绑定透传 attributes 之事件绑定特殊1:组件嵌套特殊2:禁用透传attributes 特殊3:在 javascript 中访问透传的attributes 总结引言最近两年都是在使用 react 进行项目开发,看技术博客都是针对 react 和 javaScript 高级方面的,对 vue 的知识基本上遗忘的差不多了.最近开始慢慢回顾 vue 的知识以及对新的语法进行学习,为后面的计
node.js中Util模块作用教程示例详解

目录从类型判断说起严格相等 Error First & Promise 调试与输出从类型判断说起在 JavaScript 中,进行变量的类型校验是一个非常令人头疼的事,如果只是简单的使用 typeof 会到各种各样的问题. 举几个简单的: console.log(typeof null) // 'object' console.log(typeof new Array) // 'object' console.log(typeof new String) // 'object' 后来,大
C语言指针教程示例详解

目录指针内存指针类型指针运算二级指针指针数组指针指针提供了对地址操作的一种方法,因此,使用指针可使得 C 语言能够更高效地实现对计算机底层硬件的操作.另外,通过指针可以更便捷地操作数组.在一定意义上可以说,指针是 C 语言的精髓. 概念解释就不去搬原定义了,又臭又长不好理解,精炼两点就是: 1.指针是内存中的一个最小单元的编号,也就是地址: 2.平时我们说的指针,通常是指指针变量,用来存储内存地址的变量也就是说:指针就是地址,口语中指针通常是指针变量内存要搞明白指针首先要搞
C语言数据结构顺序表中的增删改(头插头删)教程示例详解

目录头插操作头删操作小结头插操作继上一章内容(C语言数据结构顺序表中的增删改教程示例详解),继续讲讲顺序表的基础操作. 和尾插不一样,尾插出手阔绰直接的开空间,咱头插能开吗?好像没听说过哪个接口可以在数据前面开一片空间吧,那我们思路就只有一个了——挪数据.那应该从第一位开始挪吗?注意,这和 memcpy 函数机制是一样的,并不意味着后面数据一起挪动,也不会彼此独立,而是相互影响,挪动的数据会对后面数据进行覆盖. 那我们的逻辑就应该是从后往前挪,那我们就直接定一个下标,指向这段空间的最后
webpack 5.68.0版本教程示例详解

目录起步 1. 基本安装 2. 配置出入口 plugin 1. html-webpack-plugin 2. progress-bar-webpack-plugin loader 1. css-loader与style-loader 2. url-loader与file-loader 3. sass-loader 4. postcss-loader 5. babel-loader 搭建环境 1. 开发环境与生产环境 2. 配置别名代码分离 1. webpack-bundle-analyzer
MySql数据类型教程示例详解

目录 1.简要概述 2. MySQL数据类型详解 1) 字符串类型 2) 整数类型 3)浮点数类型 4)日期/时间类型 1.简要概述为什么要开通MySQL这个学习板块呢?因为这是一名数据分析师必要的一项技能.分析数据什么最重要?当然是数据,既然如此!在数据呈现爆发式增长的年代,怎么能够不学学数据库呢?其实这也是很多读者朋友希望看到的,也是他们建议我写的. 难者不会,会者不难!其实网上很多MySQL的总结文章,不可否认,知识点写的都很全,但是呢!这个只是会使用MySQL数据库的朋友的一个查询手册
Go语言基础反射示例详解

目录概述语法一.基本操作二.修改目标对象三.动态调用方法总结示例概述在程序运行期对程序动态的进行访问和修改 reflect godoc: https://golang.org/pkg/reflect/ reflect包有两个数据类型: Type:数据类型 [reflect.TypeOf():是获取Type的方法] Value:值的类型[reflect.ValueOf():是获取Value的方法] 语法一.基本操作获取变量类型 func TypeOf(i interface{
Go gRPC环境安装教程示例详解

目录前言安装 protobuf 安装相关包创建并编译proto文件 VSCode-proto3插件介绍前言 gRPC 是一个高性能.开源和通用的 RPC 框架,面向移动和 HTTP/2 设计,带来诸如双向流.流控.头部压缩.单 TCP 连接上的多复用请求等特.这些特性使得其在移动设备上表现更好,更省电和节省空间占用. 在 gRPC 里客户端应用可以像调用本地对象一样直接调用另一台不同的机器上服务端应用的方法,使得您能够更容易地创建分布式应用和服务. gRPC 默认使用 protocol