双向数据绑定

指令

v-model

双向绑定

v-text

v-html

v-bind

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

v-if

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

v-show

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

v-for

遍历

//第一种写法

    
•         {{item}}             

    
•         {{index}} {{item}}             

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

v-on

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

//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: '

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

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')}}    
  
  

路由

• vue-router组件

  https://router.vuejs.org/zh-cn/

• 示例

    首页
    登录