vue 基本使用

vue-cli 创建项目

安装最新版本 nodejs ，要求版本 >= 8.11 执行 npm i @vue/cli -g ，然后查看 vue --version

创建项目运行 vue create xxx

插值 指令

• 插值
• 表达式
• 指令（即 v- 开头的。后面的事件、循环、判断等也会用到指令，慢慢讲）
• 指令缩写

代码参考 vue-demo

computed 和 watch

代码参考 vue-demo ，注意

• computed 是有缓存的，data 不变就不会重新计算
• watch
  • 如何深度监听
  • 引用类型无法拿到 oldVal

class 和 style

代码参考 vue-demo

条件

代码参考 vue-demo

• v-if 和 v-show 的区别，以及使用场景 —— 频繁切换用 v-show ，否则用 v-if

循环

代码参考 vue-demo

• 遍历数组，遍历对象
• key
• v-for 和 v-if 不要一起用
  • v-for 会优先于 v-if 执行
  • 因此 v-if 会在每一个 v-for 中都计算一遍
  • v-if 和 v-for 拆开使用

事件

代码参考 vue-demo 【注意】vue 事件是被注册到当前 DOM 元素的，和 React 不一样

• 传参
• event 参数
• 事件修饰符
• 按键修饰符
• 【注意】用 vue 绑定的事件，组建销毁时会自动被解绑。自己绑定的事件，需要自己销毁。

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

按键修饰符

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

表单

• textarea 要用 v-model

修饰符 lazy number trim