Vue CLI 基础

1. 数据绑定
1.1 不需要操作DOM，通过操作数据直接触发页面的渲染和DOM的更新。
<template>
    <div>{{msg}}</div>
</template>
<script>
export default {
    data(){
        return {
            msg: ''
        }
    },
    mounted() {
        this.msg = 'demo1mounted'
    }
}
</script>
1.2 使用v-bind绑定标签的属性值，v-bind可以省略。
<div :title = title>div</div>
title: 'div'
1.3 使用[]绑定动态属性。
<div :[attrName] = title>div</div>
attrName: 'title'
2. 绑定class和style
<div class="login">
<style scoped>
.login {
  left: 0px;
}
</style>
3. v-if条件判断
<div v-if="isShow">v-if为true时显示</div>
<div v-else>v-if为false时显示</div>
<div v-else-if="xxx">v-else-if</div>
isShow: true
另外v-show也可以实现条件判断，不同在于false时不删除元素，会留出空间。
4. v-for循环
arr: [1, 2, 3]
<div v-for="i in arr" :key=i>{{i}}</div> i是索引
<div v-for="(i, index) in arr" :key=i>{{i}}xx{{index}}</div> index是数组下标
<div v-for="(prop, propName, index) in obj" :key="index">{{prop}}={{propName}}={{index}}</div>
obj: {
                name: 'name1',
                sex: 'm',
                age: 20
            }
prop是属性，propName是属性名，index是索引编号
5. 事件绑定
{{number}}<button @click="add">+1</button>
methods: {
        add() {
            this.number++;
        }
    }
@click.stop 阻止冒泡
@click.prevent 阻止默认事件
@click.self 只有点击自己才执行（点击子元素不执行）
@keydown.ctrl 按ctrl执行
6. 计算属性和侦听属性
computed通常用于多个值影响一个值的情况，watch通常用于一个值影响多个值的情况。
computed: {
        type_msg() {
            return this.type + ":" + this.msg;
        }
    }
<div>{{zhangsan}}{{language}}</div>
watch: {
        language(newval){
            if(newval=='zh'){
                this.zhangsan='张三';
                console.log('newvalzh');
                return;
            }
            else(newval=='en')
            {
                this.zhangsan='zhangsan';
                console.log('newvalen');
                return;
            }
        }
    }
7. 双向绑定v-model
<input type="text" v-model="myText">
<div>{{myText}}</div>
v-model绑定的值随着输入框中的值变化而变化。
v-model.lazy 失去焦点时更新数据
v-model.number 转成数字
v-model.trim 去除前后的空格
8. 过滤器filters
<div>{{content|uppercase}}</div>
filters: {
    uppercase(value){
        return value.toUpperCase();
    }
}

Vue CLI P13~15
1. 自定义指令
focus是自定义的指令，在directives中定义。
<input type="text" v-focus>
directives: {
    focus: {
    inserted: (e) => {
        e.focus();
    }
}
2. 自定义组件
<my-component text="abc"></my-component>
components: {
        MyComponent
    }
MyComponent.vue
<p>{{text}}</p>
export default {
name: "MyComponent",
props: ['text']
}