Vue网课笔记

程序员文章站 2022-06-10 18:57:39

...

安装方法

CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告（未经过压缩的代码，适合看源码） -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度（经过了压缩，删掉了打印的一些东西，发布时再使用） -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

下载
开发环境：https://vuejs.org/js/vue.js
生产环境：https://vuejs.org/js/vue.min.js
（点击链接打开的是源码，右击链接选择链接另存为可以保存js文件）
NPM安装

以WebStorm开发为例

首先新建空项目
Vue网课笔记
在项目文件夹下新建js文件夹，将之前下载的vue.js文件放进去，在HTML代码中使用即可
具体使用类似于微信小程序的wxml和js（或者说微信小程序类似于vue。。。）

基本使用

<body>

<div id="app">{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    // let(变量) /const（常量）
    const app = new Vue({
        el: '#app', //用于挂载要管理的元素
        data: { //定义数据
            message: '你好啊世界！'
        }
    })
</script>

</body>

Mustache语法

双大括号称为Mustache语法，Mustache语法中不仅可以直接写变量，也可以写简单的表达式
注意：Mustache语法只能用在标签之间，不能和微信小程序那样用在属性（比如img标签的src属性）上，动态绑定属性用v-bind指令，后面有相关笔记

列表展示

<body>

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            movies: ['大赢家','囧妈','大黄蜂']
        }
    })
</script>

</body>

绑定点击函数

<body>

<div id="app">
    <h2>当前计数：{{counter}}</h2>
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>

<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter++
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--
            }
        }
    })
</script>

</body>

语法糖： 简写 v-on:click简写为@click

<button @click="add">+</button>
<button @click="sub">-</button>

如果绑定的操作很简单，无需绑定函数，也可以下面这样

<body>

<div id="app">
    <h2>当前计数：{{counter}}</h2>
    <button @click="counter++">+</button>
    <button @click="counter--">-</button>
</div>

<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        }
    })
</script>

</body>

Vue中的MVVM

Vue网课笔记
*：https://zh.wikipedia.org/wiki/MVVM （感觉面试的时候会很重要）

vue的template

（感觉用不到。。。小程序开发就从来没用过模板）

v-once

顾名思义，元素和组件只渲染一次，不会随着数据变化而变化

<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>

第一次渲染完成后，data中的message改变，第一个h2会随之改变，第二个h2不会改变

v-html

若字符串是html代码，v-html指令可以将html代码进行解析

<body>

<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            url: '<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

</body>

Vue网课笔记

v-text

<h2>{{message}}</h2>
<h2 v-text="message"></h2>

这两个语句的效果是一样的
但是一般不会使用v-text指令，因为太不灵活，例如：

<body>

<div id="app">
    <h2>{{message}}，世界</h2>
    <h2 v-text="message">，世界</h2>
</div>

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

</body>

Vue网课笔记
v-text指令会覆盖标签的内容，不能灵活进行字符串拼接

v-pre

跳过这个元素和它的子元素的编译过程，显示原本的内容，一般也不会用

<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>

Vue网课笔记

v-cloak

在某些情况下，js代码执行可能遇到卡顿，或js代码执行有延迟，会导致vue没有被及时的加载出来，这会导致浏览器直接显示未编译的Mustache标签
为了避免这种情况，可以加入v-cloak指令，然后给这一指令加入特定css样式
在vue解析之前，标签中有一个属性v-cloak；在vue解析之后，标签中没有一个属性v-cloak
下面的代码中，我们用setTimeout模拟js执行延迟；div没有v-cloak指令会先显示一段{{message}}再显示内容，div有v-cloak指令会先空白一段（这是设置的样式）再显示内容

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-cloak>
    <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    setTimeout(function () {
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好'
            }
        })
    }, 1000)
</script>

</body>

v-bind

用于动态绑定属性

比如动态绑定a元素的href属性
比如动态绑定img元素的src属性

<div id="app">
    <img v-bind:src="imgurl" alt=""><br>
    <a v-bind:href="ahref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            imgurl: 'https://img-blog.csdnimg.cn/20200409165249908.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NTU19CZW5qYW1pbg==,size_16,color_FFFFFF,t_70#pic_center',
            ahref: 'http://www.baidu.com'
        }
    })
</script>

</body>

语法糖： v-bind:src简写为:src

 <img :src="imgurl" alt=""><br>
 <a :href="ahref">百度一下</a>

v-bind动态绑定class的对象语法

class作为一个属性也可以通过v-bind进行动态绑定
可以使用一种更方便的方式进行class的动态绑定：通过对象
v-bind:class=""引号中可以放一个对象，对象中是键值对，键值对可以是类名加一个布尔型变量，当布尔型变量为true时这个类添加到该标签，为false时不添加这个类
下面的例子用这种方式实现点击按钮切换文字颜色

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>

<div id="app">
    <h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
    <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好！',
            isActive: true,
            isLine: true
        },
        methods: {
            btnClick: function () {
                this.isActive = !this.isActive
            }
        }
    })
</script>

</body>

可以通过函数返回的方式缩短该行标签的长度

<div id="app">
    <h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
    <h2 :class="getClasses()">{{message}}</h2>
    <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好！',
            isActive: true,
            isLine: true
        },
        methods: {
            btnClick: function () {
                this.isActive = !this.isActive
            },
            getClasses: function () {
                return {active: this.isActive, line: this.isLine}
            }
        }
    })
</script>

</body>

两行h2的变化是相同的

v-bind动态绑定class的数组语法

用的很少

<h2 :class="['active','line']">{{message}}</h2>
<!--这两行代码效果是一样的-->
<h2 class="active line">{{message}}</h2>

数组里面也可以是变量，变量的值是字符串，字符串是class的名字

<h2 :class="[active,line]">{{message}}</h2>

标签在动态绑定class的同时还可以有静态绑定的class

解析时会进行合并

<h2 class="title" :class="{active: true, line: false}">{{message}}</h2>

Vue网课笔记

v-for与v-bind结合

下面实现列表中点击哪条就哪条变色（active类与上面的相同，这不重要）

<body>

<div id="app">
    <ul>
        <li v-for="(m, index) in movies" @click="cur = index" :class="cur == index ? 'active' : ''">{{m}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            movies: ['大赢家','囧妈','大黄蜂','无问西东'],
            cur: 5
        }
    })
</script>

</body>

v-bind动态绑定style的对象语法

与动态绑定class的对象语法类似，键值对是css属性名和属性值

<body>

<div id="app">
    <h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好！',
            finalSize: 100,
            finalColor: 'red'
        }
    })
</script>

</body>

font-size、background-color这种属性要写成驼峰命名法的形式fontSize、backgroundColor，-会被解析成操作符
属性值为具体数值时要加上单引号写成字符串的形式，否则会当做一个变量去解析

<h2 :style="{fontSize: '50px'}">{{message}}</h2>

也可以通过上面getClasses()函数返回的方式缩短该行标签长度

v-bind动态绑定style的数组语法

与动态绑定class的数组语法类似，更加注重将对象放进数组

<body>

<div id="app">
    <h2 :style="[baseStyle1, baseStyle2]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好！',
            baseStyle1: {backgroundColor: 'red'},
            baseStyle2: {fontSize: '100px'}
        }
    })
</script>

</body>

计算属性

computed

methods中的方法一般起动词的名字，比如get什么东西；计算属性一般起名词的名字，被当做一个属性
methods中的方法调用一次就执行一次，无缓存；计算属性多次调用只执行一次，有缓存，性能更高

<body>

<div id="app">
    <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstName: 'Lebron',
            lastName: 'James'
        },
        computed: {
            fullName: function () {
                return this.firstName + ' ' + this.lastName
            }
        }
    })
</script>

</body>

计算属性的setter和getter

上面的计算属性的完整写法如下

<body>

<div id="app">
    <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstName: 'Lebron',
            lastName: 'James'
        },
        computed: {
            fullName: {
                set: function() {

                },
                get: function() {
                    return this.firstName + ' ' + this.lastName
                }
            }
        }
    })
</script>

</body>

一般计算属性没有set方法，没有set方法的计算属性为只读属性
只有get方法的计算属性的简写就是上面的上面的代码那样

Vue网课笔记

安装方法

以WebStorm开发为例

基本使用

Mustache语法

列表展示

绑定点击函数

Vue中的MVVM

vue的template

v-once

v-html

v-text

v-pre

v-cloak

v-bind

v-bind动态绑定class的对象语法

v-bind动态绑定class的数组语法

标签在动态绑定class的同时还可以有静态绑定的class

v-for与v-bind结合

v-bind动态绑定style的对象语法

v-bind动态绑定style的数组语法

计算属性

计算属性的setter和getter

vue.js学习笔记之绑定style样式和class列表

整理关于Bootstrap模态弹出框的慕课笔记

整理关于Bootstrap表单的慕课笔记

整理关于Bootstrap警示框的慕课笔记

整理关于Bootstrap列表组的慕课笔记

vue2笔记 — vue-router路由懒加载的实现

Vue官方文档笔记（二）

笔记本无线网卡充当路由器组建局域网

vue ssr 实现方式(学习笔记)

Vue2学习笔记之请求数据交互vue-resource