vue笔记

初始化项目

vue init webpack vue-demo

ESLint ? N 是否需要 js 语法检测

进入 cd vue-demo

执行

npm install

接下来执行

npm run dev

，默认浏览器会自动打开

打包发布：

npm run build

npm install -g serve

serve dist

基础指令：

{{}}

v-one: 只渲染一次

v-html:解析HTML结构

v-bind: => 简写 ：

v-if :是惰性的

v-else

v-show:是否显示或隐藏，只是通过操作css

v-for (k,i) (v,k,i) :key

v-on: => 简写 @

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

变异数组：

• push()
• pop()
• shift()
• unshift()前
• splice()
• sort()
• reverse()
• concat 数组合并

数组调用变异方法：example1.items.push({ message: ‘Baz‘ }) 。

替换数组：

例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。

components： 组件

computed() 计算属性

methods: 方法

Class与Style绑定 class="[{}]" 对象中可以接受字符串，数组中接受对象

data: data函数,初始化数据 data中的a,b,c 获取常用方法: const{ a,b,c} = this

props:[] 通过 Prop 向子组件传递数据
调用内建的 [$emit 方法]并传入事件的名字，来向父级组件触发一个事件：
使用 $emit 的第二个参数来提供这个值：

<template>
  <div>
    父组件: {{mon}}  <!--子传父-->
    <child @money="getMoney" title="一个小目标"/>
  </div>
</template>

<script>
  import child from ‘./child‘

  export default {
    name: "parent",
    data() {
      return {
        mon: "",
      }
    },
    components: {
      child,
    },
    methods: {
      getMoney(data) {   // 子传父
        this.mon = data;
      }
    }
  }
</script>

<style scoped>

</style>

<template>
  <div>
    子组件:
    {{title}}   <!--父传子-->
    <button @click="sendMoney">点击</button>  <!--子传父-->
  </div>
</template>

<script>
  export default {
    name: "child",
    data() {
      return {}
    },
    props: ["title"],//父传子
    methods: {
      sendMoney() {   //子传父
        this.$emit("money", "先整一个亿？")
      }
    }
  }
</script>

<style scoped>

</style>

类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

// 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: ‘hello‘ }
      }
    },

加载组件

<component v-bind:is="currentTabComponent"></component>

keep-alive

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

访问根实例：

在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问。例如，在这个根实例中：

// Vue 根实例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。

// 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()

访问子组件实例或子元素：

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput

插槽：

<模板1>

? you profile

在模板1的会被 you profile替换

1.基础插槽
2.具名插槽
3.编译作用域
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
4.作用域插槽（数据传递）
在 2.5.0+，slot-scope 不再限制在

vue笔记

原文：https://www.cnblogs.com/fly-book/p/10362848.html