Vue开发笔记

<template>

</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>
		scoped就是作用域，在这里面写的style只在当前模板生效，不加的话在所有模板生效
</style>

例子

项目结构

Content.vue 内容页

<template>
  <h1>内容页</h1>
</template>

<script>
    export default {
        name: "Content"			导出
    }
</script>

<style scoped>

</style>

**main.vue ** 主页

<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "main"		导出
    }
</script>

<style scoped>

</style>

路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from "../components/Content";
import Main from "../components/main"
//安装路由
Vue.use(VueRouter)

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径，页面跳转组件 @RequestMapping
      path: '/content',
      //配置名字
      name: 'content',
      //跳转的组件
      component: Content
    },
    {
      //路由路径，页面跳转组件
      path: '/main',
      //配置名字
      name: 'content',
      //跳转的组件
      component: Main
    }
  ]
});

全局主入口 main.js

import Vue from 'vue'
import App from './App'
import router from './router' //只用告诉目录在哪，自动扫描里面的配置

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

全局唯一实例App.vue

<template>
  <div id="app">
    <h1>Vue-Router</h1>
    <img src="./assets/logo.png">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

细节：

1.在我们的router的主配置index.js中我们配置导出路由的时候，因为我们需要替换的内容都在一个位置，所以我们名字写成了一样的，而且在配置导出路由的时候，new的对象一定要和上面导入的vue-router同名

2…全局主配置index.js因为我们的导入路由其他模板在路由中做完了，我们只需要扫描路由的配置即可，而且在我们的实例中，只需要将router写入就算是配置了

3.App.vue

<router-link to="/main">首页</router-link>

负责页面跳转 ，跳转到to后面的地址

<router-view></router-view>

负责我们组件模板的显示，如果不写我们页面会跳转，但是模板中无显示

效果

同理，点击内容页下面的内容：首页会变成我们内容页模板的内容:内容页

vue+elementUI

1.创建项目，并且初始化

vue init webpack Login-vue		项目名为wang-vue

2.进入项目目录，安装依赖

#安装vue-router
npm install vue-router --save-dev
#安装elementUI
npm i element-ui -s
#安装依赖
npm install
#安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启动模式
npm run dev

●npm install moduleName :安装模块到项目目录下
●npm install -g moduleName -g的意思是将模块安装到全局，具体安装到磁盘哪个位置,
要看npm config prefix的位置
●npm install ——save moduleName : –save的意思是将模块安装到项目目录下，并在
package文件的dependencies节点写入依赖，-S为该命令的缩写
●npm install -save-dev moduleNam e:a**–save- dev的意思是将模块安装到项目目录下**，并
在package文件的devDependencies节点写入依赖，-D为该命令的缩写

3.IDEA打开项目

我们把vue给我们自动生成的去掉

写我们自己的代码 首页main.vue

<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "main"
    }
</script>

<style scoped>

</style>

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: '密码不能为空',trigger:'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>

main.js

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';
Vue.config.productionTip = false

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

app.vue

<template>
  <div id="app">
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

运行项目，测试结果

路由嵌套

我们创建了一个List列表页和个人信息页

<template>
  <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/profile">个人信息</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/user/list">用户列表</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>
          <e1-menu-item-group>
            <el-menu-item index="2-1">分类管理</el-menu-item>
            <el-menu-item index="2-2">内容列表</el-menu-item>
          </e1-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
  </el-container>
</template>

<script>
  export default {
    name: "Main"
  }
</script>

<style scoped lang="scss">
  .el-header {
    background-color: #048bd1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

同样我们的主页用了一个侧边栏来控制路由的跳转

那我们的想法是在主页上侧边栏进入我们的路由跳转，那么就用到了路由嵌套

Vue.use(VueRouter);

export default new VueRouter({
  routes:[
    {
      path: '/main',
      component : Main,
      children: [
        {path : '/user/profile',component:UserProfile},
        {path : '/user/list',component:UserList}
      ]
    },
    {
      path: '/login',
      component:  Login//嵌套路由配置
    }
  ]
})

在我们的主页面下，用了children的标签，嵌套路由，这样我们就可以在一个页面上，单机我们想进入的页面，中间部分会自动跳转到路由指定的模板

参数传递和重定向

参数传递方式

方法一

<!--              name是地址（还可以传组件名），params是传递参数，因为我们要传递参数,需要对象，要双向绑定数据，要用v-bind绑定的-->

<router-link :to="{name:'UserProfile',params: {id:1}}">个人信息</router-link>

比如这个地方，我们需要路由跳转到我们的UserProfile组件，也就是个人信息组件，但是我们想给他传id，也就是跳转到id为xxxx的个人信息组件中，注释中也提到了，name就是我们的路由地址，params就是我们的参数，需要注意的是因为需要传递参数，即对象，我们的vue就需要实现双向绑定，因此需要v-bind来进行双向绑定

Vue.use(VueRouter);

export default new VueRouter({
  routes:[
    {
      path: '/main',
      component : Main,
      children: [
        {path : '/user/profile/:id',
          name: 'UserProfile',
          component:UserProfile},
        {path : '/user/list',component:UserList}
      ]
    },
    {
      path: '/login',
      component:  Login//嵌套路由配置
    }
  ]
})

同样的，既然我们传递了参数，那么路由管理跳转的时候也需要把这个参数接收到，怎么接收呢？如上面代码所示**/:进行绑定**后面跟传递的参数名称即可

那么到了具体的组件中，这个传递的参数如何显示呢？

<template>
    <h1>个人信息</h1>
  <h1>{{$route.params.id}}</h1>
</template>

<script>
    export default {
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

注意：{{$route.params.id}}需要写进标签内，否则会爆出outside xxx 错误

所有的元素，必须不能在根节点下，需要便签嵌套

方法二 props

Vue.use(VueRouter);

export default new VueRouter({
  routes:[
    {
      path: '/main',
      component : Main,
      children: [
        {path : '/user/profile/:id',
          name: 'UserProfile',
          component:UserProfile,
        props: true},
        {path : '/user/list',component:UserList}
      ]
    },
    {
      path: '/login',
      component:  Login//嵌套路由配置
    }
  ]
})

首先我们的路由配置中，包含参数传递的路由需要开启参数传递支持，也就是props: true

我们的前端页面不需要任何改变，其次需要改变的地方是

<template>
    <h1>个人信息</h1>
  {{id}}
</template>

<script>
    export default {
        props:['id'],
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

我们在我们的组件中，可以直接通过传统的组件参数方式接受我们的参数，并且在我们的模板中可以直接使用{{id}}来显示

重定向

export default new VueRouter({
  routes:[
    {
      path: '/main',
      component : Main,
      children: [
        {path : '/user/profile/:id',
          name: 'UserProfile',
          component:UserProfile,
        props: true},
        {path : '/user/list',component:UserList}
      ]
    },
    {
      path: '/login',
      component:  Login//嵌套路由配置
    },
    {
      path: '/gohome',
      redirect: '/main'
    }
  ]
})

我们定义我们的重定向路由的配置，路径是/gohome,重定向的目标是/main

我们在主页面构造一个路由连接

<el-submenu index="3">
  <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
    <el-menu-item index="3-1">
      <router-link to="/gohome">回到首页</router-link>
    </el-menu-item>
</el-submenu>

即可完成我们的重定向