Vue3/VueJS技术学习笔记

最新推荐文章于 2023-08-21 20:16:49 发布

microvulome

最新推荐文章于 2023-08-21 20:16:49 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/microvulome/article/details/117390853

版权

Vue3/VueJS技术学习笔记

【必备工具１】Vue调试神器－Vue Devtools的安装

下载链接：

安装过程

1、第一个Vue.js应用程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello-vue</title>
<!--导入Vue.js，开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

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

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

</body>
</html>

**遇到的坑：**
关于安装了Vue-devtools插件但在浏览器控制台不显示的解决方案

2、Vue.js实例生命周期（先略过）

3、条件渲染(说白了就是if、else)

3.1 v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true的时候被渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
<!--导入Vue.js，开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div>
    <div id="app">
        <h1 v-if="awesome">Vue is awesome!</h1>
        <h1 v-else>Oh no 😢</h1>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            awesome: true
        }
    })
</script>
</body>
</html>

在这里插入图片描述

3.2 v-else

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
在调试工具里直接修改awesome=false

在这里插入图片描述

3.3 v-else-if

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

3、列表渲染(说白了就是for循环)

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
<!--导入Vue.js，开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div>
    <ul id="example-1">
        <li v-for="item in items" >
            {{ item.message }}
        </li>
    </ul>
    </div>
</div>

<script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })
</script>

</body>
</html>

在这里插入图片描述

在调试工具里，在数组里再增加一个对象

在这里插入图片描述

4、事件处理（click点击事件）

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
<!--导入Vue.js，开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="example-2">
<!--greet后面不要加（）-->
    <button v-on:click="greet">Greet</button>
</div>

<script>
    var app=new Vue({
        el:"#example-2",
        data:{
            name:'Vue.js'
        },
        // 是methods,而不是method！
        methods:{
            greet:function (event){
                // `this` 在方法里指向当前 Vue 实例
                alert(this.name)
            }
        }
    })
</script>

</body>
</html>