01-vue基础

双向绑定

可以绑定html标签的任何一个属性
示例：

绑定一个boolean值，如果为true输出，如果为false则不输出

绑定一个boolean值，如果为true显示，如果为false则不显示display:none

遍历

//第一种写法

    
        {{item}}        
    
//第二种写法 设置唯一标示

    
        {{index}} {{item}}        
    
//第三种写法 遍历对象   :key="item.id"

    
        {{index}} {{key}} {{item}}    

//注册事件 显示或隐藏 //简写 显示或隐藏 

//script中添加执行的方法
    export default {
        data() {            return {                msg: 'Hello Vue',                tip: '这是一个提示',                isOK: false
            }
        },        methods: {
            btnClick() {                this.isOK = !this.isOK;
            }
        }
    }

v-on:click --> @click
v-bind:id  --> :id

• 子组件的基本使用

//注意：component中的data要返回functionVue.component('my-item', {
    data() {        return {            count: 0
        }
    },    template: '{{count}}'})var app = new Vue({    el: '#app',    data: {        msg: 'world'
    }
})

• 控制组件的范围（父组件给子组件传值）

var app = new Vue({
    el: '#app',
    data: {
        msg: 'hello'
    },
    components: {        'my-item': {
            props: ['test'],
            template: '
{{test}}
'
        }
    }
});

• 子组件通知父组件

Vue.component('my-item', {
    data() {        return {}
    },
    props: ['count'],
    template: 'count: {{count}}',
    methods: {
        divClick() {
            this.$emit('increate', '子组件传来的值');
        }
    }
})var app = new Vue({
    el: '#app',
    data: {
        count: 0
    },
    methods: {
        increateDemo(c) {
            console.log(c);
        }
    }

});

• 加载.vue的子组件（需要配置好webpack）

    import App from './07-vue.vue' //加载.vue组件
  
    new Vue({      el: '#app', //将组件中的内容插入到页面中指定的元素
        render: c => c(App) //编译app.vue组件
    })

• 私有过滤器

    
      {{msg | toLower | replace('l','x')}}    
  
  

• 全局过滤器

    
      {{msg | toLower | replace('l','n')}}    
  
  

作者：琪先生_zZ
链接：https://www.jianshu.com/p/f5ea69d409f1