一.简介

1.概念

Vue 是一款用于构建用户界面的 JS框架， 基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型， 高效地开发用户界面。渐进式框架， 适应不同需求进行开发。

两个核心功能：

• 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，可声明式地描述最终输出的 HTML 和 JS状态之间的关系

• 响应性：Vue 会自动跟踪 JS状态并在其发生变化时响应式地更新DOM

2.创建Vue项目的方式

  nvm: Node版本控制工具

(1)使用vite创建

• 安装初始化npm init vue@latest

• 选择配置

• 进入项目目录,安装模块npm i, 启动项目 npm run dev

(2)使用vue-cli

• 安装 npm i -g @vue/cli

• 创建项目 vue create 项目名称

• 选择相关配置项

• 启动项目 npm run serve 工程环境,启动慢

(3)使用可视界面

vue ui

二.基本使用

1.模板语法

(1)文本插值

最基本的数据绑定形式是文本插值, {{ }} "Mustache"语法, 插值表达式

• 插值表达式Mustache,只是内容占位符 ,不覆盖原因内容,

• 只能用在元素内容节点,不能用在属性节点 (v-bind)

• 不能识别标签 (v-html)

(2)v-html

{{ }}不能识别标签, 会将数据解释为纯文本, 插入HTML需使用v-html指令

(3)属性绑定 v-bind:

{{ }}不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令(简写 英文 : )

    
 最新信息 : {{ msg }}
   // msg的值渲染到页面中
 最新信息 : 
   //h1标签内容替换为msg的值, 并以h1格式显示
   // 属性动态绑定单个值
    // 动态绑定多个值  objCls为一个对象, 其中包含多个属性及值

2.事件处理

(1)监听事件 v-on:

简写 @: , 使用该指令监听DOM事件, 在事件触发时执行对应的 JS

    Add 1+ step 		 + 4 addNum(3,e)"> + 3
更新count: {{ count }}

(2)事件修饰符

• 阻止冒泡  .stop

• 阻止默认行为  .prevent

• 自身触发 .self

• 只触发一次  .once

    
我是son1==> .stop 
 我是son2==> .prevent 
我是son3==> .self 
son3-son

(3)按键修饰符

• 按键别名: .enter, .tab, .delete (捕获“Delete”和“Backspace”两个按键), .esc, .space,.up,.down, .left, .right

• 系统按键修饰符: .ctrl, .alt, .shift, .meta

• 按键修饰符用于可获取焦点的元素中, e.g:input, [div不可(可使用其他方式实现)]

    
点我,我就变色啦!!!

(4).exact修饰符

    允许控制触发一个事件所需的确定组合的系统按键修饰符

    AAA

(5)鼠标按键修饰符

.left, .right, .middle 修饰符将处理程序限定为由特定鼠标按键触发的事件

参考文档: https://cn.vuejs.org/guide/essentials/event-handling.html