VUE 入门（转载）VUE 入门（转载）https://juejin.cn/post/68449037753170165

VUE 入门（转载）juejin.cn/post/684490…

由于公司之前是写C#的，现在要转 Java分布式 + vue,所以进行一次前后端的简单培训。

前端工具和环境： Node.js V10.15.0 Vue.js V2.5.21 yarn: V1.13.0 IDE:VScode

后端工具和环境： Maven: 3.52 jdk: 1.8 MySql: 14.14 IDE: IDEA Spring Boot: 2.0+ Zookeeper：3.4.13

demo 地址：http://101.132.124.171:8000/about

源代码地址在下方。可以的话，给颗星星哦，谢谢！！！

Spring Boot + Vue 代码地址：github.com/liangwei010…

Dubbo-Spring-Boot代码地址： github.com/liangwei010…

前后端分离(服务端渲染、浏览器渲染)

实现真正的前后端解耦。
核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。
前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，安卓，IOS等等）打下坚实的基础。

Vue.js

在讲Vue之前，需要大概了解下 HTML、CSS、JS是什么？

HTML是写标签的；CSS是写样式的；JS是给网页增加动态效果

HTML、CSS、JavaScript

Vue介绍

Vue是一套用于构建用户界面的渐进式框架，网址：cn.vuejs.org/
Vue在Github的欢迎度

不需要操作Dom，实现了MVVM

// jquery的操作
$("#test3").val("Dolly Duck");

// Vue的操作
MVVM，实现了双向绑定
复制代码

学习成本低，文档浅显易懂

Vue 建项目

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。基于Vue cli项目脚手架，网址：cli.vuejs.org/zh/guide/

运行以下命令其一来创建一个新项目，有默认选默认即可

  vue create vue-hello-world (命令行)

  vue ui (界面)
复制代码

在创建好项目以后，运行以下命令将能看到初次项目创建的界面
```
  cd vue-hello-world

  yarn serve
复制代码
```
默认情况下，在浏览器访问 http://localhost:8080/ 将能看到如下界面：

Vue 相关结构和生命周期介绍

vue-cli3.0.png

单个.vue文件的组成部介绍

<template>
<!--html-->
</template>

<script>
//js
</script>

<style>
/* css style */
</style>
复制代码

组件化应用构建

使用小型、独立和通常可复用的组件构建大型应用,一个页面如搭积木一样

Vue的生命周期如下图：
钩子方法: 模板方法的执行结果，该方法就叫做钩子方法，个人理解：影响了模板的执行，把函数勾住了，这个方法就是钩子函数。

钩子函数	解释
beforeCreate	实例初始化自动调用
created	实例创建后调用
beforeMounte	在mount之前运行,元素已经加载，但是属性值没渲染
mounted	并挂载到实例上去之后调用该钩子
beforeDestroy	在开始销毁实例时调用
destroyed	在实例销毁后调用

Vue 常用指令

声明式渲染

<div id="app">
  {{ message }}
</div>
复制代码

data: {
    message: 'Hello Vue!'
}
复制代码

条件渲染

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
复制代码

data: {
    seen: true
}
复制代码

循环渲染

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
复制代码

data: {
  todos: [
    { text: '学习 JavaScript' },
    { text: '学习 Vue' },
    { text: '整个牛项目' }
  ]
}
复制代码

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
复制代码

methods: {
  greet: function () {
    // `this` 在方法里指向当前 Vue 实例
    alert('Hello ' + this.name + '!')
  }
}
复制代码

计算属性缓存 vs 方法

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
复制代码

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    // 方法
    reversedMessage: function () {
    return this.message.split('').reverse().join('')
    }
  }
})
复制代码

数据变化，watch

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    // 当两个值变化时，将会触发此函数
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})
复制代码

表单输入绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
复制代码

缩写

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>
复制代码

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>
复制代码

路由

  // 可提供懒加载
  const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
  })
复制代码

<!--html跳转-->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
复制代码

// js跳转
router.push({ name: 'user', params: { userId: 123 }})
复制代码

使用 axios 访问 API

// get请求 
axios.get('/user', {
  params: {
  ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
复制代码

// post 请求
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
复制代码

在学习完以上知识以后，将能使用Vue做出简单的页面运用

扩展：TypeScript、Vue组件间传值、Mock、Vuex、调试、JavaScript的同步异步,作用域、ES6、部署(打包、优化、部署在静态服务器上、node中间层)、虚拟DOM、Http的get和post等。
梭哈 PC端:iview、小程序：mpvue，移动端：muse-ui，桌面端：Electron + Vue JS走天下。

作者：梁小生0101
链接：juejin.cn/post/684490… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。