Vue

vue init webpack 项目名字

vue create 项目名字

VUE基本语法

v-bind:绑定数据

v-if,v-else-if,v-else:值为真就显示if的，否则显示else里面的

v-for:for循环

4.v-on事件绑定

• 方法必须绑定在Vue的Methods对象中，v-on:事件

数据的双向绑定

v-model：就是文本一边输入那个后面的数据跟着改变

组件

component：组件

组件通过props传值

通过v-bind绑定props

<div id="app">
    <qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
</div>
<script>
    Vue.component("组件名字",{
        props: ['qin'],
        template: '<li>{{qin}}</li>'
    })

    var vm = new Vue({
        el: "#app",
        data: {
            items: ['Java','Python','Php']
        }
    })
</script>

插槽slot

<div id="app">
    <todo>
        //通过slot绑定他们的组件，v-bind绑定数据
        <todo-title slot="todo-title" v-bind:name="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>
<script>
    //slot 插槽 这个组件要定义在前面不然出不来数据
    //通过name绑定下面组件的名字
    Vue.component("todo", {
        template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                <div>'
    });
    Vue.component("todo-title", {
        //属性
        props: ['name'],
        template: '<div>{{name}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    let vm = new Vue({
        el: "#app",
        data: {
            //标题
            title: "图书馆系列图书",
            //列表
            todoItems: ['三国演义', '红楼梦', '西游记', '水浒传']
        }
    });
</script>

自定义事件

就是嵌套组件最里面组件访问外边的组件及实例

this.$emit (‘自定义事件名’,参数)

<div id="app">
    <todo>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>
<script>
    //slot 插槽 这个组件要定义在前面不然出不来数据
    Vue.component("todo", {
        template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                <div>'
    });
    Vue.component("todo-items", {
        props: ['item','index'],
        template: '<li>{{index}}---{{item}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                // this.$emit 自定义事件分发
                this.$emit('remove',index)
            }
        }
    });
    let vm = new Vue({
        el: "#app",
        data: {
            //标题
            title: "图书馆系列图书",
            //列表
            todoItems: ['三国演义', '红楼梦', '西游记', '水浒传']
        },
        methods: {
            removeItems: function (index) {
                console.log("删除了"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);
            }
        }
    });
</script>
</body>
</html>

vue-router

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

<router-view></router-view>这个是渲染既展示组件的模板<template>

vue + ElementUI

1. 创建一个名为 hello-vue 的工程

   vue init webpack hello-vue

2. 安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和node-sass 四个插件

   # 进入工程目录
   cd hello-vue
   # 安装 vue-router
   npm install vue-router --save-dev
   # 安装 element-ui
   npm i element-ui -S
   # 安装依赖
   npm install
   # 安装 SASS 加载器  用于导入ui里面的css
   cnpm install sass-loader node-sass --save-dev
   # 启动测试
   npm run dev	
   
   

3. Npm命令解释

   npm install moduleName：安装模块到项目目录下

   npm install -g moduleName：-g 的意思是将模块安装到全局，具体安装到磁盘的哪个位置，要看npm config prefix的位置

   npm install moduleName -save：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写

   npm install moduleName -save-dev：–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

路由嵌套

就是在路由里面加一个children属性后面接子路由

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

传递参数

1. 前端传递参数

   route-link位置处 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径；

   <!--name：传组件名 params：传递参数，需要绑定对象：v-bind-->
   <router-link v-bind:to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>
   
   

2. 修改路由配置，增加props：true属性

   主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符

   {
     path: '/user/profile/:id',
     name: 'UserProfile',
     component: UserProfile,
     props:true
   }
   
   

3. 前端显示

   在要展示的组件Profile.vue中接收参数

   <template>
     <div>
       个人信息
       {{ id }}
     </div>
   </template>
   <script>
       export default {
         props: ['id'],
         name: "UserProfile"
       }
   </script>
   <style scoped>
   </style>
   
   

组件重定向

就是在路由下配置 redirect

• 说明：这里定义了两个路径，一个是 /main ，一个是 /goHome，其中 /goHome 重定向到了 /main 路径，由此可以看出重定向不需要定义组件；

{
  path: '/main',
  name: 'Main',
  component: Main
},
{
  path: '/goHome',
  redirect: '/main'
}

使用这样就好了<router-link to="/goHome">回到首页</router-link>

钩子函数

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行

  export default {
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    }
  }

参数说明:

to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
next() 跳入下一个页面
next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
next(false) 返回原来的页面
next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例