Vue文档·基础部分速览

CY 2018年09月06日 78次浏览

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

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

创建一个Vue实例

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

不能在Mustache里面使用varlet或者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

生命周期

beforeCreateVue初始化时执行,这个时候还不能使用this获取到里面的methodsdata

created:创建完成Vue实例的时候执行,这个时候已经可以使用this获取到里面的methodsdata

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

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

beforeUpdateVue中数据改变之前执行

updatedVue数据改变完成执行

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)类似的truefalse的转换

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

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

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

v-if指令

v-ifv-else-ifv-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事件传过去

事件修饰符:

  • .stopevent.stopPropagation() 停止冒泡事件
  • .preventevent.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]元素:truefalse,可以使用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:值是一个对象,对象里面存放了方法,方法名代表要侦听的属性,方法是没有返回值的,他有两个参数newValueoldValue

动态样式

:class

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

语法一:{ active: isActive }

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

语法二:[activeClass, errorClass]

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

:style

v-bind:style写起来像css,可以使用camelCasekebab-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:一个数组,属性列表,用来接收从父作用域传过来的数据

watchmethodscomputed,声明周期钩子等等都和Vue实例中的那些选项一样的

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

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

在组件上使用v-forkey是必须的

子组件向父组件传值,子组件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上面