vue简介，插值表达式，过滤器

时间 2020-02-12

标签 vue 简介插值表达式过滤器繁體版

原文原文链接

目录html

VUE框架介绍

VUE框架介绍

what?什么是vue？

渐进式 javaScript框架前端

渐进式？：能够经过vue控制某个标签，那么一个网页能够把因此内容写进一个标签，就能够经过vue控制整个页面。
渐进式：能够控制一个页面的一个标签，也能够控制一系列标签，也能够控制整个页面，甚至能够控制整个前台项目

why?为何要学习vue？

为何：为了先后端彻底分离开发vue

三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM
能够彻底脱离服务器端，之前端代码复用的方式渲染整个页面：组件化开发


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

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

special特色？

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

how如何使用？

开发版本：vue.jsjava

生产版本：vue.min.jspython

<div id="app">
    {{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app'
    })
</script>

下载安装？

导入方式？

导入js文件同样，用cdn或者本地导入web

<!-- cdn导入 -->
 <script src="https://cn.vuejs.org/js/vue.js"></script>
<!--    本地导入-->
<script src="js/vue.js"></script>

挂在点el

el: 挂载点
* 1）一个挂载点只能控制一个页面结构（优先匹配到的结构）
* 2）挂载点挂载的页面标签严格建议用id属性进行匹配（id名字通常习惯用app），由于id惟一的特色
* 3）html标签与body标签不能做为挂载点（html和body标签不能够被替换，组件中详细介绍）
* 4）是否接受vue对象，是外界是否要只有vue对象的内容决定的

<div id="app">
    <div class="d1">
        {{ num }}
    </div>
    <div class="d1">
        {{ num }}
    </div>
</div>
<div id="main">
    {{ n }}
</div>

<script>
 var app = new Vue({
     el: '#app',
     data: {
         num: 100
     }
 });
 console.log(app.$data.num, app.num);
 new Vue({
     el: '#main',
     data: {
         n: app.num
     }
 });
</script>

插值表达式

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

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>

过滤器

过滤器
     * 1）用实例成员filters来定义过滤器
     * 2）在页面结构中，用 | 来标识使用过滤器
     * 3）过滤方法的返回值就是过滤器过滤后的结果
     * 4）过滤器能够对1~n个变量进行过滤，同时还能够传入辅助的变量，
     *      过滤器方法接受参数是安装传入的位置前后

<body>
    <div id="app">
        <!-- 简单使用：过滤的对象会做为参数传给过滤器 -->
        <p>{{ num | add(20) }}</p>
        <!-- 串联使用：将第一个过滤器结果做为参数给第二个过滤器 -->
        <p>{{ num | add(100) | jump(2) }}</p>
        <!-- 究极使用 -->
        <p>{{ n1, n2 | fn(99, 77) }}</p>
        <!-- 你品，你细品 -->
        <p>{{ n1, n2 | fn(99, 77), n1, n2 | fn(100) }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            n1: 66,
            n2: 88
        },
        filters: {
            add: function (a, b) {
                console.log(a, b);
                return a + b;
            },
            jump: function (a, b) {
                return a * b
            },
            fn: function (a, b, c, d) {
                console.log(a, b, c, d);
                return a + b + c + d;
            }
        }
    })
</script>