Vue语法

Vue模板三种写法

Vue完整版，写在HTML中

写在template选项

Vue非完整版，配合xxx.vue文件

template里面写的内容不是html而是xml
html和xml区别

写法

template语法

插入表达式

{{object.a}}//表达式
{{n+1}}//可以写任何运算(除if/else)
{{fn(n)}}//可以调用函数
如果值为undefined或者null就不显示
另一种写法为<div v-text="表达式"></div>

v-html

相当于对一个标签添加innerhtml

v-pre

v-pre不会对对模板进行编译

v-bind

v-bind用来绑定属性：比如src/style/titile等等

v-on

v-on用来绑定事件

click

input

v-if-else

v-for

v-show

v-cloak

使用v-cloak 能够解决 插值表达式闪烁问题 配合插件表达式，{{}}前后可以放任意的内容

v-text

使用v-text 默认是没有闪烁问题的，会覆盖标签内的原内容

v-once

声明式编程 命令式编程

v-on:click.prevent 修饰符

阻止默认动作

v-on支持支持的修饰符:.{keyCode|keyAlias}/.stop.prevent.capture.self.once.passive.native

快捷键相关:.ctr.alt.shift.meta.exact

鼠标相关:.left.right.middle

v-bind支持的:.prop.camel.sync

v-model支持的:.lazy.number.trim

v-model

v-model

1. input事件，键盘，鼠标，任何输入设备的输入
2. change事件，只在input失去焦点时触发 vue-表单绑定 ``javascript <input type="text" :value="string" @input="string = $event.target.value" />

当我们写v-model其实就是上面的语法糖<br>
我们先要绑定value,然后监听input事件，input事件触发会修改定义的value
```javascript
<template>
  <div id="demo">
    <input type="text" v-model="string" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      string: "true"
    };
  },
  watch: {
    string() {
      console.log(this.string);
    }
  },
  methods: {
    visible() {
      this.show = !this.show;
      console.log("xxx");
    }
  }
};

v-model.lazy 可在失去焦点后更新绑定的值
v-model.tirm 清除空格

@keyCode

官方链接

.sync修饰符

Vue规则:组件不能修改props外部数据

Vue规则:this.$emit可以触发事件并且传参

Vue规则:$event可以获取$emit的参数

假设我们现在需要在子组件中修改父级组件传进来的数据，直接修改Vue会警告我们

上面的这种写法和EventBus中的trigger和on是一样一样的，但每次都写那么长确实很麻烦，所以vue为我们封装了.sync修饰符

Vue动画

transition标签

.fade-enter-active (enter到enter-to的中间帧，用来定义动画时间，延迟和曲线函数) .fade-leave-active (leave到leave-to的中间帧，用来定义动画时间，延迟和曲线函) .fade-enter 动画过渡第一阶段开始的状态 .fade-enter-to 动画过渡第一阶段结束的状态 .fade-leave 动画过渡第二阶段的开始状态 .fade-leave-to 动画第二阶段结束的状态

Animate(第三方库)

链接