Vue基础

一、简介：

Vue 是一套用于构建用户界面的渐进式框架。

二、MVVM组成：

MVVM ===> M / V / VM
M：model数据模型
V：view视图
VM：ViewModel 视图模型

三、vue项目创建步骤：

1.安装node环境：

   下载地址：https://nodejs.org/en/

    如果能够成功输出版本号，就说明我们安装node环境成功；

    使用淘宝镜像：http://npm.taobao.org/

2.搭建vue项目环境：

   《1》安装vue脚手架：Vue CLI ：

            官网：https://cli.vuejs.org/zh/

            npm install -g @vue/cli

   《2》项目创建：

            进入要创建vue项目的目录下进行项目创建，输入：vue create ”项目名称“

            选择最后一项 Manually select features 自行选择配置

            选择配置：空格键是选中与取消，A键是全选

            选择一个vue版本，3.0或2.0

            装好后进行启动：

                   cd 项目名称 // 进入到项目根目录

                   npm run serve // 启动项目

 

四、Vue语法

Vue基础属性：

el:获取执行vue的dom元素－初始化范围

data ： 存储数据

methods ：执行的方法

 

Vue基本语法介绍：

1.v-bind：（绑定属性）

 v-bind 特性被称为指令。指令带有前缀 v- ，以表示它们是 Vue 提供的特殊特性。
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号 " : "

2.v-on：（绑定事件）

 

3.v-if：（条件渲染）

v-if 指令用于条件性地渲染一块内容。也可以用 v-else 添加一个“else 块”，而v-else 元素必须紧跟在带 v-if 的后面。

• v-if是惰性的；
• 当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉；
• 当条件为true时，才会真正渲染条件块中的内容；

4.v-show：

用法和v-if大致一样：

• v-show是不支持template；
• v-show不可以和v-else一起使用；

 v-if和v-show区别及使用：

• v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有渲染的，只是通过CSS的display属性来进行切换；
• v-if当条件为false时，其对应的元素压根不会被渲染到DOM中；
• 如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；
• 如果不会频繁的发生切换，那么使用v-if；

5.v-for：

可以用 v-for 指令基于一个数组来渲染一个列表，也可以用 v-for 来遍历一个对象的。

6.v-model：（双向绑定）

• v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；
• 会根据控件类型自动选取正确的方法来更新元素；
•  v-model本质上是语法糖，负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；