Vue学习记录

akino ... 2020-08-17

前端框架
Vue

大约 5 分钟

# 基本使用

引入vue.js
创建vue对象

el：指定根element（选择器）

data：初始化数据（页面可以访问）
双向数据绑定：v-model
显示数据：
理解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'

xxx是字符串
xxx是对象
xxx是数组

# style绑定

:style = "{color:activeColor, fontSize:fontSize + 'px'}"

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>