学习该章节重点知识
- 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。
- 值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。
//简单来说:Vue实例的data属性的对象里所有内容,在初始化的时候就必须写进去,这些数据才是响应式的,初始化过后的vue实例属性,是不响应的,那么问题来了,如果我确定会在初始化之后要用到某些数据咋办呢? 在data里面先声明,值为null,日后用到再赋值给这个值为null的属性
//再简单来说,Vue这个框架有一个响应系统(也就是一堆代码),Vue实例的所有属性都会响应,因为初始化的时候是告诉了响应系统的,如果没在初始化的时候放进Vue实例属性里面,那么要先声明一个空对象值为null在data里面占个位置
//最简单来说,一个应用要用的数据和函数对象,都要放在Vue实例的初始化代码里,这里面的东西才是响应式的,不然vm.b=1 这些不是写在vue实例的代码不响应
//有修改,那么就有阻止修改Object.freeze()就是阻止修改现有属性的 - 使用vue的时候不要在选项属性或回调上使用箭头函数
生命周期钩子函数，给了用户在不同阶段添加自己的代码的机会。
- 生命周期钩子的 this 上下文指向调用它的 Vue 实例。
- 在vue里面不要在选项属性或回调上使用箭头函数
//因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
模板语法
- vue的模板指的是组件模板,也就是在Vue.component里面注册的模板,因为这些组件模板的使用是要在html页面上使用的,所以模板语法指的就是这些在html上使用的组件的语法
- 官网把它区分三部分:
- 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
//这句话体现了vue特色,响应式,组件化,原始写html都是直接给字符串,而组件模板是用数据,数据在组件身上,或者在父组件身上,总之就是模块化,展示+数据的分离,控制器来控制
//简单来说vue组件是数据绑定,不是直接给字符串,当然也可以直接在html标签上使用字符串,和一些数据,这vue不硬性规定 - 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令
计算属性
- 组件模板除了简单的插值文本,还可以使用表达式做一些简单运算,如果放过多的逻辑就不符合初衷了,所以vue专门提供了一个计算属性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
- 这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数
//我个人理解:计算属性应该是vue实例的一个属性,里面放属性方法,具体的函数被称为getter函数 - vm.reversedMessage 的值始终取决于 vm.message 的值。
- 而且用计算属性比表达式更好的一点是:保持了vue一贯的声明式使用
- 除了使用计算属性 也可以直接当做一个函数调用放在,method里面,区别在于:
计算属性是依赖,data数据里的message值,vue在实现这个功能的时候是进行了缓存处理的,也就是说,massage不变,每次使用计算属性 都是直接给上次缓存的值,就不用再次运算,而放在method里面的函数 每次调用都会重新计算,因为没有缓存.这有什么问题呢?
//假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。 - 计算属性不是简单地运算用的,而是存放复杂逻辑的
- 侦听属性
//Vue 提供了观察和响应 Vue 实例上的数据变动的属性
//这里要比较一下计算属性和监听属性的优劣:虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时
//简单来说,异步的运算就交给侦听属性把 - 侦听器
//Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
Class style绑定
- 我们可以传给 v-bind:class 一个对象，以动态地切换 class
//当然v-bind:class 指令也可以与普通的 class 属性共存 - 除此之外,如果想插入多个class可以打包封装
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
条件渲染
- 不同于v-if v-else v-if-else;v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
- 注意，v-show 不支持 <template> 元素，也不支持 v-else。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
最后一章,组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
//简单来说组件也是vue实例,一个SPA就是组件套组件,vue实例嵌套vue实例,最外层的实例,就叫做根实例
- 注意确保在初始化根实例之前注册组件
- 请注意，对于自定义标签的命名 Vue.js 不强制遵循 W3C 规则 (小写，并且包含一个短杠)，尽管这被认为是最佳实践。
- 注册分为全局注册和局部注册
- 自定义组件 <my-row> 会被当作无效的内容，因此会导致错误的渲染结果。
<table>
<tr is="my-row"></tr>
</table>
**//简单来说就是vue的组件模板在html上直接使用有的标签不支持,需要用到以下三种方式避免这些问题
如果使用来自以下来源之一的字符串模板，则没有这些限制：
<script type="text/x-template">
JavaScript 内联模板字符串
.vue 组件
因此，请尽可能使用字符串模板。**
- 个人认为用is最省事
- 构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数。实际上，如果你这么做那么 Vue 会停止运行，并在控制台发出警告，告诉你在组件实例中 data 必须是一个函数。
//除了根实例,组件模板的data必须是函数,否则报错
看文档太干了,直接写个音乐webapp吧~
网友评论