Vue.js 学习笔记（三）过滤器、实例及选项

2023-09-24 20:18:21

一、过滤器

1. 定义过滤器：对即将显示的数据做进一步筛选

全局过滤器

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h3>{{viewContent | addNamePrefix}}</h3>
</div>
<script>
    /*定义全局过滤器
    Vue.filter('过滤器名称',function(value[,value2,...]){
//逻辑代码
    })
    也可以用箭头函数，则应变化为如下代码
    =>箭头函数，相当于function(value){...}，并且对value值做了处理
    addNamePrefix是过滤器的名字，也是管道符后边的处理函数；value是参数
    */
    Vue.filter("addNamePrefix",(value)=>{
        return "my name is" + value
    })
    var vm = new Vue({
        el:"#app",
        data:{
            viewContent:"贝西"
        }
    })
</script>
</body>
</html>

箭头函数相当于匿名函数，并且简化了函数定义。
例如：

x => x * x

上面的箭头函数相当于：

function (x) {
    return x * x;
}

或者有多条语句，多个参数时

(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

局部过滤器
单个参数

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--文本后边需要添加管道符号（ | ）作为分隔，管道符 | 后边是文本的处理函数，
    处理函数的第一个参数是：管道符前边的——文本内容，即price，如果处理函数上边传递参数，则从第二个参数依次往后是传递的参数。-->
    <p>电脑价格：{{price | addPriceIcon}}</p>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            price:200
        },
        filters:{
            //处理函数
            addPriceIcon(value){
                console.log(value)//200
                return '¥' + value;
            }
        }
    })
</script>
</body>
</html>

多个参数

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--过滤器接收多个参数-->
    <span>{{value1|multiple(value2,value3)}}</span>
</div>
<script>
    /*定义局部过滤器
    new Vue({
        filters:{
            '过滤器名称':function(value1[,value2,...]){
                //逻辑代码
            }
        }
    })
    * */
    var vm = new Vue({
            el: '#app',
                data: {
                    msg: 'hello',
                    value1:10,
                    value2:20,
                    value3:30
                },
        //局部过滤器
        filters: {
            'multiple': function (value1, value2, value3) {
                return value1*value2*value3
            }
        }
    })
</script>
</body>
</html>

使用地方
双花括号：<div>{{数据属性名称|过滤器名称(参数值}}</div>
v-bind：<div v-bind:id="数据属性名称|过滤器名称(参数值)"></div>

二、实例及选项

1. 实例

Vue通过构造函数来实例化一个Vue对象：var vm=new Vue({…})
在实例化时，我们会传入一些选项对象，包含数据选项、属性选项、方法选项等常用选项。

2. 选项

数据选项：建立绑定后，DOM将与数据保持同步

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="UTF-8">
    <title>数据选项</title>
    <!--使用CDN方式引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        var values={
            message:'Hello Vue!',
            _name:'yanao'
        }
        var vm=new Vue({
            el:'#app',
            data:values
        })
        //通过$data来访问原始数据
        console.log(vm.$data===values);
        console.log(vm.message);
        console.log(vm.$data.message);
        //以‘_’或‘$’开头的属性不会被vue代理，可以使用vm.$data._property的方式访问属性
        console.log(vm._name);
        console.log(vm.$data._name);
    </script>
</body>
</html>

属性选项（prop）：使用它为组件注册动态属性

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
</head>
<body>
<div id="app">
    <message content='Hello World'></message>
</div>
</body>
<!-- 测试组件 -->
<script type="text/javascript">
<!--组件功能-->
    var Message = Vue.extend({
        //定义属性props
        props : ['content'],
        data : function(){return {
            a: 'it worked'
        }},
        //使用属性
        template : '<h1>{{content}}</h1><h1>{{a}}</h1>'
    })
    //注册message组件为Message
    Vue.component('message', Message)
    var vm = new Vue({
        el : '#app',
    })
</script>
</html>

方法选项（methods）：使用它来定义方法

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
</head>
<body>
<div id="app">
    <!--使用v-on监听事件-->
    <button v-on:click="test">点我</button>
</div>
</body>
<!-- 测试组件 -->
<script type="text/javascript">
    var vm = new Vue({
        el : '#app',
        //使用methods定义方法
        methods:{
            /*定义了一个test函数*/
            test: function () {
                //显示当前的时间
                console.log(new Date().toLocaleTimeString());
            }
        }
    })
</script>
</html>

计算属性（computed）：把新的数据缓存下来，只要依赖数据没有改变，则它调用的是缓存数据，这样就能提高数据提取的速度，而如果使用methods则每次都会重新计算

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <th>学科</th>
        <th>成绩</th>
        </thead>
        <tbody>
        <tr>
            <td>数学</td>
            <!--实时获取数据，计算结果随着数据改变而改变-->
            <td><input type="text" v-model.number="Math"></td>
        </tr>
        <tr>
            <td>英语</td>
            <td><input type="text" v-model.number="English"></td>
        </tr>
        <tr>
            <td>语文</td>
            <td><input type="text" v-model.number="Chinese"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td>{{sum}}</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{average}}</td>
        </tr>

        </tbody>
    </table>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            Math:66,
            English: 77,
            Chinese:88
        },
        computed:{
            <!-- 一个计算属性的getter -->
            sum:function(){
                <!-- this指向vm实例 -->
                return this.Math+ this.English+this.Chinese;
            },
            average:function(){
                return Math.round(this.sum/3);
            }
        }
    });
</script>
</body>
</html>

读取和设置值

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<script>
    var vm=new Vue({
        data:{a:1},
        computed:{
            //该函数只能读取数据，使用vm.aDouble即可读取数据
            aDouble:function (){
                return this.a*2;
            },
            //读取和设置数据
            aPlus:{
                get:function (){
                    return this.a+1;
                },
                set:function (v){
                    return this.a=v-1;
                }
            }
        }
    })
    //使用aPlus获取数据
    console.log(vm.aPlus);
    //设置数据
    vm.aPlus=4;
    console.log(vm.a);
    //读取数据
    console.log(vm.aDouble);
</script>
</body>
</html>

码农公寓

一、过滤器

1. 定义过滤器：对即将显示的数据做进一步筛选

二、实例及选项

1. 实例

2. 选项

相关文章