v-if和v-show的区别

    <div id="app">
        <!-- v-show 如果值是true 相应的节点就会显示 就算值是false 在dom中依然存在
        只是把display的值改成了none -->
        <span v-show="false">我爱张sir</span>
        <!-- v-if是直接把dom删除了，在dom文档中已经找不到对应的dom了变成了注释 -->
        <h1 v-if="false">我爱Vue</h1>

        <!-- 如果频繁使用 就使用v-show 可以节约性能开销 -->
        <!-- 如果短暂使用 例如页面一开始加载的时候进行判断显示 优先使用v-if -->
        <!-- 在实际的开发过程中 使用v-if比较多 -->
        <ul>
            <!-- 不推荐同时使用 v-if 和 v-for 因为v-for 具有比 v-if 更高的优先级 -->
            <!-- <li v-for="(item,index) in list" v-if="item>1"> -->
            <!-- 解决v-if和v-for同时使用的场景的方法是 使用computed计算属性来过滤，之后再渲染计算属性里面过滤好的的数据 -->
            <li v-for="(item,index) in arr">
                {{item}}
            </li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
               list:[1,2,3]
            },
            computed:{
                arr:function(){
                    return this.list.filter(r=>r>1)
                }
            },
            methods: {
                
            },
        })
    </script>
</body>

复制代码

 [v-cloak]{
            display: none;
        }可以增加用户体验
复制代码

过滤器可以过滤出想要的数据

 <script>
        
        Vue.filter('msgFormat', function(msg) {
            return msg+'000'
        })
        new Vue({
            el:"#app",
            data:{
                msg:"woshidage"
            },
            filters: {
                dataFormat(msg) {
                    return msg+'xxxxx';
                }
            }
        })
        
        
        
    </script>
</body>
复制代码

组件

        Vue.component('tchild',{
            template:'<h1 >tchild</h1>'
        })
        new Vue({
            el:'#app',
            data:{
                msg:'我爱你'
            },
            methods:{
                changeFn(v){
                    this.msg = v;
                }
            },
            components:{
                'child':{
                    template:'<h1 @click="fn">{{msg}}</h1>',
                    props:['msg'],
                    methods: {
                        fn(){
                            this.$emit('change-fn','我恨你')
                        }
                    },
                }
            }
        })
    </script>