当前位置:主页 > 网页前端 > vue >

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

时间:2023-02-28 11:47:37 | 栏目: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>

您可能感兴趣的文章:

相关文章