Vue学习记录

AmsChan ... 2020-08-17 Vue
  • 前端框架
  • Vue
大约 5 分钟

# 基本使用

  1. 引入vue.js

  2. 创建vue对象

    el:指定根element(选择器)

    data:初始化数据(页面可以访问)

  3. 双向数据绑定:v-model

  4. 显示数据:

  5. 理解vue的mvvm实现

    • MVVM:

      • model:模型,数据对象(data)
      • view:视图,模板页面
      • viewModel:视图模型(vue的实例)
    • DOM Listeners 事件监听

    • Data Bindings 数据绑定

<div id="app">
	<input type="text" >
    <p>hello</p>
</div>

<script type="text/javascript" src="text/javascript" src="vue-master\dist\vue.js"></script>

<script>
//创建vue实例
var vm = new Vue({    //配置对象
    el: '#app',     //element:选择器
    data: {     //数据(model)
        username:'ASSSS'
          }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 模板语法

# 双大括号表达式(( ))

<div id="app">
    <p>{{msg}}</p>
    <p>{{msg.toUpperCase()}}</p>	<!--全部大写函数-->
    <p v-text>{{msg}}</p>	<!--解释为文本内容-->
	<p v-html>{{msg}}</p>	<!--解释为标签-->
</div>
<script type="text/javascript" src="vue-master\dist\vue.js"></script>
<script>
    //创建vue实例
	new Vue({ //配置对象
        el: '#app', //element:选择器
        data: { //数据(model)
            msg: '',
            
        }
   })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 指令1:强制数据绑定

<div id="app">
	<img v-bind:src="imgUrl">
    <img :src="imgUrl">		<!--简洁写法-->
</div>
<script type="text/javascript" src="vue-master\dist\vue.js"></script>
<script>
	//创建vue实例
    new Vue({ //配置对象
        el: '#app', //element:选择器
        data: { //数据(model)
        imgUrl: 'https://cn.vuejs.org/images/logo.png'
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 指令2:绑定事件监听

<div id="app">
	<button v-on:click="test">test1</button>
    <button @click="test">test1</button>   <!--简洁写法-->
    <!--test函数的传参可写可不写-->
</div>
<script type="text/javascript" src="vue-master\dist\vue.js"></script>
<script>
	//创建vue实例
    new Vue({ //配置对象
        el: '#app', //element:选择器
        ata: { //数据(model)

        },
        methods: {
        	test() {
            	alert("hello");
            }
        }
	})
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 计算属性和监听

# 计算属性

  • 在computed属性对象中定义计算属性的方法,在页面中使用来显示计算结果

# 监听属性

  • 通过vm对象的$watch()或watch配置来监听指定的属性,当属性变化时,回调函数自动调用,在函数内部进行计算

# 计算属性高级

  • 通过getter/setter实现对属性数据的显示和监听,计算属性存在缓存,当次读取只执行一次getter计算

  • getter:属性的get方法

  • setter:属性的set方法

<div id="demo">
    姓:<input type="text" placeholder="fn" v-model="firstName"><br> 
    名:<input type="text" placeholder="ln" v-model="lastName"><br>
    姓名1(单向):<input type="text" placeholder="fullName1" v-model="fullName1"><br>
    姓名2(单向):<input type="text" placeholder="fullName2" v-model="fullName2"><br>
    姓名3(双向):<input type="text" placeholder="fullName3" v-model="fullName3"><br>
	<p>{{fullName1}}</p>
    <p>{{fullName2}}</p>
    <p>{{fullName3}}</p>
</div>
<script type="text/javascript" src="vue-master\dist\vue.js"></script>
<script>
  new Vue({
    el: '#demo',
    data: {
        firstName: 's',
        lastName: 'a',
        //fullName1: 's a',
        fullName2: 's a',
        //fullName3: 's a'
    },
    computed: {
    //执行条件:初始化显示/相关data属性数据发生改变
	  fullName1() { //计算属性中的一个方法,方法返回值作为属性值
        return this.firstName + ' ' + this.lastName
      },
      fullName3: {
//回调函数 当读取当前属性值时回调 根据相关数据计算并返回当前属性值
	    get() {
          return this.firstName + ' ' + this.lastName
        },
//回调函数 监听当前属性值的变化 当属性值发生改变时回调 更新相关的属性数据
		set(value) { //value就是fullName的最新属性值
          const names = value.split(' ')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },
    watch: { //配置监听
      firstName: function(value) { //firstName发生了变化
      this.fullName2 = value + ' ' + this.lastName
      }
    }
  })
  vm.$watch('lastName', function(value) {
    //更新fullName2
    this.fullName2 = this.firstName + ' ' + value
  })
</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

# class和style绑定

  • 在应用界面中,某个元素的元素时变化的
  • style/class绑定就是专门用来实现动态样式效果的技术
# class绑定
:class = 'xxx'
1
  • xxx是字符串
  • xxx是对象
  • xxx是数组
# style绑定
:style = "{color:activeColor, fontSize:fontSize + 'px'}"
1
  • activeColor/fontSize是data属性
<div id="demo">
	<h3>class绑定</h3>
    <p :class="a">xxx是字符串</p>
    <p :class="{aClass:isA, bClass:isB}">xxx是对象</p>
    <p :class="cssArr">xxx是数组</p>
    
	<h3>style绑定</h3>
    <p :style="{color:activeColor, fontSize:fontSize + 'px'}">style</p>

    <button @click="update">更新</button>
</div>
<script type="text/javascript" src="vue-master/dist/vue.js"></script>
<script type="text/javascript">
	new Vue({
    	el: '#demo',
        data: {
        	a: 'aClass',
            
            isA: true,
            isB: false,
            
            cssArr: ['aClass', 'bClass'],
            
            activeColor: 'green',
            fontSize: 20
        },
        methods: {
        	update() {
            	this.a = 'bClass'
                
                this.isA = false
                this.isB = true
                
                this.cssArr = ['aClass']
                
                this.activeColor = 'blue'
                this.fontSize = 12
            }
        }
	})
</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

# 条件渲染

# 渲染指令

  • v-if
  • v-else
  • v-show
<div id="demo">
	<p v-if="ok">成功了</p>
    <p v-else>失败了</p>
    <p v-show="ok">表白成功</p>
    <p v-show="!ok">表白失败</p>
    <button @click="ok=!ok">切换</button>
</div>

<script type="text/javascript" src="vue-master/dist/vue.js"></script>
<script type="text/javascript">
	new Vue({
    	el: '#demo',
        data: {
        	ok: false,
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# v-if/else和v-show的区别

  • v-if/else渲染时会把需要隐藏的标签直接去除

  • v-show渲染时只是给需要隐藏的标签加上隐藏的内联样式属性

# 列表渲染

<div id="demo">
	<h3>测试:v-for 遍历数组</h3>
	<ul>
    	<li v-for="(p, index) in persons" :key="index">
    		{{index}}----{{p.name}}----{{p.age}}
        	----<button @click="deletePerson(index)">删除			   </button>
        	----<button @click="updatePerson(index,					{name:'cat',age:10})">更新</button>
    	</li>
    </ul>

	<h3>测试:v-for 遍历对象</h3>
        <ul>
            <li v-for="(value, key) in persons" 					:key="key">
                {{key}}----{{value}}
            </li>
        </ul>
        <ul>
            <li v-for="(value, key) in persons[0]" 					:key="key">
                {{key}}----{{value}}
            </li>
        </ul>
</div>

<script type="text/javascript" src="vue-master/dist/vue.js"></script>
<script type="text/javascript">
	new Vue({
    	el: '#demo',
        data: {
        //vue只是监听了persons的改变,没有监听数组内部的变化
		//vue重写了数组中的一系列改变数组内部数据的方法(先调用原			  生,再更新界面)
        	persons: [
            	{name: 'Tom',age: 18}, 
            	{name: 'Jack',age: 19},
            	{name: 'Bobe',age: 15}, 
            	{name: 'Rose',age: 20}
        	]
        },
        methods: {
        	deletePerson(index) {
            	this.persons.splice(index, 1)
            },
            updatePerson(index, newPerson) {
//没有改变persons本身,数组内部数据改变,但是没有调用变异方法,因此界面没有发生改变
            	//this.persons[index] = newPerson 
                this.persons.splice(index, 1, newPerson)
            }
        }
	})
</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

# 列表的搜索和排序