VUE学习笔记（一）

VUE的初步了解

• 来自官网的介绍
  Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
• 我自己的理解
  之前有看过一段时间的layui需要的东西很多，细节也是非常多的，看了一段时间后，想看看VUE和这个有什么不一样，我发现自己想的有一点离谱，layui更像是用来美化前端的，而VUE更像是前端的一种框架，一层一层的分开，像后端的一个一个功能（用户是用户的，管理员是管理员的，登陆是登陆的）这里面有功能区别，角色区别等等。使用VUE的话会让项目看起来更加的简洁明晰。

各功能简述

vue：最基本的前端渐进式的js框架

#app的使用  DOM数据绑定（我觉得这就是上下俩个框）

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-bind 对数据进行绑定
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
v-for 循环
v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

组件系统：将页面化为一个个的组件并将之组装
是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

创建
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)

使用
<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

route：路由负责页面的跳转类比Controller

//Vue的引用及使用都可以参考各个插件的官网
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import App from "../App"

Vue.use(VueRouter)

const routes = [

    {
        path: '/',
        name: '用户管理',
        component: Home,
        redirect:"/userserch",
        children: [
            {
                path: '/userserch',
                name: '用户查询',
                component: UserSerch
            },
            {
                path: '/useradd',
                name: '用户添加',
                component: UserAdd
            },
            {
                path:'/update',
                component: UpdateUser
            }
        ]
    },


]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

axios：前后端交互，ajax的封装

axios.get('http://localhost:8181/findUser/'+currentPage+'/4').then(function (resp) {
                    _this.tableData=resp.data.content
                    _this.total = resp.data.totalElements
                })
axios.post('http://localhost:8181/add', this.ruleForm).then(function (resp) {
                            if(resp.data=='success'){
                                alert('添加成功')
                                _this.$router.push('/userserch')
                            }
                        })

第二步创建VUE

VUE3.0以下
首先参考官网的话确实是可以直接使用的，但对于初学者来讲，我觉得看视频是很好的。我看了先看狂神说和楠哥的视频多看几遍，跟着多敲几遍。

以上命令完成后就可以使用IDEA打开创建的项目，把IDEA变为管理员模式更好（自查）

把下面这些想象成java中pom 文件中的一个个依赖，类似与插件
router ：路由插件
element ：“饿了么”框架
axios ：ajax封装用于前后端交互

npm install axios  //安装命令
npm run dev //运行命令

一些感悟

我学习VUE的时候会html不会js，只会照猫画虎，这是学习最开始的比较混乱的状态，后续会改进。