使用ref操作DOM和过滤器的使用

使用ref操作DOM

https://cn.vuejs.org/v2/guide/components-edge-cases.html

在使用 jq 时，首要任务就是学习选择器的使用，因为选择可以极其方便帮助我们获取节点查找dom，因为我们要通过dom展示处理数据。而在Vue中，我们的编程理念发生了变化，变为了数据驱动dom；但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点；

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue compute</title>
    <!--这里因为方便，我直接使用cdn方式引入-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" @click='click' value="按钮"> <br>
        <!--定义ref组件ID-->
        <p ref="pv">123</p>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            click: function () {
                // 使用原生JS获取dom数据
                // var p = document.getElementsByTagName('p')[0].innerHTML;
                // console.log(p);

                // 使用vue ref 属性获取dom数据
                var d = this.$refs.pv.innerHTML;
                console.log(d);
            }
        }
    })
    console.log(app.$refs);
</script>
</html>

但是在项目开发中，尽可能不要这样做，因为从一定程度上，ref 违背的mvvm设计原则；

过滤器

https://cn.vuejs.org/v2/guide/filters.html

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

私有(局部)过滤器

过滤敏感词汇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue compute</title>
    <!--这里因为方便，我直接使用cdn方式引入-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg"> <br>
        {{msg|myFilters|get3}}
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            msg:''
        },
        //定义过滤器
        filters:{
            // 过滤器的名称及方法
            myFilters:function(val){
                return val.toLowerCase();
            },
            get3:function(val){
                // 遇到数字替换为 0
                // var reg = /d/g;
                // return val.replace(reg,0);

                return val.replace('麻痹','***');
            }
        }
    })
</script>
</html>

结果

全局过滤器

上面的代码中，myFilters 及 get3 两个过滤器，仅在当前 vue 实例中可用；如果在代码再次 var app2 = new Vue() 得到变量为 app2 的 vue 实例，则两个过滤器在 app2中都不可用；如果需要过滤器在所有实例对象中可用，我们需要声明 全局过滤器

Vue.filter(名称,处理器)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue compute</title>
    <!--这里因为方便，我直接使用cdn方式引入-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg"> <br>
        {{msg|myFilters|get3}}
    </div>
</body>
<script>
    Vue.filter('myFilters', function (val) {
        return val.toLowerCase();
    })
    // 定义两个全局过滤器
    Vue.filter('get3', function (val) {
        return val.replace('妈的','***');
    })


    // 两个Vue 实例
    var app = new Vue({
        el: '#app',
        data: {
            msg: ''
        }
    })
    var app2 = new Vue({
        el: '#app2',
        data: {
            msg: ''
        }
    })
</script>
</html>

结果