Vue基础（二）--模板和过滤器

川长思鸟来 2023-06-11 06:28 6阅读 0赞

### 模板 ###

#### 1.简介 ####

Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据  
模板就是\{ \{\}\}，用来进行数据绑定，显示在页面中  
也称为Mustache语法(双大括号)。

#### 2. 数据绑定的方式 ####

**a.双向绑定**  
双向绑定可以使用 v-model ，这里常用在输入框等地方。

**b.单向绑定**  
方式1：使用双大括号即可，但是可能会出现闪烁的问题，可以使用 **v-cloak** 来解决。

*  用法：  
    这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 \[v-cloak\] \{ display: none \} 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
 *  示例：

<!doctype html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <link href="../css/mui.min.css" rel="stylesheet" />
            <style>
                /* 必须配置css样式，否则不生效 */
                [v-cloak]{
                    display: none;
                }
            </style>
        </head>
    
        <body>
            <div class="mui-content" id="content">
                <h3>解决双大括号闪烁的问题:
                <span v-cloak>{
       {msg}}</span>
                </h3>
            </div>
            <script src="../js/vue.js"></script>
            <script src="../js/mui.min.js"></script>
            <script type="text/javascript">
                mui.init();
                var vm=new Vue({
                    el:"#content",
                    data:{
                        msg:"利用v-cloak指令，需配置css样式"
                    },
                    created:function(){
                        //这个是vue生命周期里开始创建的方法
                        alert("延时一下，看闪烁效果");
                    }
                })
            </script>
        </body>
    
    </html>

方式2：使用v-text,v-html

#### 3. 其他指令 ####

*  v-once  
    只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>This will never change: {
       {msg}}</span>
    
    <div v-once>
      <h1>comment</h1>
      <p>{
       {msg}}</p>
    </div>
    
    <my-component v-once :comment="msg"></my-component>
    
    <ul>
      <li v-for="i in list" v-once>{
       {i}}</li>
    </ul>

*  v-pre  
    跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{
       { this will not be compiled }}</span>

### 过滤器 ###

#### 1. 简介 ####

用来过滤模型数据，在显示之前进行数据处理和筛选。  
语法：\{ \{data | filter1(参数) | filter2(参数)\}\}

#### 2.自定义过滤器 ####

{
       { message | capitalize }}
    
    
    <div v-bind:id="rawId | formatId"></div>

可以在一个组件的选项中定义本地的过滤器：

filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })
    
    new Vue({
      // ...
    })

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。  
过滤器可以串联：

{
       { message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。  
过滤器是 JavaScript 函数，因此可以接收参数：

{
       { message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

示例：

<!doctype html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <link href="../css/mui.min.css" rel="stylesheet" />
        </head>
    
        <body>
            <div class="mui-content" id="content">
                <h3>{
       {8 | addZero}}</h3>
                
                <h3>{
       {66.8935462 | formatNumber(5,'这是四舍五入')}}</h3>
                
                <h3>{
       {currentTime | formatTime}}</h3>
            </div>
            <script src="../js/mui.min.js"></script>
            <script src="../js/vue.js"></script>
            <script type="text/javascript">
                mui.init();
                // 自定义全局过滤器
                Vue.filter('addZero',function(data){
                    console.log(data);
                    return data<10?'0'+data:data;
                })
                Vue.filter('formatNumber',function(data,n,msg){
                    console.log(data,n,msg);
                    return msg+data.toFixed(n);//toFixed方法有bug,不准，建议自己写
                })
                var vm=new Vue({
                    el:"#content",
                    data:{
                        currentTime:Date.now()
                    },
                    filters:{
                        //局部过滤器
                        formatTime:function(data){
                            console.log(data);
                            var d=new Date(data);
                            return d.getFullYear()+"-"+d.getMonth()+"-"+d.getDay()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
                        }
                    }
                })
            </script>
        </body>
    
    </html>

原创不易，转载请注明出处。