Vue文档·基础部分速览

CY 2018年09月06日 687次浏览

Vue只在兼容ES5的浏览器下有用。

使用Vue Devtools可以审查和调试Vue应用

创建一个Vue实例

{{ message }}、{{number + 1}}、 {{ ok ? 'YES' : 'NO' }}、 {{ message.split('').reverse().join('') }}这种大括号的形式叫做Mustache，它是插值表达式

不能在Mustache里面使用var、let或者if这样的命令，不能在里面尝试访问用户定义的全局变量

v-once指令会让该节点下面的Mustache里面的变量渲染后不会再次改变

v-开头的叫做指令

v-html可以将HTML直接渲染到DOM里面，注意XSS攻击，绝不要对用户提供的内容使用该指令，Vue已经对script标签的XSS攻击做了限制

let vm = new Vue({
	el: "#app",
	data: { // 写一些数据
		message: "Hello" // vm.message = "xx" 可以响应式的修改这个值
	}
});

data属性中可以引用外面的一个对象，这时改变外面对象中的值，Vue里面的data也改变，改变Vue里面data的值，外面的对象中的属性也改变

只有当实例被创建时就已经存在于data中的属性才是响应式的。所以说，设置一些初值非常重要。

如果非要创建后加入值，使用Vue.set(object, propertyName, value)或vm.$set(object, propertyName, value)，但是注意不允许动态添加根级响应式属性（data）

Object.freeze()会阻止修改现有的属性

Vue实例暴露了一些实例属性与方法，都有$前缀，例如：$data、$el、$watch等

生命周期

beforeCreate：Vue初始化时执行，这个时候还不能使用this获取到里面的methods和data

created：创建完成Vue实例的时候执行，这个时候已经可以使用this获取到里面的methods和data了

beforeMount：渲染页面之前执行，这个时候页面上的Mustache并没有被渲染

mounted: 渲染页面完成执行，这个时候页面上的Mustache已经被渲染了

beforeUpdate：Vue中数据改变之前执行

updated：Vue数据改变完成执行

beforeDestroy：销毁实例之前执行

destroyed：销毁实例之后执行

千万不要在选项属性或回调上使用箭头函数，因为这将无法用this来指向Vue实例

为data中的对象动态的添加多个属性：

vm.srcObject/*原来的对象*/ = Object.assign({}, vm.srcObject/* 原来的对象 */, {/* 添加多个属性 */});

v-bind指令

html页面标签的属性里面不能使用{{}}

v-bind:title="message"这里的messgae是一个Vue数据，如果要使用字符串需要使用v-bind:title="'message'"

可以这样写v-bind:id="'list-' + id"

对于disabled这样需要一个布尔值的，Vue使用的和Boolean(obj)类似的true和false的转换

v-bind:[attributeName]="url"这种形式是使用动态参数，2.6.0及以上版本才能使用，当attributeName为null，相当于移除了该属性，[]中包含空格和引号是无效的，使用计算属性替代，注意方括号中的属性名总是会被转换为小写。

用计算属性替代复杂的表达式，动态参数一般是用来做dataset数据的

v-bind:attributeName可以简写为:attributeName

v-if指令

v-if、v-else-if、v-else

使用时，如果不想在页面添加新的元素，可以用template元素

默认情况Vue总是复用元素，有时候不需要Vue的这种复用，所以需要使用key来添加一个唯一的值，key中的值一定要使用基本数据类型

v-show：使用display属性简单的控制元素的隐藏和显示，不支持在template上使用

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

注意v-for优先于v-if执行

v-for指令

item in items

item of items

(item, index) in items

(value, key) in object

(value, key, index) in object

number in even(numbers)

n in 10

控制台输入：vm.items.push({ xx: xx })可以添加一个新item

v-for可以在template上使用

如果循环的元素中涉及到类似于输入框这样的表单元素，必须要提供key，以防止一些意想不到的问题，建议使用v-for的时候总是提供key属性，除非需要性能的地方，key中的值一定要使用基本数据类型

以下两种情况不能做响应

  • vm.items[indexOfItem] = newValue，可以用下面三种方式替换

    • Vue.set(vm.items, indexOfItem, newValue)

    • vm.$set(vm.items, indexOfItem, newValue)

    • vm.items.splice(indexOfItem, 1, newValue)

  • vm.items.length = newLength可以用下面方法来替换

    • vm.items.splice(newLength)

v-on指令

v-on:click="methodName"调用在methods中定义的方法，可以传递参数，methodName后面加上括号就好了

也可以使用表达式：v-on:click="counter += 1"

v-on:eventName可以简写成@eventName

如果需要访问原始的DOM事件，可以使用$event来将DOM事件传过去

事件修饰符：

  • .stop：event.stopPropagation() 停止冒泡事件
  • .prevent：event.preventDefault() 阻止默认行为
  • .capture： 捕获事件，内部元素触发的事件先在此处理，然后才交由内部元素进行处理
  • .self：只有作用在自身的事件才会触发
  • .once：事件只触发一次，可用于组件
  • .passive：可以让滚动事件变得更加流畅，了解一下

这些事件修饰符可以连用v-on:click.self.prevent="methodName"，也可以只写修饰符v-on:submit.prevent

v-on:keyup.enter回车键

可以使用的键：点击查看，将里面暴露的键转换成kebab-case就可以作为修饰符了

Vue.config.keyCodes.f1 = 112自定义按键修饰符，官方已经不推荐使用keyCode的形式了

可以结合系统键.ctrl、 .alt、 .shift，必须组合其他键使用，单独使用是没有效果的，如果要单独使用可以用自定义按键修饰符或者keyCode，例如：@keyup.17可以单独使用Ctrl

组合键使用方法@click.ctrl Ctrl + Click、 @keyup.alt.67 Alt + C

.exact 精准的系统修饰符，之前虽然是Ctrl + Click，但是同时按住Alt也是好使的，.exact意思是精确保证有且仅有某系统按键和其他键组合的时候才触发

鼠标 .left、 .right、 .middle

v-model指令

可以实现双向绑定，作用在表单元素上

  • input[text]、textarea元素： 字符串

  • input[checkbox]元素：true或false，可以使用true-value="yes"， false-value="no"

    它也可以v-model到一个数组上，这个时候就会用value填充数组

  • input[radio]元素：单个字符串

  • select元素：单个字符串

  • select[multiple]元素：数组

value属性可以通过v-bind来绑定，除了字符串还可以绑定对象的

修饰符：

.lazy ：这个作用是输入的时候View不变化，相当于点一下回车View才变化

.number：默认是按字符串处理，.number按数字处理

.trim ：输入的时候就调用trim方法

计算属性

computed：值是一个对象，对象中写一个函数，函数的名字就是计算属性，函数必须要有一个返回值，计算属性可以动态的根据某个变量改变而发生改变

计算属性提供了缓存，如果不想使用缓存，就用methods来替代

计算属性默认只有get方法，如果需要可以提供set方法

侦听器

watch：值是一个对象，对象里面存放了方法，方法名代表要侦听的属性，方法是没有返回值的，他有两个参数newValue和oldValue

动态样式

:class

v-bind:class 指令也可以与普通的 class 属性共存

语法一：{ active: isActive }

  • 只要isActive是truthiness即可
  • 可以将{ active: isActive }对象抽离出来放到data里面
  • 最好使用计算属性

语法二：[activeClass, errorClass]

  • 可以使用三元运算符[isActive ? activeClass : '', errorClass]
  • 数组中也可以嵌套对象语法[{ active: isActive }, errorClass]

:style

v-bind:style写起来像css，可以使用camelCase和kebab-case做属性名

语法一：{ color: activeColor, fontSize: fontSize + 'px' }

可以抽离出样式到data，最好使用计算属性

语法二：[baseStyles, overridingStyles]可以将多个对象用到一起

:style会自动添加前缀-webkit-、-ms-等

对于flex来说，前缀也不能解决的问题，可以使用多重值{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }

组件化应用构建【已抽离到其他文章】

Vue.component("组件名字", {/* options */})

data：需要是一个方法，方法返回一个对象，因为所有的组件的data都是独立的

template：用来输入一些HTML，这里必须是单个根元素，也可以使用<script type="text/x-template">

props：一个数组，属性列表，用来接收从父作用域传过来的数据

watch，methods，computed，声明周期钩子等等都和Vue实例中的那些选项一样的

使用v-bind指令可以为组件绑定属性，用来传递给props

可以在普通标签上使用is属性来加载组件，这样可以避免一些有严格标准的HTML失去本该拥有的样子（提升到外部）

在组件上使用v-for，key是必须的

子组件向父组件传值，子组件v-on:click="$emit('parentEventName')"，$emit的第二个参数是一个rest参数，可以传递任意多的值给父组件，父组件只需要定义@parentEventName通过$event来收到子组件传来的值，或者使用@parentEventName="functionName"，这个functionName中的参数可以接收到子组件传过来的值。

组件上使用v-model，需要写成类似于下面代码（详细查看）

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
});

组件可以使用<slot>

可以使用<component>元素，绑定一个is属性，实现动态组件

组件上使用class的时候会追加到组件的根元素的class上面

上一篇： Git·命令总结