vue的基本使用

社区资料：https://www.vue-js.com/
vue官方手册：https://cn.vuejs.org/v2/api/

一、vue的介绍

vue是一套构建用户界面的渐进式框架，Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
vue是基于MVVM（M:model V:view VM:viewmodel）设计模式，支持数据的双向绑定(v-model)
补充：
MVC设计模式：
M model 数据层 V view 视图层 C control控制层

二、vue的安装

2.1 下载vue.js直接引入

2.2 通过CDN加载

2.3 npm安装
npm install vue -g
npm install vue-cli -g

通过
npm run dev 启动项目（2.0） npm run serve（3.0）
npm run build 打包项目

三、vue的基本使用

四、vue的常见指令（重点）

4.1 vue的插值
方式一：双大括号绑定数据

{{msg}}

方式二：v-html指令

方式三：v-text指令

v-html和v-text的区别？
v-html可以解析标签和文本,而v-text只解析文本内容。
4.2 vue中的条件语句

4.3 vue的显示隐藏

方式一：v-if隐藏

我们来玩捉迷藏

方式二：v-show隐藏

你来找找我在哪儿

v-if和v-show的区别：
v-if 隐藏是直接将该元素移除
v-show是将元素设置为display:none进行隐藏
4.4 vue的循环语句

4.5 vue的样式绑定
在vue中，我们采用v-bind来绑定属性和class样式
class属性的绑定,可简写为‘ ：’

4.5 vue的事件处理

事件修饰符

.stop 阻止事件冒泡行为
.prevent 阻止事件默认行为
.capture 使用事件捕获模式
.self 阻止事件委派（只能当前元素触发事件而不是子元素）
.once 事件只触发一次

按键修饰符

.enter 回车键
.tab tab键
.delete (捕获 “删除” 和 “退格” 键)
.esc ESC键
.space 空格键
.up 上键
.down 下键
.left 左键
.right 右键
.ctrl Ctrl键
.alt alt键
.shift shift键
.meta meta键
注意：v-on:可以简写为’@’

4.6 vue的数据双向绑定

4.7vue的表单

vue中采用v-model进行数据双向绑定

表单修饰符

.lazy 输入框再change事件中同步
.number 将用户输入的内容自动转换为number类型
.trim 将去除用户输入的内容的首尾空格