vue 小测试

1 . Vue 中常用的日指令:

v-for v-model v-if v-else v-show v-bind (:) v-on (@) v-cloak

2. 过滤器的用法：全局过滤器&局部过滤器

==全局过滤器用法==

在列表生成用户信息时，性别字段或者时间字段可以使用过滤器来格式化

形如：{{ user.gender | fmtGender }}

Vue.filter(‘fmtGender’,val =>{

return [‘男’， ’女‘][val] || ‘未知’

})

而且过滤器细分还有有参与无参之分

      定义无参全局过滤器
<div id="app">
            <p>{{ msg | msgFormat}}</p>
        </div>

        <script>
            // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
            Vue.filter('msgFormat', function(msg) {
                // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
                return msg.replace(/单纯/g, 'xx')
            })
        </script>

       定义有参全局过滤器
      <div id="app">
            <p>{{ msg | msgFormat('疯狂','--')}}</p>
        </div>

        <script>
            // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
            Vue.filter('msgFormat', function(msg, arg, arg2) {
                // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
                return msg.replace(/单纯/g, arg+arg2)
            })
      </script>

==局部过滤器==

与全局过滤器相比，有参与无参都是一样的，它仅仅体现在作用域上，对啊，就是定义在new Vue({ }) 实例中， #app范围内。

// 创建 Vue 实例，得到 ViewModel
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
                },
                methods: {},
                //定义私用局部过滤器。只能在当前 vue 对象中使用
                filters: {
                    dataFormat(msg) {
                        return msg+'xxxxx';
                    }
                }
            });

点拨一下

1.当局部过滤器与全局过滤器同时存在，且名称相同按就近原则，局部 》 全局

2. 当使用多个过滤器时，要以分隔符 “ | ”隔开

3. ==Vue 的基本结构==

   var app = new Vue({
     el:"#app",
     data(){
     return{
     
     }
     },
     methods:{
     
     }
   }) 
   

   4.v-cloak 的作用 在默认情况下，如果vue 加载有延迟或者数据比较多，会使用户看到字符串模板，观感不好。vue实例在渲染完成后，会将el 对应的DOM元素上的 v-cloak 属性去掉，我们可以利用此特性，写一个属性选择器。形如 [v-cloak]{display:none;} 这样在初始化成功之前，页面都是空白，不会出现模板，初始化成功后，则显示正常的HTML 提高用户体验。

==生命周期的 8 个钩子函数==

beforeCreate(执行实例默认的函数，但data 和 methods 还未初始化完成)
created( data 与 methods 初始化完成)
beforeMounted(模板已经在内存中编译完成，尚未挂载)
Mounted(DOM 初始化完成，此时组件已经完成了创建阶段，开始运行阶段了)
beforeUpdate(内存的数据已更新，但页面尚未重新渲染)
update(更新的数据与最新页面保持同步)
beforeDestory(实例从运行阶段进入销毁阶段，但实例身上所哟的date、methods、filters
、computed、指令还可用)
Destoryed(组件已经被完全销毁)