学习vue的第一天

一、Vue概述

• vue是一个渐进式的js框架

• 开发vue有两种方式：

  1. 传统的开发，通过html页面引入vue

  2. webpack工程化开发

二、创建项目：

• 当安装vue后，通过命令 vue -V ，看是否出现版本号，如果出现了就表示已安装完成

• 执行 vue create 文件名 命令，创建项目

• 当出上图情况，就表示创建成功

• 再切换到刚刚创建好的项目上：cd 文件名

• 更新本地服务器：yarn serve

• 三、Vue指令——插值表达式

• 语法：{{ 表达式 }}

• 注意：vue 变量必须要写在 data 里声明 

四、Vue指令—— v-bind

• 语法：v-bind:属性名="变量名"

• 简写：:属性名="变量名" 

五、Vue指令—— v-on

• 语法：（绑定事件）

  1. 语法1：v-on:事件名=“少量代码”

  2. 语法2：v-on:事件名=“methods里函数名”

  3. 语法3：v-on:事件名=“methods里函数名（值）”

  4. 语法4（简写）：@事件名=“methods里函数名”

六、Vue指令—— v-on事件对象

• 语法：有两种情况：

  1. 无参数

  2. 传参，通过 $event 传给事件处理函数，这个是固定写法

 

七、Vue指令—— v-on修饰符

• 语法：@事件名.修饰符="methods里函数"

  1. .stop 阻止事件冒泡

  2. .prevent 阻止默认行为

  3. .once 点击观察事件处理函数执行几次

 

八、Vue指令—— v-on按键修饰符

• 语法：

  1. @keydown.enter 回车

  2. @keydoen.esc 取消键

 

九、Vue指令—— v-model的基本使用

• v-model：是实现vue js变量和表单标签value属性，双向绑定的指令。

• 语法：v-model="vue数据变量"

• 注意：遇到复选框，v-model的变量值，如果是非数组，关联的是复选框的checked属性；如果是数组，关联的是复选框的value属性。

十、Vue指令—— v-model修饰符

• 语法：v-model.修饰符="vue数据变量"

  1. .number 修饰符会把值 parseFloat 转数值再赋予给 v-model 对应的变量

  2. .trim 修饰符 去除首尾两端的空格

  3. .lazy 修饰符 失去焦点内容改变时（onchange事件)，把内容同步给 v-model 的变量