狂神--Vue

When? 2023-03-28 原文

概述

前端三要素

HTML（结构) ：超文本标记语言（Hyper Text Markup Language) ，决定网页的结构和内容
CSS（表现) ：层叠样式表（Cascading Style sheets) ，设定网页的表现样式
JavaScript （行为) ：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

JavaScript框架

jQuery：大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6、7、8;

Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如: 1代-> 2代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）

React：Facebook出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言;

Vue：一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的优点；

Axios：前端通信框架；因为Vue 的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery提供的AJAX通信功能；

前端三大框架：Angular、React、Vue

UI框架

Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUl，iview， ice：饿了么出品，基于Vue的UI框架
Bootstrap：Twitter推出的一个用于前端开发的开源工具包
AmazeUl：又叫"妹子U1" ,一款HTML5跨屏前端框架

Vue.js

iView
iview是一个强大的基于Vue的UI库，有很多实用的基础组件比elementui的组件更丰富，主要服务于PC界面的中后台产品。使用单文件的Vue组件化开发模式基于npm + webpack +babel开发，支持ES2015高质量、功能丰富友好的API ，自由灵活地使用空间。

ElementUI
Element是饿了么前端开源维护的Vue UI组件库，组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。

了解前后分离的演变史

MVC时代

为了降低开发的复杂度，以后端为出发点，比如：Struts、Spring MVC等框架的使用，就是后端的MVC时代；
以SpringMVC流程为例。

发起请求到前端控制器(Dispatcher Servlet)
前端控制器请求HandlerMapping查找Handler，可以根据xml配置、注解进行查找
处理器映射器HandlerMapping向前端控制器返回Handler
前端控制器调用处理器适配器去执行Handler
处理器适配器去执行Handler
Handler执行完成给适配器返回ModelAndView
处理器适配器向前端控制器返回ModelAndView，ModelAndView是SpringMvc框架的一个底层对象，包括Model和View
前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图(JSP)
视图解析器向前端控制器返回View
前端控制器进行视图渲染，视图渲染将模型数据(在ModelAndView对象中)填充到request域
前端控制器向用户响应结果

基于AJAX带来的SPA时代

时间回到2005年A OAX(Asynchronous JavaScript And XML，异步JavaScript和XML，老技术新用法)被正式提出并开始使用CDN作为静态资源存储，于是出现了JavaScript王者归来(在这之前JS都是用来在网页上贴狗皮膏药广告的) 的SPA(Single Page Application) 单页面应用时代。

前端为主的MV*时代

MVC(同步通信为主) ：Model、View、Controller
MVP(异步通信为主) ：Model、View、Presenter
MVVM(异步通信为主)：Model、View、View Model为了降低前端开发复杂度，涌现了大量的前端框架，比如：Angular JS、React、Vue.js、Ember JS等，这些框架总的原则是先按类型分层，比如Templates、Controllers、Models，然后再在层内做切分，如下图：

第一个Vue程序

什么是MVVM

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

为什么要使用MVVM

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

View

View是视图层，也就是用户界面。前端主要由HTH L和csS来构建，为了更方便地展现vi eu to del或者Hodel层的数据，已经产生了各种各样的前后端模板语言，比如FreeMarker，Thyme leaf等等，各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。

Model

Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型。
需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据模型是只包含状态的

比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)
视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。
MVVM框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护View Model，更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

Vue

Vue(读音/vju/，类似于view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是， Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vue x) 或既有项目整合。

MVVM模式的实现者

Model：模型层，在这里表示JavaScript对象
View：视图层，在这里表示DOM(HTML操作的元素)
ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而View Model就是定义了一个Observer观察者

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变
至此，我们就明白了， Vue.js就是一个MV VM的实现者，他的核心就是实现了DOM监听与数据绑定

为什么要使用Vue.js

轻量级，体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
移动优先。更适合移动端，比如移动端的Touch事件
易上手，学习曲线平稳，文档齐全
吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高

第一个Vue程序

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

        <div id="app">{{message}}</div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:"Hello World"}});
    </script>   
</HTML>

基础语法指令

v-bind

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind</title>
    </head>
    <body>
        <div id="app">
            <span v-bind:title="message">
                过来过来过来！！！！！！！！
            </span>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:'Hello World'+ new Date().toLocaleString()}});
    </script>   
</HTML>

v-if,v-else

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-if##v-else</title>
    </head>
    <body>
        <div id="app">
            <h1 v-if="ok">Yes</h1>
            <h2 v-else>No</h2>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{ok:true}});
    </script>   
</HTML>

v-for

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-for</title>
    </head>
    <body>
        <div id="app">
           <li v-for="(item,index) in items">
                {{item.message}}----{{index}}
           </li>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{items:[{message:'白日依山尽'},{message:'黄河入海流'},{message:'欲穷千里目'},{message:'更上一层楼'}]}});
    </script>   
</HTML>

v-on

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-on</title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="hello">按钮</button>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:'hello world'},methods:{hello:function(event){alert(this.message)}}});
    </script>   
</HTML>

v-model

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
    </head>
    <body>
        <div id="app">
            请输入的文本: <input type="text" v-model="message" value="hello"/>{{message}}
        </div>
        <div id="app1">
            多行文本： <textarea v-model="message"></textarea>  {{message}}
        </div>
        <div id="app2">
            单复选框：
            <input type="checkbox" id="checkbox" v-model="checked"/>
            <label for="checkbox">{{checked}}</label>
        </div>
        <div id="app3">
            多复选框：
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            &nbsp;&nbsp;
            <label for="jack">Jack</label>
            <input type="checkbox" id="join" value="Join" v-model="checkedNames">
            &nbsp;&nbsp;
            <label for="join">Join</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            &nbsp;&nbsp;
            <label for="mike">Mike</label>
            <span>选中的值：{{checkedNames}}</span>
        </div>
        <div id="app4">
            单选框按钮
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <span>选中的值：{{picked}}</span>
        </div>
        <div id="app5">
                下拉框:
                <select v-model="pan">
                    <option value="" disabled>---请选择---</option>
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                    <option>D</option>
                </select>
                <span>value:{{pan}}</span>
            </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:""}});
        new Vue({el:'#app1',data:{message:"白日依山尽，黄河入海流。欲穷千里目，更上一层楼。"}});
        new Vue({el:'#app2',data:{checked:true}})
        new Vue({el:'#app3',data:{checkedNames:[]}})
        new Vue({el:'#app4',data:{picked:'Two'}})
        new Vue({el:'#app5',data:{pan:''}})
    </script>   
</HTML>

component

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>component</title>
    </head>
    <body>

        <!-- <div id="app">
            <pan></pan>
        </div> -->
        <div id="app1">
            <pan v-for="item in items" v-bind:panh="item"></pan>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">
        Vue.component("pan",{props:["panh"],template:'<li>{{panh}}</li>'});
        // new Vue({el:"#app"});
        new Vue({el:"#app1",data:{items:["java","c++","c#","go"]}})
    </script>   
</HTML>

axios

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>axios</title>
    </head>
    <body>

    <style>
        /* 解决闪烁问题 */
        /* [v-cloak]{
            display: none;
        } */
    </style>
    <div id="app">
        <div>姓名: {{info.name}}</div>
        <div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
        <div>连接：<a v-bind:href="info.url" target="_bank">{{info.url}}</a></div>
    </div>
    </body>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript"> 
     new Vue({el:"#app",data(){return{info:{name:null,address:{country:null,city:null,street:null},url:null}}},mounted(){axios.get('http://172.30.3.216:3000/mock/465/get').then(response=>(this.info=response.data))}});
    </script>   

</HTML>

{
    "name": "狂神说Java",
    "url": "https://blog.kuangstudy.com",
    "page": 1,
    "isNonProfit": true,
    "address": {
      "street": "含光门",
      "city": "陕西西安",
      "country": "中国"
    },
    "links": [
      {
        "name": "bilibili",
        "url": "https://space.bilibili.com/95256449"
      },
      {
        "name": "狂神说Java",
        "url": "https://blog.kuangstudy.com"
      },
      {
        "name": "百度",
        "url": "https://www.baidu.com/"
      }
    ]
  }

computed

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>computed</title>
    </head>
    <body>    
    <div id="app">
        <div>time:{{time()}}</div>
        <div>time1:{{time1}}</div>
    </div>
    </body>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript"> 
     var vm = new Vue({el:"#app",data:{message:'11'},mounted(){},methods:{time:function(){return Date.now()}},computed:{time1:function(){ this.message; return Date.now();}}});
    </script>   

</HTML>

slot

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>slot</title>
    </head>
    <body>
        <div id="app">
            <todo>
                <todo-title slot="todo-title" :title="title"></todo-title>
                <todo-input slot="todo-input"   v-on:add="add_method"></todo-input>
                <todo-items slot="todo-items"  v-for="(item,index) in todoitems" :item="item" :index="index" v-on:remove="remove_method(index)" :key="index"></todo-items>
            </todo>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">


        Vue.component("todo",{template:'<div>\
            <slot name="todo-title"></slot>\
            <slot name="todo-input"></slot>\
            <ul>\
                <slot name="todo-items"></slot>\
            </ul>\
            </div>'});

        Vue.component('todo-title',{props:["title"],template:'<div>{{title}}</div>'});

		//仿写插入
        Vue.component('todo-input',{
            template:'<div><form>\
            请输入: <input type="text" v-model="arr" value="请输入"><br>\
            <button type="button"@click="add_component">提交</button>\
             </div>',
             props:["arr"],
             methods:{
                   add_component:function(){this.$emit('add',this.arr);}}
             })
        Vue.component('todo-items',{
            props:["item","index"],
            template:"<li>{{index+1}},{{item}} <button @click='remove_component'>删除</button></li>",
            methods:{remove_component:function(index){this.$emit('remove',index);}}
        })


        var vue = new Vue({
            el:"#app",
            data:{title:"登鹳雀楼",todoitems:['白日依山尽,','黄河入海流.','欲穷千里目,','更上一层楼.'],arr:''},
            methods:{
                remove_method:function(index){
                    console.log("删除了"+this.todoitems[index]+"OK");
                    this.todoitems.splice(index,1);
                },
                add_method:function(arr){
                    console.log("添加元素"+arr);
                    this.todoitems.splice(this.todoitems.size,0,arr);
                }
            }
        
        })
    </script>   
</HTML>

Webpack

npm install webpack

vue-router

npm install vue-router --save-dev

项目

创建项目

vue init webpack hello-vue
#进入工程目录
cd hello-vue
#安装vue-routern 
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启功测试
npm run dev

sass-loader node-sass 老是安装失败，后来发现和node版本有关系, 解决办法：

PS C:\代码\vue> node -v
v14.17.1

安装版本为：
"node-sass": "^4.14.1",
"sass-loader": "^7.3.1",

目录结构

assets：用于存放资源文件
components：用于存放Vue功能组件
views：用于存放Vue视图组件
router：用于存放vue-router配置

代码

views/user/User.vue

<template>
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}
  </div>
</template>
<script>
  export default {
    name: "User",
     beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
     next(vm => {
        //进入路由之前执行getData方法
        vm.getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    },
    methods:{
        getData: function(){
             this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/user.json'
        }).then(function (response) {
          console.log(response)
        })
        }
    }
  }
</script>
<style scoped>
</style>

views/user/UserList.vue

<template>
    <div>
  <h1>用户列表</h1>
  {{id}}
  </div>
</template>
<script>
  export default {
    name: "UserList",
      props: ['id']
  }
</script>
<style scoped>
</style>

views/Login.vue

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "Login",
      data(){
          return{
            form:{
              username:'',
              password:''
            },
            //表单验证，需要在 el-form-item 元素中增加prop属性
            rules:{
              username:[
                {required:true,message:"账号不可为空",trigger:"blur"}
              ],
              password:[
                {required:true,message:"密码不可为空",tigger:"blur"}
              ]
            },

            //对话框显示和隐藏
            dialogVisible:false
          }
      },
      methods:{
          onSubmit(formName){
            //为表单绑定验证功能
            this.$refs[formName].validate((valid)=>{
              if(valid){
                //使用vue-router路由到指定界面，该方式称为编程式导航
                this.$router.push('/main');
              }else{
                this.dialogVisible=true;
                return false;
              }
            });
          }
      }
    }
</script>

<style lang="scss" scoped>
  .login-box{
    border:1px solid #DCDFE6;
    width: 350px;
    margin:180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title{
    text-align:center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

views/Main.vue

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                <!--插入的地方-->
                  <!-- <router-link to="/user/user">个人信息</router-link> -->
				  <router-link :to="{name:'User',params:{id:1}}">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                <!--插入的地方-->
                  <!-- <router-link to="/user/userlist">用户列表</router-link> -->
					<router-link :to="{name:'UserList',params:{id:222}}">用户列表</router-link>
                </el-menu-item>
				<el-menu-item index="1-3">
    				<router-link to="/goHome">回到首页</router-link>
				</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分类管理</el-menu-item>
                <el-menu-item index="2-2">内容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main>
          <!--在这里展示视图-->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

views/NotFound.vue

<template>
    <div>
      <h1>404,你的页面走丢了</h1>
    </div>
</template>
<script>
    export default {
        name: "NotFound"
    }
</script>
<style scoped>
</style>

router/index.js

import Vue from'vue'
//导入路由插件
import Router from 'vue-router'
//导入上面定义的组件
import Main from "../views/Main";
import Login from "../views/Login";

import User from "../views/user/User";
import UserList from "../views/user/UserList";
import NotFound from '../views/NotFound'
//安装路由
Vue.use(Router) ;
//配置路由
export default new Router({
	//路径不带 # 符号
	mode: 'history',
	routes:[
		   {
			//路由路径
			path:'/main',
			//路由名称
			name:'main',
			children: [
				{
				//   path: '/user/user/',
				  path: '/user/user/:id',
				  name: 'User',
				  component: User,
				}, {
				  path: '/user/userlist/:id',
				  name: 'UserList',
				  component: UserList,
				  props: true
				},
			  ],
			//跳转到组件
			component:Main
			},{
			//路由路径
			path:'/',
			//路由名称
			name:'login',
			//跳转到组件
			component:Login
			},{
				path: '/goHome',
				redirect: '/main'
			  },{
				path: '*',
				component: NotFound
			 }
		]
	});

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

//导入上面创建的路由配置目录
import router from './router'//自动扫描里面的路由配置
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'



// Vue.config.productionTip = false
Vue.use(router);
Vue.use(ElementUI);
Vue.use(VueAxios, axios);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render:h=>h(App)
})

Vue 狂神 gt lt script

有关狂神--Vue的更多相关文章

计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
(附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图：这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否
vue3.0 + vite2.0+如何兼容低版本浏览器 - 2
这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：
Vue3的新特性 - 2
Vue3的新特性包括：CompositionAPI：一种新的API风格，可将有关组件功能的代码逻辑封装在单独的函数中，从而更好地管理和重用代码。Teleport：可以让组件在DOM层次结构中的任何位置渲染。Suspense：一种新的异步渲染模式，可以优化应用程序的性能。更快的渲染速度：Vue3使用了新的虚拟DOM算法，并且对渲染过程进行了优化，因此在渲染大型应用时性能更高。更小的包大小：Vue3的打包大小比Vue2更小，因为它不再需要依赖像vue-template-compiler这样的工具。其他改进：Vue3还具有其他一些改进，例如更好的TypeScript支持、更好的错误提示和更好的调试工
vue2+element-ui,el-aside侧边栏容器收缩与展开 - 2
一、概览实现效果如下：二、项目环境1、nodejs版本node-vv16.16.02、npm版本npm-vnpmWARNconfigglobal`--global`,`--local`aredeprecated.Use`--location=global`instead.8.15.03、vue脚手架版本vue-V@vue/cli5.0.8三、创建vue项目1、创建名为vuetest的项目vuecreatevuetest选择Default（[Vue2]babel,eslint） 2、切换到项目目录，启动项目cdvuetestnpmrunserve 3、使用浏览器预览 http://localh
Vue学习笔记：Vue element-ui中table组件的使用----接入后端数据 - 2
记个笔记以免遗忘，建议还是查看Element-UI提供的官方文档学习，自己摸索比较难受官方文档：Element-UI组件TableElement-UI官网提供了许多Table格式，这里以一个带有筛选器的表格为例表格的官网显示效果：直接将官方提供的示例代码贴入.vue文件中即可使用显示的数据是通过data()方法提供的假数据。方法见下：data(){return{tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1
ruoyi-vue 新建模块--若依前后端分离系统代码生成。 - 2
目录：1.在数据库中创建表2.使用代码生成功能，生成基础代码2.1修改代码生成器中配置文件generator.yml2.2使用系统工具代码生成3.新建子模块，迁移代码3.1创建grayskyax-assetsmanagement模块3.2在RuoYi整个项目下的`pom.xml`中引入刚刚新建的模块：3.3在ruoyi-admin模块的pom.xml中引入新建的模块3.4在新建的assetsManagement模块中引入ruoyi-common模块3.5将之前解压后的文件放如项目的对应目录下;3.6在数据库中执行生成的sql脚本3.7配置扫描路径application.yml,applicat
项目部署——Vue项目部署到云服务器(linux) - 2
因为期末了，要检查web大作业，虽然没有要求，但我想把项目部署一下，以免每次都要打开运行了，部署过踩了许多坑，这里总结一一下这次部署的流程吧。项目我个人进行前后端分离的全栈开发，有后台，后台部署的过程由于篇幅原因将在下一篇中讲解准备工作准备一台虚拟机或者云服务器（linux系统）首先，由于真实的项目基本上都部署在linux系统上，因此为了贴近真实，我们需要准备一台带有linux系统的虚拟机或者云服务器，由于虚拟机不能在自己的电脑关机了以后继续运行，因此这里推荐云服务器，目前用过阿里云，腾讯云两款云服务器部署项目,操作基本上都十分简单。新用户可以在腾讯云和阿里云平台都有两周的免费云服务器可以领取
javascript - vue.js中v-show的回调 - 2
有没有使用vue.js的on-shown和on-show的回调方法？我在div元素上使用v-show="my-condition"。但里面有一些charts.js图表，除非可见，否则无法呈现。任何人都知道如何仅在父级可见时才渲染chart.js？它们位于可选择的选项卡内，因此它可能会触发多次。我正在使用Vue.js和vue-strap。最佳答案查看thisanswer-在类似情况下，使用nextTick()对我有用。简而言之:newVue({...data:{myCondition:false},watch:{myConditi

狂神--Vue

概述

前端三要素

JavaScript框架

UI框架

了解前后分离的演变史

MVC时代

基于AJAX带来的SPA时代

前端为主的MV*时代

第一个Vue程序

什么是MVVM

为什么要使用MVVM

View

Model

ViewModel

Vue

MVVM模式的实现者

为什么要使用Vue.js

第一个Vue程序

基础语法指令

v-bind

v-if,v-else

v-for

v-on

v-model

component

axios

computed

slot

Webpack

vue-router

项目

创建项目

目录结构

代码

views/user/User.vue

views/user/UserList.vue

views/Login.vue

views/Main.vue

views/NotFound.vue

router/index.js

main.js

有关狂神--Vue的更多相关文章

随机推荐