+ +

Vue学习笔记

+ +
+ +

Vue笔记

+

资料汇总

+

Vue2.0文档：https://v2.cn.vuejs.org/v2/guide/

+

Vue2.0基础知识总结

+

前导知识

+
    +
  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
    2. +
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
    3. +
  3. root容器里的代码被称为【Vue模板】；
    4. +
  4. Vue实例和容器是一一对应的；真实开发中只有一个Vue实例，并且会配合着组件一起使用；
    5. +
  5. +中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新； +
    6. +
+

注意区分：js表达式 和 js代码(语句)

+
    +
  1. +

    表达式（一个表达式会产生一个值，可以放在任何一个需要值的地方）：

    +
      +
    1. a
      2. +
    2. a+b
      3. +
    3. demo(1)
      4. +
    4. x === y ? 'a' : 'b'
      5. +
    +
    2. +
  2. +

    js代码(语句)

    +
      +
    1. if(){}
      2. +
    2. for(){}
      3. +
    +
    3. +
+

入门代码示例，在下面的示例中，需要注意的有div后面的id，这个地方的id会标识下面的Vue绑定对象；在Vue实例中，我们需要使用el来指定绑定的容器，使用css选择器字符串：

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="demo">
	<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>

<script type="text/javascript" >
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    //创建Vue实例
    new Vue({
        el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
            name:'atguigu',
            address:'北京'
        }
    })
</script>
+

模板语法

+

Vue模板语法有2大类：

+
    +
  1. 插值语法： +
      +
    • 功能：用于解析标签体内容。
      • +
    • 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
      • +
    +
    2. +
  2. 指令语法： +
      +
    • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
      • +
    • 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
      • +
    • 备注：Vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举个例子。
      • +
    +
    3. +
+

代码举例：

+
1
2
<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
+

上面的两行代码都是写在body中的模板语法，其中带着花括号的是用于解析的内容，而前面的v-bind是用指令的方式绑定标签。需要注意的是指令语法可以进行简写。无论是标签体的内容还是标签的内容，我们都可以访问到Vue实例中的data中的所有属性。

+

数据绑定

+

Vue中存在两种数据绑定：

+

单向数据绑定，数据只能从data流向页面：<input type="text" v-bind:value="name">

+

双向数据绑定，双向流动：<input type="text" v-model:value="name">

+

需要注意的是，v-model只能应用在表单类元素（输入类元素）上，不应该用于h1等文字类元素上

+

两种绑定的简写：

+
    +
  • <input type="text" :value="name">
    • +
  • <input type="text" v-model="name">
    • +
+

Vue实例的tips

+

在Vue中el是一个用于绑定页面中元素的属性配置，el可以使用两种方式进行配置：

+
    +
  1. new Vue 的时候进行配置el属性
    2. +
  2. 先创建Vue实例，随后通过vm.$mount（‘#root’）来进行指定
    3. +
+

Vue实例中的data具有两种写法

+
    +
  1. +

    对象式

    +
    2. +
  2. +

    函数式（在使用组件的时候，需要使用函数式）

    +
    3. +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript" >
   new Vue({
       el:'#root',
       //data的第一种写法：对象式
       /* data:{
       name:'尚硅谷'
   } */

       //data的第二种写法：函数式
       data(){
           console.log('@@@',this) //此处的this是Vue实例对象
           return{
               name:'这里是name'
           }
       }
   })
</script>
+

注意：由Vue管理的函数，不可以写成箭头函数的形式如果食用箭头函数的形式，this就不是Vue实例了。

+

数据代理

+

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

+
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" >
    let obj = {x:100}
    let obj2 = {y:200}

    Object.defineProperty(obj2,'x',{
        get(){
            return obj.x
        },
        set(value){
            obj.x = value
        }
    })
</script>
+

Vue最独特的特性就是数据代理（官网称作非侵入性的响应系统），在Vue中实现数据代理是通过vm对象来代理data对象中属性的操作（读/写），简单概述来说就是遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 gtter/setter。下方是Vue官网的示意图：

+Vue示意图 +

需要注意的式当Vue创建之后，再使用直接添加的方式是无法产生数据代理的。如下面官网代码所示：

+
1
2
3
4
5
6
7
8
9
var vm = new Vue({
  data:{
    a:1
  }
})
// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的
+

当实例已经创建好了之后需要使用Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。

+

Vue 不能检测以下数组的变动：

+
    +
  1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
    2. +
  2. 当你修改数组的长度时，例如：vm.items.length = newLength
    3. +
+

应该使用下面的方法：

+
    +
  1. Vue.set(vm.items, indexOfItem, newValue)
    2. +
  2. vm.items.splice(newLength)
    3. +
+

事件处理

+

基本知识

+

使用Vue对事件进行绑定有两种方法：v-on:xxx,@xxx。如下方直接写在v-on的指令中：

+
1
2
3
4
<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
+

事件的回调需要写在methods里面，且不可以使用箭头函数的形式。在methods里面配置的函数都是被Vue管理的函数，this都是vm或组件实例对象。简单举例：

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
+

涉及到传参相关的事情的时候，我们既可以直接传递一个参数:<button v-on:click="say('hi')"> Say hi </button>，同时也可以用特殊变量 $event 传入原始的 DOM 事件。如下：

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
    <button v-on:click="warn('Form cannot be submitted yet.', $event)">
        Submit
    </button>
</body>

<script type="text/javascript">
    //省略部分
    methods: {
        warn: function (message, event) {
            // 现在我们可以访问原生事件对象
            if (event) {
                event.preventDefault()
            }
            alert(message)
        }
    }
</script>
+

上面的例子中正好引入了事件修饰符，在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 v-on 提供了事件修饰符。

+
    +
  • .stop：阻止事件冒泡（常用）；
    • +
  • .prevent：阻止默认事件（常用）；
    • +
  • .once：事件只触发一次（常用）；
    • +
  • .capture：使用事件的捕获模式；
    • +
  • .self：只有event.target是当前操作的元素时才触发事件；
    • +
  • .passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
    • +
+

小例子:

+
1
2
3
4
5
6
7
8
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
+

键盘事件

+
    +
  1. Vue中常用的按键别名：
    2. +
+

​ 回车 => enter

+

​ 删除 => delete (捕获“删除”和“退格”键)

+

​ 退出 => esc

+

​ 空格 => space

+

​ 换行 => tab (特殊，必须配合keydown去使用)

+

​ 上 => up

+

​ 下 => down

+

​ 左 => left

+

​ 右 => right

+
    +
  1. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
    2. +
  2. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
    3. +
+

​ (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

+

​ (2).配合keydown使用：正常触发事件。

+
    +
  1. +

    也可以使用keyCode去指定具体的按键（不推荐）

    +
    2. +
  2. +

    Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

    +
    3. +
+ + +
+
+
+
+ + +
+ + + #tech + +
+ +
+ + + + + +
+
+ + +
+ +
+ +
+ + +