vue学习

vue.js学习

vue 不支持ie8及以下的浏览器

因为vue采用了ECMAScript 5的特性。

安装vue

采用js引入的方式使用vue

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

安装vue-cli

npm install vue

初始化一个vue项目

可以使用webstom初始化项目，也可以通过官方给与的vue-cli来创建

vue init webpack 项目名

上面这种方式是通过官方的vue-cli创建，创建中会出现一些推荐的依赖包用于安装。esLine 是一种代码检查方式，在练习的时候可以安装，但是他的代码检查非常的严格。

使用

vue.js的核心允许采用简洁的模版语法来声明式的将数据渲染进DOM系统

<div id="app">
{{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

这样可以吧data中的message渲染进页面当中。

vue的声明周期

vue可缩写的指令

v-bind

完整写法

<a v-bind:href="url"></a>

缩写

<a :href="url"></a>

v-on

完整写法

<a v-on:click="doSomeThing"></a>

缩写

<a @:click="doSomeThing"></a>

v-show与v-if的区别

1. v-show会优先把组件渲染出来，然后根据数值对组件的display进行变动，v-if是惰性的，会先读取数值再根据数值对组件进行渲染或销毁。
2. 在频繁的切换中v-show比v-if有更低的性能开销。
3. v-show不能配合v-else使用。
4. v-show不可以应用于<template>元素。
5. 不推荐v-if与v-for的一起使用，v-for的优先级比v-if要高。

v-for

• v-for作用是基于一个数组渲染一个列表。
• v-for指令需要使用item in items形式的语法
  • 可以用of代替in即item of items的语法
• v-for 在数据更新中采用的是就地更新的策略，以保证每个索引位置被正确的渲染。
• v-for 支持一个可选的第二个参数，即当前项的索引。(item,index) in items
• v-for 同样支持对对象的遍历。
  • object:
  • 在v-for遍历对象时的第二个参数代表property名称(也就是键名)(value,name) in object
  • 还可以有第三个参数作为索引 (value,name,index) in object
• v-for 允许为每个节点绑定一个key，key不仅与v-for关联。v-bind:key="value.key"
• 变异方法，会对原数据进行修改的方法，会触发视图的更新，方法包括：
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
• 注意事项vue不会对以下对数组的操作进行监听：
  1. 当你利用索引直接设置一个数组项时，例如:vm.items[index] = newValue
     1. 可以使用Vue.set(vm.items,index,newValue)的方式，同样的效果会刷新组件。
     2. 也可以使用vm.items.splice(index,1,newValue)。
     3. 同样可以使用vm.$set(vm.items,index,newValue)，vm.$set等同于Vue.set。
  2. 当你修改数组的长度时，例如:vm.items.length = new length
     1. 可以使用vm.items.splice(newLength)解决。
  3. 当你直接给对象增加属性时，例如vm.data.b = 1，对于已经创建好的属性，vue会进行监听，但是刚创建的属性是无法被监听的。
     1. 同样可以使用Vue.set(object,propertyName,value)的方式添加响应式属性。