vue现代化使用方法(一)

目前前端开发已经非常类似GUI开发，前端人员需要了解大量业务逻辑，通过不同的页面交互行为给用户展示不同的界面或者引导用户进行不同的操作，这必然造成前端逻辑的繁重化，如何简单高效的维护开发代码是每个前端开发人员应该思考的问题。
内容整理中，会随时变更

安装

Vue引入到项目中，有两种方法：

• 通过<script>标签引入
• 通过npm方式引入
  （我们只说最常用的方式npm方式引入）

通过npm方式引入

通过npm install vue把vue引入到项目中，再结合webpack或者rollup使用。

通过标签方式引入vue的方法，只适合学习或者做demo用，实际项目中不建议那么做，建议通过npm方式引入vue。

构建一个hello world

本部分会结合webpack构建一个以vue组件为基础的初始项目。

结合webpack构建项目

webpack使用教程，参考webpack使用详解
node使用教程，参考node使用详解
babel使用教程，参考babel使用详解

1. 安装node

2. 安装vue脚手架，npm install -g vue-cli 需要管理员全新啊。如果是mac :sudo npm install -g vue-cli

   
   安装完成

初始化淘宝镜像命令

npm config set registry https://registry.npm.taobao.org
验证命令

npm config get registry

3. 初始化项目vue init webpack my-project

初始化项目 初始化完成

1.对象绑定

对象绑定

2.v-if else-if
是否渲染

3. v-show
   是否展示
   4.v-on
   事件绑定如果： v-on:click 简写 @click
   5.v-html
   代码：

   
   代码

渲染结果

image.png