vue之过滤器和生命周期——day02
过滤器：
概念：Vue.js 允许你自定义过滤器， 可被用作一些常见的文本格式化。过滤器可以用在两个地方： mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由”管道”符指示；
过滤器语法：
//过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据<br>Vue.filter('过滤器的名称', function(data){<br><br>})
全局过滤器：
<div id="app"><br> <!-- | 管道符，msgFomt是过滤器名称 --><br> <p>{{ msg | msgFomt}}</p><br></div><br><br><script><br> //定义一个全局的filter，名字叫msgFomt，传入msg参数<br> Vue.filter('msgFomt', function (msg) {<br> // 字符串的replace 方法,第一个参数，除了可写一个字符串之外,还可以定义正则表达式<br> return msg.replace(/我/g, "你")<br> })<br> <br> var vm = new Vue({<br> el: '#app',<br> data: {<br> msg: "我是一名学生，我爱学习，我爱祖国",<br> time: new Date<br> },<br> methods: {<br> }<br> })<br></script>
私有过滤器：
<script><br>var vm2 = new Vue({<br> el: '#app',<br> data: {<br> dt: new Date()<br> },<br> methods: {},<br> filters: { <br> // 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】<br> // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器<br> dateFormat: function (dateStr, pattern = '') {<br> // 根据给定的时间字符串，得到特定的时间<br> var dt = new Date(dateStr)<br><br> // yyyy-mm-dd<br> var y = dt.getFullYear()<br> var m = (dt.getMonth() + 1).toString().padStart(2, '0')<br> var d = dt.getDate().toString().padStart(2, '0')<br><br> if (pattern.toLowerCase() === 'yyyy-mm-dd') {<br> return ${y}-${m}-${d}<br> } else {<br> var hh = dt.getHours().toString().padStart(2, '0')<br> var mm = dt.getMinutes().toString().padStart(2, '0')<br> var ss = dt.getSeconds().toString().padStart(2, '0')<br><br> return ${y}-${m}-${d} ${hh}:${mm}:${ss}<br> }<br> }<br> }<br>})<br></script>
注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
vue生命周期：
- 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
- 生命周期钩子：就是生命周期事件的别名而已；
-
主要的生命周期函数分类：
-
创建期间的生命周期函数：
- beforeCreate ：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
- created ：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
- beforeMount ：此时已经完成了模板的编译，但是还没有挂载到页面中
- mounted ：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
-
运行期间的生命周期函数：
-
beforeUpdate ：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
-
updated ：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
-
销毁期间的生命周期函数：
-
beforeDestroy ：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed ：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
<script><br> // 创建 Vue 实例，得到 ViewModel<br> var vm = new Vue({<br> el: '#app',<br> data: {<br> msg: 'ok'<br> },<br> methods: {<br> show() {<br> console.log('执行了show方法')<br> }<br> },<br> beforeCreate() {<br> // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它<br> // console.log(this.msg)<br> // this.show()<br> // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化<br> },<br> <br> created() { <br> // 这是遇到的第二个生命周期函数<br> // console.log(this.msg)<br> // this.show()<br> // 在 created 中，data 和 methods 都已经被初始化好了！<br> // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作<br> },<br> <br> beforeMount() {<br> // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中<br> // console.log(document.getElementById('h3').innerText)<br> // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串<br> },<br> <br> mounted() { <br> // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了<br> // console.log(document.getElementById('h3').innerText)<br> // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动<br> },<br><br><br> // 接下来的是运行中的两个事件<br> beforeUpdate() { <br> // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】<br> /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)<br> console.log('data 中的 msg 数据是：' + this.msg) */<br> // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步<br> },<br> updated() {<br> console.log('界面上元素的内容：' + document.getElementById('h3').innerText)<br> console.log('data 中的 msg 数据是：' + this.msg)<br> // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的<br> }<br> });<br> </script>
图来自：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
Original: https://www.cnblogs.com/zdh052286/p/12485514.html
Author: 清酒一杯
Title: vue过滤器和生命周期——day02
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/581595/
转载文章受原作者版权保护。转载请注明原作者出处！