Vue.js核心概念与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/it_boy_elite/article/details/100660438

新建vue项目

这篇有详解vue新建项目

模板语法

文本–两种表达方式
- Message: {{ msg }}
- 123 msg在data中定义, 注意此时的123不再显示
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。这个将不会改变: {{ msg }}
v-html(下面组件例子中有比较)
- 不加v-html则显示源码
- 加了v-html显示编译后的
v-bind
v-on 会调用methods中相应的方法

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

计算属性和侦听器
- 计算属性会调用computed中的函数。我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
- 计算属性的setter
- 侦听器vue官方解释
条件渲染v-if, v-else-if, v-else。 v-show
- v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-for
v-model双向绑定。包括单选框、复选框、文本、文本域等

组件

组件就是一个可复用的vue的实例
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
组件包含的内容

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    // 页面或组件定义的方法的集合，可通过 vm.reset() 直接调用
    reset: function () {
      this.msg = '这是重新设置之后的数据'
    }
  },
  computed: {
    // 计算属性(computed)与方法(methods) 类似，如果计算数据量比较大，建议放到这里
    // 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
    // 参考（https://cn.vuejs.org/v2/api/?#computed）
  },
  filters: {
    // 局部过滤器注册的地方
  },
  // 生命周期钩子
  beforeCreate: function () {
    // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    console.log('beforeCreate')
  },
  created: function () {
    // 在实例创建完成后被立即调用。
    console.log('created')
  },
  beforeMount: function () {
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。
    console.log('beforeMount')
  },
  mounted: function () {
    // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
    console.log('mounted')
  },
  beforeUpdate: function () {
    // 数据更新时调用，发生在虚拟 DOM 打补丁之前
    console.log('beforeUpdate')
  },
  updated: function () {
    // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    console.log('updated')
  },
  beforeDestroy: function () {
    // 实例销毁之前调用。在这一步，实例仍然完全可用。
    console.log('beforeDestroy')
  },
  destroyed: function () {
    console.log('destroyed')
    // Vue 实例销毁后调用。
    // 调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

组件传值组件传值方式
- prop采用驼峰命名法。
- prop传递数字、文本、布尔值、数组、对象
- prop验证
插槽: 没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容插槽详解
就会跑到它这里了！
过滤器

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

单文件组件
问题:
- 问题1:为什么在项目中data需要使用return返回数据呢？答:不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

Vue Router

将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们


声明式
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <router-link to="/foo">Go to Foo</router-link>
 
编程式
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

动态路由匹配
- /user/:username /user/evan { username: 'evan' }
- /user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: '123' }
- 取值:$route.params $route.params.id
嵌套路由
命名视图