Vue学习笔记(2)


阅读数: 次   

文章导航

Vue学习笔记

ES6，事件监听，条件判断，循环遍历，双向绑定…

ES6

块级作用域

JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关。
针对于其他块定义来说是没有作用域的，比如if/for等，在ES5中我们只能借助function的作用域来解决外面变量的问题。

let的使用

var的设计可以看成JavaScript语言设计上的错误. 但是这种错误多半不能修复和移除, Brendan Eich决定修复这个问题, 于是他添加了一个新的关键字: let

我们可以将let看成更完美的var

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

<script>
  // 1.没有块级作用域引起的问题: for的块级
  // 为什么闭包可以解决问题: 函数是一个作用域.
  var btns = document.getElementsByTagName('button');
  for (var i=0; i<btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击');
    })
  }

  // 2.情况二: ES5中使用闭包
  var btns = document.getElementsByTagName('button');
  for (var i=0; i<btns.length; i++) {
    (function (i) { // 0
      btns[i].addEventListener('click', function () {
        console.log('第' + i + '个按钮被点击');
      })
    }) (i)
  }

  // ES6中的let
  const btns = document.getElementsByTagName('button')
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击');
    })
  }
</script>

const的使用

在很多语言中已经存在, 比如C/C++中, 主要的作用是将某个变量修饰为常量；在JavaScript中也是如此, 使用const修饰的标识符为常量, 不可以再次赋值。

什么时候使用const呢?

当我们修饰的标识符不会被再次赋值时, 就可以使用const来保证数据的安全性.

建议: 在ES6开发中,优先使用const,只有需要改变某一个标识符的时候才使用let。(初始化必须赋值，赋值后不可改变对象) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
  // 1.注意一: 一旦给const修饰的标识符被赋值之后, 不能修改
  // const name = 'why';
  // name = 'abc';

  // 2.注意二: 在使用const定义标识符,必须进行赋值
  // const name;

  // 3.注意三: 常量的含义是指向的对象不能修改, 但是可以改变对象内部的属性.
  const obj = {
    name: '上官',
    age: 18,
    height: 1.68
  }
  // obj = {}
  console.log(obj);

  obj.name = '李白';
  obj.age = 25;
  obj.height = 1.76;

  console.log(obj);
</script>

对象增强写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script>
  // const obj = new Object()

  // const obj = {
  //   name: 'why',
  //   age: 18,
  //   run: function () {
  //     console.log('在奔跑');
  //   },
  //   eat: function () {
  //     console.log('在次东西');
  //   }
  // }

  // 1.属性的增强写法
  const name = 'why';
  const age = 18;
  const height = 1.88
  // ES5的写法
  // const obj = {
  //   name: name,
  //   age: age,
  //   height: height
  // }
   const obj = {
     name,
     age,
     height,
   }
  // console.log(obj);


  // 2.函数的增强写法
  // ES5的写法
  // const obj = {
  //   run: function () {
  //
  //   },
  //   eat: function () {
  //
  //   }
  // }
  const obj = {
    run() {

    },
    eat() {

    }
  }
</script>

Vue事件监听

在前端开发中，我们需要经常和用户交互，这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等

在Vue中使用使用v-on指令来监听事件

v-on介绍:

作用：绑定事件监听器

缩写：形式如：v-on:click 缩写为 @click;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
  <h2>{{counter}}</h2>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>

<script src="./js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })
</script>

v-on参数

参数问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="app">
    <!-- 调用的方法没有参数时可以省略小括号 -->
    <button @click="btn1click">按钮1</button>
    <!-- 当方法需要参数时，省略小括号，Vue会默认将浏览器生产的event事件对象作为参数传入到方法中 -->
    <button @click="btn2click">按钮2</button>			
    <!-- 如果需要同时传入某个参数，同时需要event时 -->
    <!-- 在调用方法时，我们可以手动获取event对象：$event -->
    <button @click="btn3click(123,$event)">按钮3</button>			
</div>

<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        methods: {
            btn1click(){
                console.log("btn1click")
            },
            btn2click(a){
                console.log("-----",a)
            },
            btn3click(a,event){
                console.log("+++++",a,event)
            }
        }
    })
</script>

v-on修饰符

image-20201005093007603

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div id="app">
    <!-- .stop阻止事件冒泡 -->
    <div @click="divclick">
        点击
        <button @click.stop="btnclick">按钮1</button>
    </div><br />

    <!-- .prevent阻止默认提交 -->
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitclick"/>
    </form><br />

    <!-- 监听点击键盘, .enter点击回车事件 -->
    <input type="text" @keyup.enter="keyUp">
    <br />

    <!-- .once只触发一次回调 -->
    <button @click.once="btn2click">按钮2</button>
</div>

<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        methods: {
            btnclick(){
                console.log("btnclick");
            },
            divclick(){
                console.log("divclick");
            },
            submitclick(){
                console.log("submitclick");
            },
            keyUp(){
                console.log("keyUp");
            },
            btn2click(){
                console.log("btn2click");
            }				
        }
    })
</script>

Vue条件判断

v-if

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
    <h2 v-if="isShow">{{message}}</h2>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！',
            isShow: true
        }
    })
</script>

v-if，v-else-if，v-else

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
    <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>	
    <h2 v-else-if="score>=60">及格</h2>	
    <h2 v-else-if="score<60">不及格</h2>						
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            score:80,
        }
    })
</script>

用户登录切换

问题：如果我们在文本框有内容的情况下，切换类型，我们会发现切换的文本框依然显示之前输入的内容。

原因：这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

解决：如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key，保证key的值不同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
    <span v-if="isUser">
        <label for="username">用户账号</label>
        <input type="text" id="username" placeholder="用户账号"/>
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱"/>				
    </span>
    <button @click="isUser=!isUser">切换类型</button>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isUser: true
        }
    })
</script>

v-show

需要在显示与隐藏之间切片很频繁时，使用v-show，当只有一次切换时，通过使用v-if。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
	<!-- v-if: 当条件为false时,元素不会出现在dom中 -->
	<h2 v-if="isShow" id="aaa">{{message}}</h2>
	<!-- v-show：当条件为false时,给元素增加一个display：none -->
	<h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			message: '你好啊',
			isShow: true,
		}
	})
</script>

Vue循环遍历

v-for遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>

    <!-- 在遍历过程中，获取下标值 -->
    <ul>
        <li v-for="(item, index) in names">
            {{index+1}}、{{item}}
        </li>
    </ul>

</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            names: ['赵云', '黄忠', '马超', '关羽', '张飞']
        }
    })
</script>

v-for遍历对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
    <!-- 在遍历的时候，只获取一个值时，获取的值是value -->
    <ul>
        <li v-for="item in info">{{item}}</li>				
    </ul>
    <!-- 获取key和value时 （value, key）-->
    <ul>
        <li v-for="(value, key) in info">{{key+": "+value}}</li>				
    </ul>			
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            info:{
                name: '东方朔',
                age: 32,
                height: 1.80
            }
        }
    })
</script>

组件的key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

作用：提高Vue中虚拟DOM的复用效率，主要是为了高效的更新虚拟DOM。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
    <ul>
        <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C' ,'D', 'E']
        }
    })
</script>

image-20201005130312346

检测数组更新

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

image-20201005130746692

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C' ,'D', 'E']
        },
        methods: {
            btnClick(){
                // push方法: 添加元素
                this.letters.push('AAA','BBB','CCC');

                // pop: 删除数组最后一个元素
                this.letters.pop();

                // shift: 删除数组中的第一个元素
                this.letters.shift();

                // unshift: 在数组最前面添加元素
                this.letters.unshift('aaa','bbb', 'ccc');

                // splice: 删除元素/插入元素/替换元素
                // 删除元素， 第二个参数传删除几个元素，不传则删除后面所有
                this.letters.splice(1,2);
                // 替换元素, 第二个参数表示要替换几个元素,后面是替换的元素
                this.letters.splice(1,2,'b1','c1');
                // 插入元素, 删除0个元素,后面添加元素
                this.letters.splice(1,0,'F','G');

                // sort: 元素排序
                this.letters.sort();

                // reverse: 元素反转
                this.letters.reverse();

                // 非响应式: 通过索引值修改数组中的元素
                // this.letters[0]= '不会响应';			
                // 可以使用Vue.set(要修改的对象，索引值，修改后的值)来响应
                Vue.set(this.letters,0,"响应");            			}
        }
    })
</script>

Vue双向绑定

v-model绑定数据

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

原理：v-model其实是一个语法糖，它的背后本质上是包含两个操作：

1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
    <!--<input type="text" v-model="message">-->
    <!-- <input type="text" :value="message" @input="valueChange"> -->
    <input type="text" :value="message" @input="message = $event.target.value">
    <h2>{{message}}</h2>
</div>

<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        methods: {
            valueChange(event) {
                this.message = event.target.value;
            }
        }
    })
</script>

v-model绑定单选框

radio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
    <label for="male">
        <input type="radio" value="男" id="male" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" value="女" id="female" v-model="sex">女
    </label>
    <h2>你选择的性别是：{{sex}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            sex: '男'
        }
    })
</script>

v-model绑定多选框

单个勾选框：
v-model即为布尔值。
此时input的value并不影响v-model的值。

多个复选框：
当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
当选中某一个时，就会将input的value添加到数组中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id="app">
  <!--1.checkbox单选框-->
  <!--<label for="agree">-->
    <!--<input type="checkbox" id="agree" v-model="isAgree">同意协议-->
  <!--</label>-->
  <!--<h2>您选择的是: {{isAgree}}</h2>-->
  <!--<button :disabled="!isAgree">下一步</button>-->

  <!--2.checkbox多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您的爱好是: {{hobbies}}</h2>

  <!--3.值绑定-->
  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isAgree: false, // 单选框
      hobbies: [], // 多选框,
      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
    }
  })
</script>

v-model绑定下拉框

单选：只能选中一个值
v-model绑定的是一个值，当我们选中option中的一个时，会将它对应的value赋值到mySelect中。

多选：可以选中多个值
v-model绑定的是一个数组，当选中多个值时，就会将选中的option对应的value添加到数组mySelects中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="app">
  <!--1.选择一个-->
  <select name="abc" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruit}}</h2>

  <!--2.选择多个-->
  <select name="abc" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruits}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      fruit: '香蕉',
      fruits: []
    }
  })
</script>

修饰符

lazy修饰符：
lazy修饰符可以让数据在失去焦点或者回车时才会更新。

number修饰符：
number修饰符可以让在输入框中输入的内容自动转成数字类型。

trim修饰符：
trim修饰符可以过滤内容左右两边的空格。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="app">
  <!--1.修饰符: lazy-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

  <!--2.修饰符: number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

  <!--3.修饰符: trim-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字:{{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      age: 0,
      name: ''
    }
  })

  var age = 0
  age = '1111'
  age = '222'
</script>
赏

感谢支持!

微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

正因为没有翅膀，<br>人们才会寻找飞翔的方法。