Vue的基本使用

社区资料：Vue：Vue.js专业中文社区

vue官方手册：API — Vue.js

一、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

三、vue的基本使用

 
h2>{
  {msg}} 
 

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

4.1 vue的插值

方式一：双大括号绑定数据 
{
  {msg}}
 
方式二：v-html指令 
 
方式三：v-text指令 

v-html和v-text的区别？

v-html可以解析标签和文本,而v-text只解析文本内容。

4.2 vue中的条件语句

v-if
v-else 
v-else-if



出去到处浪
 

好好呆在家
 

出去到处浪
 
好好呆在家
 

你真棒
 
还行，继续努力
 
你是猪吗？

4.3 vue的显示隐藏

方式一：v-if隐藏 
我们来玩捉迷藏
 
方式二：v-show隐藏 
你来找找我在哪儿

v-if和v-show的区别：

v-if 隐藏是直接将该元素移除

v-show是将元素设置为display:none进行隐藏

4.4 vue的循环语句

语法：v-for="item in items"



{
  {val}}
 

{
  {index}}{
  {val}}

{
  {index}}{
  {key}}{
  {val}}
 

 

4.5 vue的样式绑定

在vue中，我们采用v-bind来绑定属性和class样式

class属性的绑定,可简写为‘ ：’：

方式一：传入对象的方式 属性为：class类名 属性值为boolean值 
你们想不想回公司
 
你们想不想回公司
 

方式二：传入数组 
成都昨天已经全部清零
 

方式三：内联样式（不推荐） 
 
注意：在v-bind:绑定属性和class样式时，可以简写为':'

4.5 vue的事件处理

方式一：事件直接修改内容 
点击加一 
{
  {num}}
 

方式二：事件触发函数方法 
点击触发函数