HOME
HOME
文章目录
  1. 1. 模板语法
    1. 1.1 常见指令
    2. 1.2 v-bind
    3. 1.3 计算属性
  2. 2. ES6部分语法
  3. 3. 事件监听
  4. 4. 条件判断
  5. 5. 循环

vue2学习笔记

2021.01.25 le31ei Program  热度 ℃

1. 模板语法

1.1 常见指令

v-once

只渲染一次，后续对值的改动不再变化

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
<h2 v-once>{{message}}</h2>   //后续在console中输入app.message=”xxxx“，该处的值不会发生变化
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: "123"  
        },

    })
</script>

v-html

对值为html代码的转换成html格式输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
{{url}}  // 输出原始字符串格式
    <h2 v-html="url"></h2>  // 会对a标签转换成html格式进行输出
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: "123",
            url: "<a href='https://www.baidu.com'>百度</a>"
        },

    })
</script>

v-text

与{{}}语法相似，接收一个string类型进行输出

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
<h2 v-text="message"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: "123"
        },

    })
</script>

v-pre

对代码进行原样输出

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
<h2 v-pre>{{message}}</h2>     // 输出内容为{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: "123"
        },

    })
</script>

1.2 v-bind

动态绑定到某个属性上，不能使用{{}}语法的时候，比如绑定a便签的href属性，img的src属性的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
<img v-bind:src="img"/>
  //简写
  <img :src="img"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: "123",
            img: 'https://img-blog.csdnimg.cn/20200221154143875.png'
        },

    })
</script>

动态绑定class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
    <h1 class="active">{{message}}</h1>
    <h1 :class="active">{{message}}</h1>
    <h1 :class="{active: isActive, line: false}">{{message}}</h1>   // 对象的形式，决定是否加入class属性
  <h1 :class="['active','line']">{{message}}</h1>   // 数组形式
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: "123",
            active: 'active',
            isActive: true
        },

    })
</script>

动态绑定style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
    <h2 :style="{fontSize: size}">{{message}}</h2>
  <h2 :style="{fontSize: '50px'}">{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
           message: 'testme',
            size: '50px'
        },

    })
</script>

1.3 计算属性

将数据经过某些计算，生成新的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
    {{fullName}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            firstName: 'testme',
            lastName: '123'
        },
        computed: {
            fullName: function (){
                return this.firstName + ' ' + this.lastName
            }
        }
    })
</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
<div id="app">
    <h2>总价格: {{allPrice}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            books: [
                {id: 100, name: 'book1', price: 100},
                {id: 102, name: 'book2', price: 101},
                {id: 103, name: 'book3', price: 102},
                {id: 104, name: 'book4', price: 103}
            ]
        },
        computed: {
            allPrice: function (){
                let total = 0;
                for (let i = 0; i < this.books.length; i++){ // es6: for (let item of this.books)直接取得对象
                    total = total+ this.books[i].price
                }
                return total
            }
        }
    })
</script>

getter和setter

一般不会使用set方法，get可以直接省略掉

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">
{{fullName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            firstName: 'test',
            lastName: 'testme'
        },
        computed: {
            fullName: {
                set: function (){
                    this.firstName = 'qerty'  // 一般不会使用set方法，作为只读属性使用
                },
                get: function () {
                    return this.firstName + ' ' + this.lastName
                }
            }
        }
    })
</script>

计算属性计算出来的结果作为属性使用有缓存，使用多次只计算一次，而methods里面的方法，调用一次则执行一次

2. ES6部分语法

ES6属性增强写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const name = 'test'
const aget = 18
const height = '1.6'

const obj = {
  name,
  age,
  height
} // ES6增强写法，等同于如下写法：

const obj = {
  name: name,
  age: age,
  height: height
}

ES6函数增强写法

1
2
3
4
5
6
7
8
9
10
11
12
13
//ES5写法
const obj = {
  run: function() {
    
  }
}

// ES6增强写法，会自动添加以函数名命名的key
const obj = {
  run(){
    
  }
}

3. 事件监听

参数传递

不需要传参时，调用函数的时候可以不添加括号

如果需要传参，但是调用时候没有加括号，则默认传入event对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
{{counter}}
    <button v-on:click="btnClick">+</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods:{
            btnClick(abc){
                console.log(abc)  // 调用时不加括号，会传入event对象
            }
        }
    })
</script>

单独传入事件对象，使用$event传入全局对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
{{counter}}
    <button v-on:click="btnClick(123, $event)">+</button>  // $event全局的事件对象
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods:{
            btnClick(abc, event){
                console.log(abc)
                console.log(event)
            }
        }
    })
</script>

修饰符

.stop阻止冒泡

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">
    <div @click="divClick">
        <button @click.stop="btnClick">按钮</button>  // .stop之后，divClick不再调用
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods:{
            btnClick(){
                console.log('点击按钮')
            },
            divClick(){
                console.log('div点击')
            }
        }
    })
</script>

.prevent阻止默认事件，阻止比如form提交的自动提交。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
    <form action="test.html">
        <button class="submit" @click.prevent="submitClick">提交</button>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods:{
            submitClick(){
                console.log('点击提交')
            },
        }
    })
</script>

监听按键点击：@keyup.enter，@key.+按键别名

4. 条件判断

v-if、v-if-else、v-else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
    <h2 v-if="isShow">{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            isShow: false,
            message: 'testme'
        },
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
    <h2 v-if="isShow=='test'">{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            isShow: 'testx',
            message: 'testme'
        },
    })
</script>

虚拟dom复用
以下代码在切换时候，input里面的内容不会被清空，如果要让input不复用的话，需要加上key属性<input id="username" type="text" key="123"> 

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
<div id="app">
    <span v-if="emailLogin">
        <label for="username">用户名登录</label>
        <input id="username" type="text">
    </span>
    <span v-else>
        <label for="email">邮箱登录</label>
        <input type="email" id="email">
    </span>
    <button @click="changeLogin">切换类型</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            emailLogin: false
        },
        methods: {
            changeLogin(){
                this.emailLogin = !this.emailLogin
            }
        }
    })
</script>

v-show

决定一个元素是否渲染，也是判断，在html中表现为style=display:none。切换频率比较高的时候使用。

5. 循环

<li v-for="(value, key, index) in names">

循环遍历值、key、索引的方法