Vue是一个渐进式框架，代表可以将Vue作为应用的一部分嵌入至应用中，与其他代码兼容。

它的思想之一就是将数据将界面分离

01-HelloVue

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <div id="app">{{message}}</div>
  11. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  12. <script>
  13.     // let定义变量，const定义常量
  14.     const vue = new Vue({
  15.         el: '#app',
  16.         data: {
  17.             message: '你好啊'
  18.         }
  19.     })
  21. </script>
  22. </body>
  23. </html>

02-Vue列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="item in movie">{{item }}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            movie:["精疲力尽","狂人皮埃罗","随心所欲","法外狂徒"]
        }
    })
</script>
</body>
</html>

03-Vue计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>当前计数{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="increment">+</button>
    <button v-on:click="subtraction">-</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            counter: 0
        },
        methods: {
            increment: function () {
                this.counter++;
            },
            subtraction: function () {
                this.counter--;
            }
        }
    })
</script>
</body>
</html>

MVVN:view与viewModel的数据双向绑定

image.png

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。(即将viewmodel与view解绑)

Vue实例还有一些实例变量和方法，且有$的前缀，以便和用户自定义的变量或方法区分开，例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

Vue实例的对象option

主要有：

  • el:
    类型：string|HTMLElement
    作用：决定之后Vue实例会管理哪一个DOM
  • data：
    类型：Object|Function
    作用：Vue实例对应的数据对象
  • methods:
    类型：{[key:string]:Function}
    作用：定义属于Vue的一些方法，可以在其他地方调用，或在指令调用

生命周期

lifecycle.png

实例生命周期的钩子：

每个实例在被创建时都要经过一系列的初始化过程，例如需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。

例如created钩子可以用来在一个实例被创建之后执行代码

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

Vue的作用：完全解耦了view和model层，是MVVM模式的实现者