首页 > 资讯 > 前端开发 > JavaScript >vue实例成员插值表达式过滤器基础教程示例详解

959

分享到

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

2024-04-02 19:04:59 959人浏览安东尼

摘要

目录一. 什么是Vue二.为什么学Vue三.如何使用Vue下载安装？插值表达式四、vue特点1.虚拟DOM2.数据的双向绑定3.单页面应用4.数据驱动五、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的导入:
<!--方式一: 本地-->
<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实例成员插值表达式过滤器教程的资料请关注编程网其它相关文章！

--结束END--

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

本文链接: https://lsjlt.com/news/146338.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

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

目录

一. 什么是Vue

二.为什么学Vue

三.如何使用Vue

下载安装？

插值表达式

四、vue特点

1.虚拟DOM

2.数据的双向绑定

3.单页面应用

4.数据驱动

五、Vue实例

六、实例成员

- 挂载点 | el

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

- 数据 | data

- 过滤器 | filters

- 方法 | methods

- js对象(即字典)补充

- 插值表达式转义 | delimters

- 计算属性 | computed

- 监听属性 | watch

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

vue基础语法之插值表达式详解

Java中正则表达式匹配过程实例详解

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

写给小白学习的地理信息的表示法GeoJSON

vue使用Swiper踩坑解决避坑

JavaScrip简单数据类型隐式转换的实现

细说JS数组遍历的一些细节及实现

初学者如何快速搭建Express开发系统步骤详解

深入浅出JavaScript前端中的设计模式

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

目录

一. 什么是Vue

二.为什么学Vue

三.如何使用Vue

下载安装？

插值表达式

四、vue特点

1.虚拟DOM

2.数据的双向绑定

3.单页面应用

4.数据驱动

五、Vue实例

六、实例成员

- 挂载点 | el

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

- 数据 | data

- 过滤器 | filters

- 方法 | methods

- js对象(即字典)补充

- 插值表达式转义 | delimters

- 计算属性 | computed

- 监听属性 | watch

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