Love_vermouth

vue基础一

记录本文主要是为了总结，把多篇博文里我认为重要的点记录下来，以便查找。感兴趣的可以详细看原文。

一、

1、由于Vue使用getter/setter等ES5特性，所以兼容到IE9

2、每一个Vue实例(组件本质上就是一个Vue实例)需要有一个根元素

3、不应该在模板表达式中试图访问用户定义的全局变量

二、

1、命名约定

1.1 组件命名，字母小写且包含一个中划线(-)

1.2 注册组件时，使用中划线、小驼峰、大驼峰这三种任意一种都可以

// 在组件定义中
components: {
  // 使用 中划线 形式注册
  'kebab-cased-component': { /* ... */ },
  // 使用 小驼峰 形式注册
  'camelCasedComponent': { /* ... */ },
  // 使用 大驼峰 形式注册
  'PascalCasedComponent': { /* ... */ }
}

2、data

2.1 不应该对data属性使用箭头函数

2.2 vue实例创建之后，可以通过vm.$data访问原始数据对象，vue实例也代理了data对象上所有的属性

2.3 以_或$开头的属性不会被Vue实例代理，因为它们可能和Vue内置的属性或方法冲突。可以使用例如vm.$data._property的方式访问这些属性

var values = {
  message: 'Hello Vue!',
  _name: '小火柴'
}
var vm = new Vue({
  el: '#app',
  data: values
})
console.log(vm._name);//undefined
console.log(vm.$data._name);//'小火柴'

3、隐藏未编译

一般地，使用模板差值时，页面上会显示大括号及占位符。编译完成后，再转换为真正的值。如果在网络条件不好的情况下，这种现象更加明显

【v-cloak】

　　这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕



{{message}}

4、class绑定

绑定class包括对象语法、数组语法和组件绑定

4.1 【对象语法】

4.2 【数组语法】

如果要根据条件切换列表中的 class ，可以用三元表达式

也可以在数组语法中使用对象语法

4.3 【组件绑定】

在一个定制组件上用到class属性时，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖

最终将被渲染为如下所示

Hi

5、style绑定

5.1 【对象语法】

5.2 【数组语法】

5.3 【前缀】

当v-bind:style使用需要特定前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀

可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值

这会渲染数组中最后一个被浏览器支持的值。在这个例子中，如果浏览器支持不带浏览器前缀的 flexbox，那么渲染结果会是 display: flex

6、过滤器

过滤器可以用在两个地方：模板插值和v-bind表达式。过滤器应该被添加在JS表达式的尾部，由“管道”符指示

过滤器设计目的是用于文本转换。为了在其他指令中实现更复杂的数据变换，应该使用计算属性

过滤器是JS函数，因此可以接受参数

{{ message | filterA('arg1', arg2) }}

filterA 是个拥有三个参数的函数。message 的值将会作为第一个参数传入。字符串 'arg1' 将作为第二个参数传给 filterA，表达式 arg2 的值将作为第三个参数


  {{ message}} 
  {{ message | filterA('arg1', arg) }}

7、模板逻辑

7.1 条件渲染元素不复用【key属性】

添加一个具有唯一值的key属性，来声明“这两个元素是完全独立的——不要复用它们”

每次切换时，输入框都将被重新渲染

【注意】元素仍然会被高效地复用，因为它们没有添加 key 属性

7.2 元素显隐

v-if 的元素显隐会将元素从DOM删除或插入；

而v-show则只是改变该元素的display是否为none

【注意】v-show 不支持