vue中应该注意到的细节

1.v-on在绑定事件的时候如果事件不需要传参，可以省略()，

2.这个时候系统会默认给绑定的事件传event参数，这时候如果想获取到event对象，也可以加（）

3.如果需要传递参数的时候，绑定事件的时候就必须要加()，并传入参数

4.如果自己又要传入参数，但是用想拿到默认的event参数怎么办

传入参数的时候event必须要加上$符号

v-on阻止事件冒泡

@click.stop

监听键盘事件

只监听输入回车

v-once

只会触发一次函数

v-if v-else v-show

v-if

v-else

v-for

v-for遍历数组

没有用到索引下标

用到了索引下标

v-for遍历对象

1.遍历对象如果只有一个值，那么获得的是value

2.如果想获取key和value

3.还可以获取index

splice()

点击切换颜色

<style>
.active {
  color: red;
}
</style>
<template>
  <div class="about">
    <ul>
      <li
        v-for="(item, index) in movies"
        :key="item"
        @click="changeColor(index)"
        :class="{ active: current === index }"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: ["海贼王", "火影忍者", "名侦探柯南"],
      current: 0,
    };
  },
  methods: {
    changeColor(index) {
      this.current = index;
    },
  },
};
</script>

v-model

v-model结合radio使用

v-model结合checkbox

单选框

多选框

加 multiple可以多选

input中的值绑定

v-model修饰符

1. lazy修饰符

2. number修饰符

3.trim修饰符

组件

注册组件的基本步骤

注册子组件

注册组件的语法糖

注册全局组件语法糖

注册局部组件语法糖

模板分离写法

父子组件通信

父组件通过props向子组件传递数据

props写成数组字符串的形式很别扭，可以加类型限制和提供默认值

子传父（自定义事件）子组件产生了事件，希望父组件知道

子组件监听事件

子组件发射事件

父组件监听子组件发射的事件触发父组件中的cpnClick事件

这里的item如果在上一步传递的时候@itemClick=‘cpnclick(没有传过来item)’，系统会默认传递item，就像之前会默认传递event一样

父组件访问子组件

$children（一般不用这种方式访问子组件，一般用$refs来拿）

通过refs访问子组件

子组件访问父组件

$parent(开发过程中不建议使用)

$root访问根组件

插槽

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

<!--
1.插槽的基本使用 <slot></slot>
2.插槽的默认值 <slot>button</slot>
3.如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素
-->

<div id="app">
  <cpn></cpn>

  <cpn><span>哈哈哈</span></cpn>
  <cpn><i>呵呵呵</i></cpn>
  <cpn>
    <i>呵呵呵</i>
    <div>我是div元素</div>
    <p>我是p元素</p>
  </cpn>

  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>


<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是组件, 哈哈哈</p>
    <slot><button>按钮</button></slot>
    <!--<button>按钮</button>-->
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

</body>
</html>

具名插槽

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

<div id="app">
  <cpn><span slot="center">标题</span></cpn>
  <cpn><button slot="left">返回</button></cpn>
</div>


<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

</body>
</html>

编译作用域

isShow会用实例中的isShow，而不是cpn组件中的isShow

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

<div id="app">
  <cpn v-show="isShow"></cpn>
  <cpn v-for="item in names"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是子组件</h2>
    <p>我是内容, 哈哈哈</p>
    <button v-show="isShow">按钮</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            isShow: false
          }
        }
      },
    }
  })
</script>

</body>
</html>

安装使用路由

3.挂载到vue实例上

路由跳转的两种方式

1.通过router-link跳转，router-view是跳转后的组件显示的位置

2.通过事件监听进行跳转

router-link补充

router-link默认是渲染成a标签，可以用tag修改

active-class不需要每个标签都添加，可以再index文件中配置

路由重定向，模式

模式

重定向

动态路由

想要拿到动态的id

路由懒加载

嵌套路由

传递参数

导航守卫

前置守卫beforeEach

后置守卫

keep-alive

判断路由是否处于活跃状态的方法

给文件路径配置别名

在脚手架3中在vue.config.js下配置

src下的路径需要加上~

vuex

main,js中的代码
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  store,//*********
  render: h => h(App)
})
index

通过mutation来修改state

mutations 携带参数

1.正常的提交风格

2.特殊的提交风格

mutation响应规则

getter基本使用

用getter里的方法不需要加()

action使用

现在组件中监听dispatch到vuex中的action里

action再commit到vuex中的mutation中

vuex-module

p140