VUE学习笔记

时间 2019-11-30

标签 vue 学习笔记繁體版

原文原文链接

HelloWord

能够直接把Vue当作一个js库使用，因此它能够很容易的接入到你的项目或者单个页面中。甚至你能够只使用它的双向绑定功能。html

好比：咱们有一个需求，一个网页上一个Div标签，把json对象上的数据放到Div上去：vue

第一步：建立一个文件夹并建立一个html文件好比：index.html.
第二步：引入Vue库<script src="https://unpkg.com/vue/dist/vue.js"></script>
第三步：建立一个Div且给它一个id，好比：app
第四步：建立Vue的对象，并把数据绑定到上面建立好的div上去。

最终的代码以下：git

<!--第一步：建立文件夹及html文件-->
<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HelloWorld</title>
  <!--第二步：引入Vue库-->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <!--第三步:建立一个Div-->
  <div id="app">
    <!--Vue的模板的绑定数据的方法-->
    {{ message }}
  </div>

  <!--第四步：建立Vue的对象，并把数据绑定到div上-->
  <script>
    var app = new Vue({         // 建立Vue对象。Vue的核心对象。
      el: '#app',               // el属性：把当前Vue对象挂载到div标签上，#app是id选择器
      data: {                   // data: 是Vue对象中绑定的数据
        message: 'Hello Vue!'   // message 自定义的数据
      }
    });
  </script>
</body>
</html>

1、指令

最基本的就是经过双花括号进行设置，里面能够是数据、JS单表达式等。github

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

v-bind和v-modeljson

v-bind(:)：单向绑定数据到DOM。bind的属性是标签的prop属性。api

具备修饰符属性。数组

能够与class或style结合。缓存
v-model：双向绑定数据和DOM。app

具备修饰符属性。异步

特别的，v-html用于将数据显示为html，防止XSS攻击。

v-if和v-for

v-if：用来决定显示元素，效果相似于visibile。注意Vue默认用“就地复用”策略，能够经过添加key来解决。

v-show：用来决定是否显示元素，效果相似于display。
v-for：用来决定重叠元素。注意Vue默认用“就地复用”策略，能够经过添加key来解决。

v-for的优先级大于v-if。v-for的数据元素对象以下:
```
{
    index:number,
    item:{
        key:object,
        value:object
    }
}
```

v-on

用于绑定事件，简写为@。具备修饰符属性。

特别注意

像对象、数组的一些方法改变对象或数据后数据并不能反应到Vue上，所以Vue提供了如下一些方法：

关于对象的

Vue不能检测对象属性的添加或删除。所以Vue提供了Vue.set(object, key, value) 方法向数据对象添加响应式属性。
关于数组的

Vue不能检测如下变更的数组：
- 当你利用索引直接设置一个项时，例如vm.items[indexOfItem] = newValue
  
  能够经过Vue.set(vm.items, indexOfItem, newValue)进行设置。
- 当你修改数组的长度时，例如vm.items.length = newLength
  
  能够经过vm.items.splice(newLength)设置。

2、实例

一、实例属性

一个完整的vue实例以下：

var vm = new Vue({
    el: '#app',
    name: 'app',
    data: {
        a: 1
    },
    watch: {
        // 完整写法
        a: {
          handler: function (val, oldVal) { /* ... */ },
          deep: true
        }
    }
    computed: {
        compA: {
          get: function () {
            return this.a + 1
          },
          set: function (v) {
            this.a = v - 1
          }
        }
    },
    methods: {
        methA: function () {
          this.a++
        }
    },
    [hooks]:...
})

el

提供一个在页面上已存在的 DOM元素做为Vue实例的挂载目标。能够是CSS选择器，也但是个 HTMLElement实例。在实例挂载以后元素能够用 vm.$el 访问。

若是这个选项在实例化时有做用，实例将当即进入编译过程。不然需显式调用 vm.$mount() 手动开启编译。
data

data的类型是Object或者Function。若是是组件对象中data必须是Function类型。
watch(侦听属性)

watch含有的属性是动态计算的(计算是有缓存的。)，而data含有的属性是静态的。当watch含有的属性依赖于data含有的属性时，data含有的属性改变也会致使watch含有的属性刷新。

watch的key是须要观察的表达式(值也能够是方法名，或者包含选项的对象)，value是对应回调函数。Vue 实例将会在实例化时调用 $watch()，遍历watch对象的每个属性。计算是有缓存的。

虽然计算属性比侦听属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。这就是为何Vue经过 watch 选项提供了一个更通用的方法来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。
computed(计算属性)

computed含有的属性是动态计算的(计算是有缓存的。)，而data含有的属性是静态的。当computed含有的属性依赖于data含有的属性时，data含有的属性改变也会致使computed含有的属性刷新。

computed属性会自动混入Vue实例中。全部getter和setter的this上下文自动地绑定为Vue实例。这就很强大：在计算属性中定义的函数里面能够直接使用指向了vue实例的this，异常方便。
methods(方法属性)

methods属性会自动混入到Vue实例中。方法中的 this 自动绑定为Vue实例。能够直接经过VM实例访问这些方法，或者在指令表达式中使用。

注意，不该该使用箭头函数来定义method函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级做用域的上下文，因此this将不会按照指望指向Vue实例，this.a将是undefined。
[hooks]

生命周期的钩子函数，具体看下面的解释。

二、生命周期

Vue实例有一个完整的生命周期，从建立、挂载、渲染\更新\渲染、销毁等一系列过程，咱们称这是Vue的生命周期。通俗说就是Vue实例从建立到销毁的过程，就是生命周期。

beforeCreate

在实例初始化以后，数据观测和事件配置以前被调用。
created

实例已经建立完成以后被调用。在这一步实例已完成如下的配置：数据观测(属性和方法的运算)和事件配置(事件回调)。然而挂载阶段还没开始，$el属性目前不可见。
beforeMount

在挂载开始以前被调用：相关的render函数首次被调用。
mounted

el被新建立的vm.$el替换并挂载到实例上去以后调用该钩子。若是root实例挂载了一个文档内元素，当 mounted被调用时vm.$el也在文档内。
beforeUpdate

因为数据更改致使的虚拟DOM从新渲染和打补丁，在这以前会调用该钩子。

你能够在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated

因为数据更改致使的虚拟DOM从新渲染和打补丁，在这以后会调用该钩子。

当这个钩子被调用时，组件DOM已经更新，因此你如今能够执行依赖于DOM的操做。然而在大多数状况下，你应该避免在此期间更改状态，由于这可能会致使更新无限循环。
beforeDestroy

实例销毁以前调用。在这一步，实例仍然彻底可用。
destroyed

实例销毁以后调用。调用后Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。

全局配置

silent：

// 取消 Vue 全部的日志与警告
Vue.config.silent = true

devtools：

// 务必在加载Vue以后，当即同步设置如下内容
// 配置是否容许vue-devtools检查代码。开发版本默认为true，生产版本默认为false。生产版本设为 true能够启用检查。
Vue.config.devtools = true

全局API

Vue的全局API提供大量的功能，好比扩展组件Vue.extend 的用法、Vue.use加载插件、Vue.filter加载过滤器、Vue.directive自定义指令等。这里再也不进行介绍，请参看这里。

3、组件

组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。Vue提供了一个全局的APIVue.extend帮助咱们对Vue实例进行扩展，扩展完了以后，就能够用此扩展对象建立新的Vue实例了。相似于继承的方式。

4、路由

学习教程：https://www.aicoder.com/vue/preview/all.html

学习教程：https://github.com/malun666/vue-stepbystep

1. Vue学习笔记
2. 学习笔记：Vue
3. vue学习笔记
4. VUE 学习笔记
5. Vue 学习笔记
6. vue学习笔记、
7. VUE学习笔记
8. 学习笔记-vue
9. vue 学习笔记
10. 【VUE】学习笔记
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议