什么是vue?在项目开发中为什么要用vue？

在近两年的web及项目开发中，vue技术的使用越来越普遍，其各种资料、介绍以及使用攻略内容资料非常多，那么vue到底什么？在项目开发中，vue起到什么作用？它与传统的html+css+js+lamp开发网站项目又有什么区别呢？
什么是vue？Vue.js是一套构建用户界面的渐进式框架，Vue 采用自下向上增量开发的设计，其核心库只关注视图层，易于上手，同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。其实抛开官方的一些不知所云的说法，简单来说，在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或者js来添加各种特效功能，需要去选中每一个元素进行命令，这些内容在简单的项目中或者不变的项目中还能应付得来，一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的，而这时候用了vue，这些问题都不复存在。在比如一些单网页制作成的应用程序，一般涉及到数据交互的内容都很多，而应用了vue之后将大大缩减工作量。
vue在web开发，网站制作中有哪些显著优势？1.数据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染 。2.组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。
对于前端开发者来说为什么要学习vue？由于近两年前端技术变革速度太快，vue不论针对web项目开发，网站制作，还是app，小程序开发，都越来越流行，其便捷性及易用程度都让你不得不考虑去学习。如果仅仅还是传统的各种cms开源代码建站仿站，显然你的技术已经跟不上了，如果你开发的项目数据交互较多，并且前后端分离明显，那么vue将会使你未来技术长足成长的不二选择。

vue创建项目的步骤

一、nodejs安装
1、下载地址为：https://nodejs.org/en/

2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

node -v 
npm -v

二、安装vue
安装vue-cli

cnpm install vue-cli -g      //全局安装 vue-cli

-g表示全局安装，vue-cli是模块，全局安装的模块可以在命令行直接使用
之后，可以vue –V查看vue是否安装好，出现版本号即安装成功。
三、创建项目框架
如果想 放到指定的目录 下，先进入这个目录在执行创建项目的命令
例如：
E:回车 //进入E盘
cd test回车 //进入E盘的test文件夹
接下来进入主题：创建一个基于’webpack’的项目，后面是项目名

vue init webpack my-vue 

现在已经创建好了，那就让项目先安装下依赖再运行一下，会出现下面的页面，操作指令是：

进入项目目录：cd vue-test
安装项目所需要的依赖：npm install
启动项目：npm run dev

原文：https://blog.csdn.net/weixin_42218847/article/details/81363421

创建一个项目

1.运行以下命令来创建一个新项目：

vue create hello-world

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。
vue create 命令有一些可选项，你可以通过运行以下命令进行探索：

vue create --help

2.使用图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

介绍文件作用

components 存放组件的文件夹
static 存放一些静态文件，例如图片
index.html 展现页面
main.js 入口文件，程序运行会依照里面的配置
package.json node依赖包记录，用 npm init命令生成
webpack.config.js webpack配置文件

一些常用指令https://cn.vuejs.org/v2/api/#v-text

（1）v-text: 类似于jQuery的text()方法
（2）v-html: 类似于jQuery的html()方法
（3）v-if: 用于根据表达式的值的真假条件渲染元素
（4）v-show: 用于根据表达式的值的真假条件显示隐藏元素，切换元素的 display CSS 属性
（5）v-for: v-for 指令可以绑定数组的数据来渲染一个项目列表
（6）v-on: v-on 指令添加一个事件监听器
（5）v-bind:用于在元素上绑定属性，例如class或者style,可以简写为 :class :style
(6)v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
(7) v-once 指令,你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

v-show和v-if的区别，v-show只是控制标签显示隐藏，而v-if通过逻辑判断控制输出，优先使用v-if