60、我的大前端笔记

这是新版本的安装方式，首先安装Vue Cli

安装命令：npm install -g @vue/cli

查看vue的版本： vue --version

管理员方式打开powersheel，进入到你要创建项目的位置：cd

创建你的项目命令: vue create yeb

运行项目命令： npm run serve

安装element-ui

命令：npm i element-ui -S

引入element-ui，打开main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

安装axios 通信组件命令：npm install axios -S

二、 组件嵌套组件之间的参数传递和用法

1、第一步：导入你要用到的vue模板文件：

 import MyComponent from '../components/MyComponent'

2、第二步：申明该组件的名字： 

  components: {
    MyComponent
  },

3、用html标签的形式引入你定义的组件，:userId="user.userId"用来绑定数据，ref="aboutRef" 用来获取子组件的变量值

<template v-if="this.show === 1">
      <my-component ref="aboutRef" :userId="user.userId" :userTyppe="user.userType" :requestId="user.requestId"></my-component>
    </template>

4、使用props 属性用来绑定数据

props: {
      userId: Number,
      userType: String,
      requestId: String
    },

mounted() {
  this.initMyComponent();
},

methods: {
  initMyComponent() {
     console.info("UserId: ",this.userId);
     console.info("requestId: ",this.requestId);
   }
}

5、this.$refs.aboutRef.ruleForm.pass  用来获取子组件相关属性值

 console.info(this.$refs.aboutRef.ruleForm.pass);

三、路由跳转页面时参数的传递

 第一步：在 router 文件的 index.js 中定义路由规则

{
    path: "/myComponent",
    name: "MyComponent",
    component: MyComponent
  }

 第二步：路由跳转方法，指定要跳转到name=MyComponent组件页面上，并且带上参数

gotoNew() {
        this.$router.push({
          name: 'MyComponent',
          params: { userId: '123' }
        });
      }

第三步：在要跳转的目标页面上获取路由带过来的参数

mounted() {
   this.getRouteParams();
},
methods: {
   getRouteParams() {
        var userId = this.$route.params.userId;
        alert(userId);
      },
}

 四、父子组件之间的参数传递，和事件的相互通知，以分页组件来举例

 1、父组件的定义

<template>
  <div class="home">
    <show-page v-if="show===1"
               ref="pageRef" :totalSize="totalSize" :pageSize="pageSize"
               @sizeChange="handleSizeChange" @currentChange="handleCurrentChange">
    </show-page>
  </div>
</template>

<script>
  import ShowPage from '../components/ShowPage'

  export default {
    name: "Test",
    components: {
      ShowPage
    },
    data () {
      return {
        pageSize: 10,
        totalSize: 100,
        show: 1
      }
    },
    methods: {
      handleSizeChange(value) {
        console.info(value);
      },
      handleCurrentChange(value) {
        console.info(value);
      }
    }
  }
</script>

<style scoped>

</style>

2、子组件的定义

<template>
  <div class="block">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize">
    </el-pagination>
  </div>
</template>

<style>

</style>

<script>
  export default {
    name: 'ShowPage',
    props:{
      totalSize: Number,
      pageSize: Number
    },
    component: {},
    data() {
      return {
        currentPage1: 1,
        currentPage2: 2,
        currentPage3: 3,
        currentPage4: 4
      };
    },
    mounted(){

    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.$emit('sizeChange',val);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.$emit('currentChange',val);
      }
    }
  }
</script>

3、总结：

props属性在子组件中定义，目的是为了接收父组件传递过来的参数。

ref="pageRef" 属性子在父组件中定义，目的为了在父组件中拿到子组件的所有属性值，例如：this.$refs.pageRef.属性

this.$emit('pageChange',value)  $emit通知父组件中的pageChange方法调用，并传递value参数过去

 

这是老版本的安装方式

1、创建一个vue项目： vue init webpack hello-vue 一步步选择 N就可以

2、cd hello-vue

3、安装vue-router命令：npm install vue-router --save-dev

4、安装element-ui 命令：npm i element-ui -S

5、npm install

6、安装SASS加载器 命令：cnpm install sass-loader node-sass --save-dev

7、运行项目：npm run dev