vue初学

1.{{}}

{{}}中必须写js表达式

{{}}可以自动读取到data中的所有属性

data中的数据发生改变，模板中用到该数据的地方会自动更新

表达式：一个表达式会生成一个值

1）a

2）a+b

3）demo(1)，函数调用，没有return就是undefined

4）三元表达式

x === y ? 'a' : 'b'

2.v-bind指令（指令都是v-开头）

v-bind后面的引号，里面的东西当作表达式

v-bind:可以简写成:

<a v-bind:href="link">链接</a>

注：

{{}}，插值语法，对应，标签体。

v-，指令语法，对应，标签（属性，内容，事件等）。

3.数据绑定

vue中有两种数据绑定方式：

1）单向绑定（v-bind）：数据只能从data流向页面。

2）双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。

注：

1）双向绑定一般在表单类元素上（如input，select等）

2）v-model:value可以简写成v-model，因为v-model默认收集value值

<input v-model:value="值">
<input v-model="值">

4. MVVM模型

MVVM模型：

1.M：模型（Model）：data中的数据

2.V：视图（View）：模板代码

3.VM：视图模型（ViewModel）：Vue实例

1）data中所有的属性，最后都出现在了vm身上

2）vm身上所有的属性，及Vue原型上所有属性，在Vue模板中都可以直接使用

5.事件

v-on:click=""或者@click=""绑定事件，click是事件名

事件的回调配置在methods对象中，methods中的函数，this指向的是vue实例或者组件实例对象

methods中配置的函数，不能用箭头函数，否则this会乱

@click="demo($event,x)"，可以传参

6.事件修饰符

前三个常用些

可以链式书写，比如.stop.prevent

1）prevent阻止默认行为（比如a标签，链接跳转）@click.prevent

2）stop阻止事件冒泡（比如子元素加上.stop，父元素点击事件不会触发）

3）once事件只触发一次（比如methods函数，点第一次有效，后面再点没用了）

4）capture使用事件的捕获模式（比如父元素加上.capture，则先执行父元素，再执行子元素）

5）self只有event.target是当前操作的元素时，才触发事件（比如点击子元素，父元素加上了self不触发）

6）passive事件的默认行为立即执行，无需等待事件回调执行完毕（比如@wheel的methods中，循环很多次，先执行滚动再去执行methods中的循环）移动端用的多些

7.键盘事件

keyup抬起（常用），keydown按下

1）按键别名

上下左右：up/down/left/right

回车enter，删除delete（删除键/退格键），esc，space，tab（特殊，必须配合keydown）

2）未提供别名

可以用按键原始的key，特殊的比如CapsLock，要写成caps-lock

<input type="text" @keyup.a="show">

    methods:{
        show(e){
            console.log(e.key,e.keyCode);
            //console.log(e.target.value);
        },
    },

3）系统修饰键，用法特殊( ctrl,alt,shift,meta(win/command) ) 

keyup：按住这个键，再按下其它键盘，松开其他键

keydown：正常触发

可以连续写，比如@keyup.ctrl.b（ctrl和b一起）

8.计算

<template>
    <input type="text" v-model="first">
    <input type="text" v-model="second">
    <div>{{sum}}</div>
    <div>{{sum}}</div>
    <div>{{sum}}</div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data(){
        return{
            first: '1',
            second: '2',
        }
    },
    //比methods更方便调试，因为vue-devtool可以看到data和computed数据
    computed:{
        sum:{
            //有人读取sum，get就调用，且返回值作为sum的值
            //缓存效果：初次/依赖变化才调用
            get(){
                //输出1次
                console.log('get调用');
                //1-2
                return this.first + '-' + this.second;
            },
            //set可以不写
            //当sum被修改时，set调用
            //想真正修改sum，需要改掉依赖
            set(value){
                console.log('set调用');
                let arr = value.split('-');
                this.first = arr[0];
                this.second = arr[1];
            }
        }
    },
}
</script>

<style scoped>
</style>