vue使用,及指令介绍,计算属性/过滤器

原创已于 2023-07-20 18:47:55 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2021-04-08 22:33:54 首次发布

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨Vue.js的核心概念，包括MVVM模式、单页面应用原理、指令系统（如v-if、v-for、v-bind、v-model）、生命周期钩子函数、计算属性、以及事件处理。此外，还介绍了如何处理数组、对象的绑定，以及使用v-pre、v-once和v-cloak等指令。文章最后讨论了Vue的事件修饰符、过滤器的使用，并展示了计算属性与方法的区别以及如何实现双向数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(意思是靠数据作为驱动的)，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网:https://cn.vuejs.org/

下载安装
在这里插入图片描述
下载开发管理
下载后的js文件,引入页面即可使用
Vs Code中Vue代码格式插件，Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置链接

mvvm

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。

在 MVVM 概念中：

View 表示当前页面所渲染的 DOM 结构。
Model 表示当前页面渲染时所依赖的数据源。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。

vue的单页面原理

vue 实现单页面应用：原理是通过匹配不同的 hash值实现页面内容的切换

    hash: url 路径中的一部分   获取方式location.hash

<div id="wrap">
    单页面应用
</div>
<script>
    //  获取dom对象
    let wrap = document.querySelector('#wrap')
        //  获取hash值
    let path = location.hash.substring(1);
    console.log(path);
    if (path == 'page1') {
        wrap.innerHTML = '<h1>这是page1页面</h1>'
    } else if (path == 'page2') {
        wrap.innerHTML = '<h1>这是page2页面</h1>'
    }
</script>

在这里插入图片描述

Vue的使用

vue的基本结构
1. 引入vue的源文件
2. 在页面中必须创建一个标签，作为vue的挂载点, 该标签必须使用id属性
3. 进行初始化

vue 的插值语法： {{变量名}}
例如 <p>{{msg}}</p>
vue 的数据通常都是在data属性中进行存储

 <div id="app">
         <p>{{msg}}</p>
         <p>{{num}}</p>
         <ul>
             <!--  vue 的指令 v-for 列表渲染（循环） -->
             <li v-for="item in list">{{item}}</li>
         </ul>
     </div>
     <script src="./js/vue.js"></script>
     <script>
        //   创建vue实例对象
         const app = new Vue({
            //   el 属性设置挂载点
            el:'#app',
            // data 属性 存放数据
            data:{
                msg:'hello world',
                num:1000,
                list:['张三','李四','王五','张柳']
            }
         })
     </script>

在这里插入图片描述

挂载点：
1. 通过el属性设置挂载点
2. 通过$mount()方法设置挂载点

<body>
    <div id="app">{{msg}}</div>
</body>
<script src="./js/vue.js"></script>
<script>
    //   1 创建一个vue的实例化对象
    const app = new Vue({
        // el:'#app', (1)el
        data: {
            msg: 'hello vue',
        }
    }).$mount('#app')//(2)$mount
</script>

vue 中的常用的指令： *为常用程度
v-for ** 列表循环 v-for=“item in 数组或对象名”
v-if **
v-else **
v-else-if **
v-html *
v-text *
v-on ** 绑定事件简写@
v-bind ** 绑定属性简写：
v-model ** 绑定表单元素(双向数据绑定)
v-slot **插槽
v-show * 控制元素的出现和隐藏

v-once 跳过编译，没有表达式
v-once : 执行一次，没有表达式
v-cloak ：防止闪烁，没有表达式，需要结合css 的 display:none 一起使用

指令介绍：

自定义指令链接
vue 可以插值：
1. 使用{{}}
2. v-html : 插入标签可以识别标签
3. v-text : 插入文本不能识别标签

指令的语法：

<标签名>{{data中的key}}</标签名>
<标签名 v-html=‘data中的key’></标签名>
<标签名 v-text=‘data中的key’></标签名>

vue的条件渲染：类似于 js中的 if-else 语句

     v-if
      v-else-if
     v-else 后边没有表达式

指令语法：

<标签名 v-if=‘data中的key(条件会自动转换为true/false)’></标签名>
<标签名 v-else-if=‘data中的key(条件会自动转换为true/false)’></标签名>
<标签名 v-else></标签名>

        <body>
    <div id="app">
        <div>{{msg}}</div>
        <div v-text='msg'></div>
        <div v-html='str'></div>
        <hr>
        <br>
        <ul v-if='num>10'>
            <li v-for='item in list'>{{item}}</li>
        </ul>
        <p v-else-if='num==10'>统计人数： {{list.length}}人</p>
        <p v-else>
            暂未人员名单
        </p>

    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    app = new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            str: '<strong>这是一个标签</strong>',
            num: 1,
            list: ['张三', '李四', '王五', '张柳']
        }
    })
</script> 
当num的值改变(这里是手动改,演示),执行对应的内容

vue 的列表渲染： v-for

v-for 可以遍历数组，对象，还有具体的值
语法结构：
遍历数组：
<标签名 v-for=‘item in arr’>{{item}}</标签名>
<标签名 v-for=‘(item, index) in arr’>{{item}} {{index}}</标签名>

     遍历对象：
         <标签名 v-for='value in obj'>{{value}}</标签名>
         <标签名 v-for='(value, key) in obj'>{{value}}  {{key}}</标签名>
         <标签名 v-for='(value, key, index) in obj'>{{value}}  {{key}}  {{index}}</标签名>

  <h2 v-for="item in 10">{{item}}</h2>//输出0到10的每一位2数

<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            movie: [{
                name: '刺杀小说家',
                time: '120分钟'
            }, {
                name: '你好，李焕英',
                time: '150分钟'
            }, {
                name: '拆弹专家2',
                time: '110分钟'
            }],
            person: {
                name: '张三',
                age: 18,
                hobby: '唱歌'
            }
        }
    })
</script>

遍历数组时有两个参数item,index

<ul>
            <li v-for='(item,index) in movie'>
                <p>{{index}}</p>
                <strong>{{item.name}}</strong>
                <em>{{item.time}}</em>
            </li>
        </ul>

在这里插入图片描述
遍历对象时有三个参数item,key,index(常用前两个)

 <ul>
            <li v-for='(item,key,index) in person'>
                <strong>{{item}}</strong>
                <em>{{key}}</em>
                <p>{{index}}</p>
            </li>
        </ul>

在这里插入图片描述
一个标签上可以同时绑定多个指令，但是 v-if 和 v-for 不建议在同一个标签上使用(东西少时不会出错)
v-if 嵌套 v-for 使用

 <div id="app">
        <ul v-if='movie.length'>
            <li v-for='item in movie'>{{item.name}} === {{item.time}}</li>
        </ul>
        <p v-else>
            暂无电影
        </p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                movie: [
                    {
                        name: '刺杀小说家',
                        time: '120分钟'
                    }, {
                        name: '你好，李焕英',
                        time: '150分钟'
                    }, {
                        name: '拆弹专家2',
                        time: '110分钟'
                    }
                ]
            }
        })
    </script>

在使用v-for进行循环时,他默认使用就地更新的策略,这样就会出问题

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute(属性)：加上这串属性在代码中不会有体现

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

然后注意:不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

v-for和v-if同时使用时:
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中,所以，不推荐v-if和v-for同时使用

v-if和 v-show的区别

v-if : 条件渲染；可以控制标签(元素)的出现和隐藏；原理：通过DOM的创建和销毁来实现
v-show: 控制元素的出现和隐藏；原理：通过 css样式 display:none 实现元素的出现和隐藏

<body>
    <div id="app">
        <p v-if='flag'>{{msg}}</p>
        <em v-show='flag'>{{zhao}}</em>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: '这是v-if下的产物',
            zhao: '这是v-show下的产物',
            flag: false
        }
    })
</script>

在这里插入图片描述
使用场景：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-on 事件绑定：

    <标签名 v-on:事件名='methods中的方法名（就是具体的事件处理程序）'> </标签名>
    vue 的事件处理程序都在 vue中的methods属性中

    修改 vue  data中的数据，直接通过 this.key 进行修改和获取，不需要添加 data

<body>
    <div id="app">
        <p>{{msg}}</p>
        <button v-on:click='changeMsg'>点击修改内容</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        //  el 属性： 设置挂载点
        el: "#app",
        //  data 属性 ： vue数据
        data: {
            msg: 'hello world'
        },
        //  methods 属性： vue 的方法
        methods: {
            changeMsg() {
                //  使用data中的数据，直接通过 this.key 获取即可
                console.log(this.msg);
                this.msg = '新的值'
            }
        }
    })
</script>

在这里插入图片描述

vue 的事件可以使用简写形式： v-on: 整体简写为 @
v-on:click=‘方法名’ 简写后 @click=‘方法名’

  <div id="app">
        <!-- <button v-on:click='changeState'>切换状态</button> -->
        <button @click='changeState'>切换状态</button>
        <h1 v-if='show'>显示和隐藏</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods:{
                changeState(){
                    // if(this.show){
                    //      this.show = false;
                    // }else{
                    //     this.show = true;
                    // }
                    this.show = !this.show;
                    (原来的写法是这样,可以简写为取反)                   
                }
            }

        })
    </script>
</body>

v-bind 绑定属性

1 绑定行内样式：
<标签名 v-bind:style=‘{样式属性名:绑定data中的样式属性值, …}’>绑定单一样式</标签名>
<标签名 v-bind:style=‘绑定data中的样式对象名’>直接绑定样式对象</标签名>
<标签名 v-bind:style=‘[绑定data中的样式对象1, 绑定data中的样式对象2, …]’>通过数组绑定多个样式对象</标签名>

2 v-bind 绑定标签的属性:
可以绑定标签固有的属性，也可以绑定自定义属性
<标签名 v-bind:属性名=‘data中的key’></标签名>

绑定类名 class

<div id="app">
        <p style="color:red">字体显示红色</p>
        <!--  绑定样式的第一种方式 ： 通过绑定样式属性值， 使用对象的形式  -->
        <p v-bind:style='{color:color, fontSize:fontSize}'>红色50px</p>
        <hr>
        <!--   绑定样式的第二种方式 ： 直接绑定样式对象       -->
        <span v-bind:style='{color:styleObj.color, fontSize:styleObj.fontSize}'>整体绑定</span>
        <span v-bind:style='styleObj'>整体绑定</span>
        <h1 v-bind:style='[styleObj, bc]'>使用数组的形式绑定样式</h1>
        <hr>
         <!-- 绑定类名    这里是title  tab(自定义的) -->
        <p v-bind:title="msg">提示信息</p>
        <p v-bind:title="msg" v-bind:tab='index'>提示信息</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                color: 'red',
                fontSize: '30px',
                styleObj: {
                    color: 'red',
                    fontSize: '30px',
                    border: '1px solid red'
                },
                bc: {
                    backgroundColor: 'orange',
                    width: '500px',
                    height: '60px'
                },
                msg: '这是p标签',
                index: 100
            }
        })
    </script>

当他有多个类名时,
v-bind:class=‘[className, text]
当他标签上存在固定的类名, 同时也要还绑定类名
v-bind:class=’[“bd”, className]’

 data:{
                className:'list',这里面用到的样式应该是提前写好的
                text:'text'
            }

    <style>
        .list{
            color:red;
            font-size: 50px;
        }
        .text{
            width:500px;
            height: 200px;
            background-color: pink;
        }
        .bd{
            border:10px dotted green;
        }
        .active {
            color: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--  绑定一个类名 -->
        <p v-bind:class='className'>绑定一个类名</p>
        <!--  绑定多个类名 使用数组的形式 -->
        <p v-bind:class='[className, text]'>绑定一个类名</p>
        <!-- 标签上存在固定的类名, 同时也要还绑定类名   -->
        <!--  这种写法可以生效的， 但是不建议使用 -->
        <!-- <p class="bd" v-bind:class='className'>内容 这种写法可以生效的， 但是不建议使用</p> -->
        <p v-bind:class='["bd", className]'>固定类名和动态类名</p>
		<!-- 动态绑定类名 ： 类名是否添加有条件决定  使用对象的形式 {key:value} 对象的key就是动态绑定的类名，
		对象value就是条件，条件中的data中key -->
        <h1 v-bind:class="{active: isActive}">hello world</h1>
        <!-- 综合应用  -->
        <h2 :class='["bd", className, {active:isActive}]'>绑定类名综合用法</h2>
        //绑定本来就存在的类名+后来添加的类名+动态绑定类名
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                className:'list',
                text:'text',
                 isActive:true
            }
        })
    </script>

Vue数据绑定img标签的src属性，需要用require包裹
例如 require("@/assets/zhao/img/cone/cone1.png")

Vue v-for循环解决img标签的src动态绑定问题?
如果图片的地址需要拼接 //cdn.cmread.com/co0240.jpg
这样写

  <img :src="`https:${items.image}`" alt="" />

<span class="boxs"   v-bind:style="{ background: item.colors }" ></span>

动态绑定类名：还可以动态绑定类名，如上

v-bind绑定属性 可以简写形式： v-bind: 整体简写 为 :

vue的事件命令可以传参，动态绑定类名里面可以做简单判断
下面是vue实现tab切换的例子，具体可以看实例

 <li v-for='(item, index) in tabContent'
  v-on:click='changeCont(index)' //事件传参index
  :class="{current:isActive === index}"//动态绑定的判断
  >
       {{item.nav}}
  </li>

Vue之v-bind类名与样式绑定
 vue动态绑定类名
 Vue2/Vue3中在css中使用js的变量（scss也适用）超链接

处理数组绑定

方法都要写在 methods里面
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在vue官网里vm代表实例，Vue代表全局对象
需求：点击添加数组末尾加上，删除减去，点击每一个li，里面的值都能加5（但是正常写加5并没有生效）

<body>
    <div id="app">
        <button v-on:click='add'>添加数组</button>
        <button v-on:click='remove'>删除数组</button>
        <ul>
            <li v-for='(item, index) in arr' v-on:click='sum(item, index)'>{{item}}</li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                arr: [10, 11, 12, 13]
            },
            methods: {
                add() {
                    this.arr.push(100)
                },
                remove() {
                    this.arr.pop() //pop()数组的末尾取下一个元素
                },
                sum(value, index) {
                    console.log(value, index);
                    //  直接修改数组中的值为什么没有生效？   不能直接修改， vue不会监听到数组中的值的改变
                    // this.arr[index]  = value + 5;
                      要想修改数组中的某个值，需要通过 vm.$set() 实现 
                     向响应式对象中添加一个 property（属性），并确保这个新 property 同样是响应式的，且触发视图更新。
                    //  通过 vm.$set( target, propertyName/index, value )
                    /* 
                        参数解析：
                        {Object | Array} target
                        {string | number} propertyName/index
                        {any} value   any任意的
                    */
                    this.$set(this.arr, index, value + 5)
                    //      更新目标结构,更新位置,更新值
                }
            }
        })
    </script>
</body>

v-model双向数据绑定

v-model : vue 的双向数据绑定绑定的是 form表单元素
通过v-model绑定表单元素可以获取用户输入的值
例如 v-model='msg' msg 就是用户输入的值
注意: input输入框 v-model 和 value

vue数据双向绑定是通过数据劫持来实现的，解说：https://www.cnblogs.com/canfoo/p/6891868.html

<body>
    <div id="app">
        <input type="text" v-on:blur="getMsg" v-model='msg'>
    </div>//输入框失去焦点时获取到值
</body>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: "" //  v-model='msg' msg 就是用户输入的值 
        },
        //方法
        methods: {
            getMsg() {
                console.log(this.msg);
            }
        }
    })
</script>

事件修饰符可以有多个

   <标签名 v-on:事件名.事件修饰符='methods中的方法名'></标签名>

需求:按下回车键打印输入框内容

<body>
    <div id="app">
        <!-- <input type="text" v-model='msg'  v-on:keydown="addArr" > -->
        <input type="text" v-model='msg' v-on:keydown.enter="addArr">
        //enter换为13,同样生效
        <div>
            <ul>
                <li v-for='item in list'>{{item}}</li>
            </ul>
        </div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: "",//v-model='msg' msg 就是用户输入的值 
            list: []
        },
        methods: {
            addArr(e) {
                // console.log(e);
                // 第一种写法通过keyCode是否按下回车键实现
                // if (e.keyCode == 13) {
                //     this.list.push(this.msg)
                //     this.msg = ''
                // }
                //第二种写法 通过修饰符 事件的修饰符
                this.list.push(this.msg)
                 this.msg = ''
            }
        }
    })
</script>

<!--  绑定单个复选框： 绑定一个布尔值   必须在vue的实例中data定义 checked:true  -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

原理:当v-model中的条件为真时是选中状态
效果:选中为true反之false
在这里插入图片描述

绑定多个复选框

<body>
    <div id="app">
        <input type="checkbox" v-model='msg' value="篮球">篮球
        <input type="checkbox" v-model='msg' value="音乐">音乐
        <input type="checkbox" v-model='msg' value="足球">足球
        <p>爱好的名字:{{msg}}</p>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: []
        },
    })
</script>

在这里插入图片描述

v-model的修饰符
number 将用户输入的值转为数值类型
trim

<input type="number" v-model.number="yi">比如00012变成12
 <input type="number" v-model.trim="yi"> 去除首尾空格

template标签类似一个容器包裹着要显示的标签,可以在标签里面写条件
解决了 v-if 和v-for共在一个标签的不规范现象
注意:template标签不能绑定 key(key是解决v-for循环时就地更新的问题,),因为它是不存在的元素
要绑定key必须给页面中存在的元素

< ul v-if='todolist.length'>
                    <template v-for='(item, index) in todolist'>
                    <li 
                        :key='item.title'   
                        @click='todone(index)'                    
                    >
                        <input type="checkbox"   v-model='item.done'> {{item.title}}
                        <button @click.stop='todoRemove(index)'>删除</button>
                    </li>
                </template>
  </ul>

阻止事件冒泡
给事件的后面加.stop

<button @click.stop='todoRemove(index)'>删除</button>

created 生命周期钩子函数

vue 的生命周期钩子函数： created

  <div id="app">
         <!-- <p>{{msg}}</p> -->
     </div>

     <script src="./js/vue.js"></script>
     <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
     <script>
         const app = new Vue({
             el:"#app",
             data:{
                 msg:'hello'
             },
             beforeCreate(){
                console.log('创建之前。。。。');                
             },
            //   页面加载完成 发送请求   一般都是在 created 或者 mounted 钩子函数中进行 
             created(){
                //  console.log('创建完成');       
                axios.get('https://cnodejs.org/api/v1/topics').then(res => {
                    console.log(res.data.data);
                    
                })         
             },
             beforeMount(){
                console.log('挂在前。。。');                
             },
             mounted(){
                console.log('挂在后');
             },
             beforeUpdate(){
                console.log('更新前。。。。。。。。。');
             },
             updated(){
                console.log('更新后');
             },
             beforeDestroy(){
                console.log('销毁前。。。。。。！！！！');
             },
             destroyed(){
                console.log('销毁后');
             }
             
         })
     </script>

computed计算属性

vue 计算属性 computed：本质是依然属性 ; 但是计算属性是一个函数

{{}} 可以识别一些简单的js表达式

如果牵扯到复杂的属性，vue建议使用计算属性来代替；计算属性的用法和普通数据的用法一样，
但是计算属性必须通过return返回数据

<body>
    
    <div id="app">
        <!-- <p>{{msg.split('').reverse().join('')}}</p>复杂逻辑用计算属性 -->
        <p>{{str}}</p>//euv olleh
        <p>{{msg}}</p>//hello vue

        <strong>{{count}}</strong>//100
    </div>
    <script src='./js/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'hello vue' 
            },
            //  计算属性：处理复杂的逻辑
            computed:{
                str(){
                    //  处理相关的逻辑
                    // return 'hello world 123'
                    return this.msg.split('').reverse().join('')
                },
                count(){
                    return 100;
                }
            }
        })

        // let str = 'hello';
        // let res = str.split('').reverse().join()
    </script>

计算属性传参的方式(通过闭包实现的)

    <div id="app">
        <P>{{str('vue传参')}}</P>
        <!-- 输出hello vue传参 -->
    </div>
</body>
<script src='./js/vue.js'></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: 'hello '
        },
        //  计算属性：
        computed: {
            str() {
                return function(val) {
                    return this.msg + val
                }
            }

        }
    })
</script>

计算属性和方法的区别：

计算属性和方法的区别:别人总结

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

<div id="app">
 <p>{{time()}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
    /* 
    

    
    
        */
    const app = new Vue({
        el:'#app',
        computed:{
            // time(){
            //     return Date.now()
            // }
        },
        methods:{
            time(){
                return Date.now()
            }
        }
    })
</script>

效果:调用计算属性,输出现在的时间,无论输出多少次每次都输出同一个值

而调用方法,输出的值,每输出一次就调用一次方法,所以输出的值会改变

计算属性的setter属性和getter属性

计算属性的setter属性和getter属性：默认只有 getter ；getter和setter对应的是方法
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter(反向设置)：

<!-- 
    计算属性的setter属性和getter属性： 默认只有 getter ；getter和setter对应的是方法
    计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

    let num = 100;  //设置 set 
    console.log(num) //输出 get

 -->
 <div id="app">
     <p>{{str123}}</p>
     <em>{{msg}}</em>
 </div>
 <script src="./js/vue.js"></script>
 <script>
     const app = new Vue({
         el:'#app',
         data:{
            msg:'hello vue',
            val:'初始值'
         },
         computed:{
            //   通常情况是直接一个函数
            //  str123(){
            //      return this.msg.split('').reverse().join('')
            //  }

            //  设置 getter 和 setter 需要使用对象的形式 
            str123:{
            //  getter属性
                get(){
                    //  返回的是 data中定义好的变量
                    return this.val;
                }
                //  setter属性
                set(value){
                    //  一定要有一个变量进行接受设置的值， 需要在data中进行定义
                    this.val = value;
                    // this.val = 'hello world'
                },
                
            }
         }
     })
 </script>

在这里插入图片描述

v-pre/v-once/v-cloak用法

v-pre 指令：不需要表达式；跳过该元素和其子元素的编译过程
v-once ：不需要表达式；只渲染元素和组件一次；随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
v-cloak: 不能单独使用，必须结合css样式一起使用的;
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <p>{{msg}}</p>
        <p v-pre> {{msg}}</p> -->
        <!-- v-pre  不需要表达式； 跳过该元素和其子元素的编译过程 ,你写什么就输出什么-->
        <p>{{msg}}</p>
        <p v-once> {{msg}}</p>
        <!-- v-once  不需要表达式； 不需要表达式 ； 只渲染元素和组件一次；下次在渲染还是这个-->
        <hr>
        <!-- <p><em>{{msg}}</em></p>//刷新页面会出现短暂花括号
        <p><strong v-cloak>{{msg}}</strong></p> -->//加了v-cloak就算是刷新短暂卡顿什么都不出现也不会出现花括号(前提属性写好)
    </div>
</body>
<script src="./js/vue.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "hello world"
        }
    })
</script>

在这里插入图片描述

过滤器的使用 filters

过滤器要写 filters 里面

vue 过滤器：也是一个函数；
有两个使用场景：在插值语法中{{}} 或 v-bind 指令中使用
通过管道符 | 进行使用 {{value | filter }} 或者 v-bind:attr=‘value | filter’

过滤器默认接受的参数（第一个参数，不需要传参）就是要过滤的值，就是过滤器前边的数

    过滤器可以接受多个参数, 默认的第一个参数是 要过滤的值

    过滤器可以同时存在多个。此时按照从左到右的顺序依次解析；上一次解析的结果作为下一次解析的数据（链式传递）

<body>
    <div id="app">
        <p>{{msg|reverseMsg}}</p>
        <hr>
        <p>{{msg| toCase("你好")}}</p>
        <hr>
        <!-- 全局测试区 -->
        <p>{{msg|splitMsg}}</p>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
 //  一个全局的过滤器 , 必须要在创建 Vue 实例之前全局定义过滤器：
    //全局过滤器是filter
    Vue.filter('splitMsg', (value) => {
        return value.split('') //[ "h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d" ]
    })
    const app = new Vue({
        el: "#app",
        data: {
            msg: 'hello world'
        },
        //过滤器要写 filters里面
        filters: {
            reverseMsg(value) {
                return value //hello world
            },
            toCase(value, str) {
                return (value + str); //hello world你好
            }

        }
    })
</script>

多个过滤器的使用

过滤器可以同时存在多个。此时按照从左到右的顺序依次解析；上一次解析的结果作为下一次解析的数据（链式传递）

<body>
    <div id="app">
        <p>{{msg|Bookname|author}}</p>
        <!--页面显示 《 猫和老鼠》类型动画片 -->
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: '猫和老鼠'
        },
        filters: {
            Bookname(value) {
                return `《 ${value}》` //《 猫和老鼠》
            },
            author(value) {
                console.log(value); //《 猫和老鼠》
                return value + '类型动画片' //《 猫和老鼠》类型动画片
            }

        }
    })
</script>