Vue02

Posted 2020-11-27 sxyuyu

自定义事件分发

组件内部绑定事件需要使用

this.$emit("函数名",参数)

如果组件想要删除vue里面的数据，就要通过前端。v-on:“组件里面函数名=“Vue里面的函数名”

组件

Vue.component("slot-item",{
        props:["item","index"],
        template: "<li>{{index}}--{{item}}<button @click=‘remove‘>删除</button></li>",
        methods:{
            remove:function (index) {
                this.$emit("remove",index)
            }
        }
    });

vue

methods: {
            removeItems: function (index) {
                this.items.splice(index,1)
            }
        }

前端

<div id="app">

    <slot-wrap>
        <slot-title slot="slot-title" v-bind:title="title"></slot-title>
        <slot-item slot="slot-item" v-for="(item,index) in items"
                   v-bind:item="item" v-bind:index="index" v-on:remove="removeItems"></slot-item>
    </slot-wrap>

</div>

• v-on（绑定事件）
• v-bind（绑定数据）

vue-cli程序安装

1. 安装nodejs
2. 安装npm
3. 安装cnpm npm -install-cnpm -g
4. 安装vue-cli cnpm install vue-cli -g
5. vue list显示信息 可能出现

不处理的话vue项目无法启动

解决方式：修改代理，如下

Vue-cli新建

1. cmd进入文件夹，vue init webpack project, project是你创建的文件夹名。
2. cd project，进入文件夹 npm install
3. 启动项目 npm run dev

安装vue-router

在当前项目下安装路由npm install vue-router --save-dev

1. 新建一个router包存在路由配置
2. 导入vue、路由及相关组件
3. 配置path和组件

• index.js

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import Context from ‘../components/Context‘
import Main from ‘../components/Main‘
import Song from ‘../components/Song‘

// 安装路由
Vue.use(VueRouter);
// 配置导出路由
export default new VueRouter({
  routes:[
    {
      // 路径
      path:‘/context‘,
      //跳转的组件
      component:Context
    },
    {
      // 路径
      path:‘/main‘,
      //跳转的组件
      component:Main
    },
    {
      // 路径
      path:‘/song‘,
      //跳转的组件
      component:Song
    }
  ]
});

• App.vue

<template>
  <div id="app">

    <h1>哈哈哈22</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/context">内容页</router-link>
    <router-link to="/song">测试</router-link>
    <router-view></router-view>
  </div>
</template>

• main.js

import Vue from ‘vue‘
import App from ‘./App‘

import router from ‘./router‘// 自动扫描里面的路由配置
Vue.config.productionTip = false;

new Vue({
  el: ‘#app‘,
  // 配置路由
  router,
  components: { App },
  template: ‘<App/>‘
});

创建工程

1. 进入工程目录 cd hello-vue
2. 安装vue-router cnpm install vue-router --save-dev
3. 安装elment-ui npm i element-ui -S
4. 安装所有的依赖 npm install
5. 安装SASS加载器 cnpm install sass-loader node-sass --save-dev
6. 启动测试 npm run dev

• 在初始化项目的遇到的错误

• 解决方法 管理员进cmd

npm config rm proxy
npm config rm https-proxy

路由跳转页面

1. 在mian.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‘;
import axios from ‘axios‘
import VueAxios from ‘vue-axios‘

Vue.use(VueAxios, axios)
Vue.use(router);
Vue.use(ElementUI);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  // components: { App },
  // template: ‘<App/>‘,
  render: h => h(App)
});

2. 新建router文件夹和index.js，导入vue，vue-router等页面组件

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘

import Login from ‘../views/Login‘
import Main from ‘../views/Main‘
import UserProfile from‘../views/Profile‘
import UserList from‘../views/List‘
import Not from‘../views/Notfond‘
Vue.use(VueRouter);

export default new VueRouter({
  mode:‘history‘,// 去除地址中#
  routes:[
    {
      path:"/login",
      component:Login,
    },
    {
      path:‘/main/:pass‘,
      component:Main,
      props:true,
      children:[
        {path:‘/user/list‘,component:UserList},
      {path:‘/user/profile/:id‘,name:‘UserProfile‘,component:UserProfile,props:true}
      ]
    },
    {
      path:"/gohome",
      redirect:"/main"
    },
    {
      path:"*",
      component:Not
    }
  ]
});

3. 在需要跳转的地方,加，(显示被跳转的页面内容)

 <router-link to="/user/list">用户管理</router-link>
	  <el-col :span="8">
        <router-view></router-view>
      </el-col>

vue+elementUI

1. 在main.js导入elementUI

import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
Vue.use(ElementUI);

2. 官网导入需要的组件等（注意必须要嵌入在templaye的div中）即可使用

路由嵌套(children)

{
      path:‘/main/:pass‘,
      component:Main,
      props:true,
      children:[
        {path:‘/user/list‘,component:UserList},
      {path:‘/user/profile/:id‘,name:‘UserProfile‘,component:UserProfile,props:true}
      ]
    },

参数传递与重定向

this.$router.push(‘/main/‘+this.ruleForm.pass)//获取登录页面的用户名
index.js文件中路径写法：{path:‘/main/:pass‘}

 <router-link :to="{name:‘UserProfile（组件名）‘,params:{id:123}}">文件管理</router-link>

{path:‘/user/profile/:id‘,name:‘UserProfile‘,component:UserProfile,props:true}// index格式

profile.vue 通过props: ["id"],获取参数    并通过{{id}}显示在页面上或者直接 <!--{{$route.params.id}}-->显示在页面上

{
      path:"/gohome",
      redirect:"/main"
}

404和路由钩子

{
      path:"*",
      component:Not
}

<script>
  export default {
    props: ["id"],
    name: "UserProfile",
    beforeRouteEnter(to,from,next){
      console.log("进入钩子函数之前");
      next(vm => {
        vm.getData();// 进入路由之前执行getDaTa()
      });
    },
    beforeRouteLeave(to,from,next){
      console.log("离开钩子函数之前");
      next();
    },
    methods:{
      getData:function () {
        this.axios({
          method:‘get‘,
          url:‘http://localhost:8080/static/mock/data.json‘
        }).then(function (response) {
          console.log(response);
        });
      }
    }
  }
</script>