Vue

介绍

官方网站：https://cn.vuejs.org/

Vue.js是一种用于构建用户界面的开源JavaScript框架。
它是一种轻量级的框架，易于学习和使用。
它基于标准HTML，CSS和JavaScript构建，并提供了一套生声明式的，组件时的编程模型，帮助开发人员高效的开发用户界面。无论简单还是复杂的界面，Vue都可以胜任。
Vue.js采用了组件化的开发方式，使得开发者可以将一个页面拆分为多个可复用的组件，从而提高代码的可维护性和复用性。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-377mq144-1688373083288)(E:\VUE笔记\VUE.assets\image-20230630110004514.png)]$

特点

响应式：
- Vue.js使用了双向数据绑定的机制，当数据发生变化时，页面会自动更新，无需手动操作DOM。
组件化：
- Vue.js将页面拆分为多个组件，每个组件都有自己的逻辑和样式，可以独立开发和维护。
轻量级：
- Vue.js的体积较小，加载速度快，性能优秀。
简单易用：
- Vue.js提供了简洁的API和清晰的文档，使得开发者可以快速上手并进行开发。
生态丰富：
- Vue.js拥有庞大的社区和生态系统，有大量的插件和工具可供选择，方便开发者进行扩展和集成。

渐进式框架

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

无论再怎么灵活，Vue 的核心知识在所有这些用例中都是通用的。即使你现在只是一个初学者，随着你的不断成长，到未来有能力实现更复杂的项目时，这一路上获得的知识依然会适用。如果你已经是一个老手，你可以根据实际场景来选择使用 Vue 的最佳方式，在各种场景下都可以保持同样的开发效率。这就是为什么我们将 Vue 称为“渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。

搭建Vue开发环境

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-02l5H1fK-1688373083289)(E:\VUE笔记\VUE.assets\image-20230703105459022.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GrMYjRL4-1688373083290)(E:\VUE笔记\VUE.assets\image-20230703105517079.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ag5ZD8C8-1688373083290)(E:\VUE笔记\VUE.assets\image-20230703105537388.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vdHYex5I-1688373083290)(E:\VUE笔记\VUE.assets\image-20230703105653998.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HeKn0Uwx-1688373083291)(E:\VUE笔记\VUE.assets\image-20230703105752548.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dTIWGP9v-1688373083291)(E:\VUE笔记\VUE.assets\image-20230703111030706.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vGdppguX-1688373083292)(E:\VUE笔记\VUE.assets\image-20230703110644806.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jdiaToQE-1688373083292)(E:\VUE笔记\VUE.assets\image-20230703110901721.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NDQXQeqL-1688373083293)(E:\VUE笔记\VUE.assets\image-20230703111014834.png)]$

第一个程序

{{ }}是用来进行数据绑定的语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <!-- 在页面中显示message的值 -->
    
    <h1>我叫：{{ name }}</h1>
    <h1>年龄：{{ age }}</h1>
</div>

<script>
    // 创建一个Vue实列
    var app = new Vue({
        // 将Vue示例挂载到id为app的元素上
        el: '#app',
        // 数据对象
        data: {
            // 定义一个message的属性，并赋值为‘Hello World;
            name: '张三',
            age : 18
        }
    })
</script>
</body>
</html>

指令模式

v-bind

用于绑定数据，将Vue实例中的数据绑定到HTML元素的属性上，可以简写为冒号(😃。

例如：v-bind:title=“message”，将Vue实例中的message属性的值绑定到元素的title属性上。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
	<h1>指令语法：</h1>
    	<a v-bind:href="url">跳转到CSDN</a>
</div>
<script>
    // 创建一个Vue实列
    var app = new Vue({
        // 将Vue示例挂载到id为app的元素上
        el: '#app',
        data: {
            url : 'https://www.csdn.net'
        }
    })
</script>
</body>
</html>

v-model

用于实现双向数据绑定，将表单元素的值与Vue实例中的数据进行双向绑定。

例如：v-model=“message”，将表单元素的值与Vue实例中的message属性进行双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>v-model指令模式</h1>

<!--    输入框，使用v-model指令绑定数据-->
    <input type="text" v-model="message" value="请输入">
    <p>{{ message }}</p>

    <input type="checkbox" v-model="isChecked" >
    <label>{{ isChecked ? '检查' : '不检查' }}</label>

    <select v-model="selectedOption">
        <option value="唱">唱</option>
        <option value="跳">跳</option>
        <option value="rap">rap</option>
    </select>
    <p>选择的选项是: {{ selectedOption }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: '',
            isChecked: false,
            selectedOption: ''
        }
    });
</script>
</body>
</html>

v-if / v-else

用于条件渲染，根据表达式的值来决定是否渲染某个元素。

例如：v-if=“isShow”，根据isShow属性的值来决定是否渲染该元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if / v-else指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-if="showMessage">Hello, Vue!</h1>
    <h1 v-else>Goodbye, Vue!</h1>
    <button @click="toggleMessage">切换信息</button>
</div>

<script>
    // 创建一个Vue实例
    new Vue({
        // 将Vue实例挂载到id为app的元素上
        el: '#app',
        //数据对象
        data: {
            // 控制是否查看消息的变化
            showMessage: true
        },
        // 方法对象啊
        methods: {
            // 切换消息显示状态的方法
            toggleMessage() {
                //将showMessage的值取反
                this.showMessage = !this.showMessage;
            }
        }
    });
</script>
</body>
</html>

v-for

用于循环渲染，根据数组或对象的内容来生成多个相同的元素。

例如：v-for=“item in items”，根据items数组的内容来生成多个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>学生列表</h1>
    <ul>
        <!-- 遍历students数组 -->
        <!-- 遍历数组为students，将每一个元素赋值给变量student -->
        <li v-for="student in students" :key="student.id">
            {{ student.name }} - {{ student.age }}岁
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            students: [
                { id: 1, name: '张三', age: 18 },
                { id: 2, name: '李四', age: 20 },
                { id: 3, name: '王五', age: 22 },
                { id: 4, name: '赵六', age: 19 }
            ]
        }
    })
</script>
</body>
</html>

v-on

用于绑定事件，将Vue实例中的方法绑定到HTML元素的事件上，可以简写为@。

例如：v-on:click=“handleClick”，将Vue实例中的handleClick方法绑定到元素的click事件上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 显示message变量的值 -->
    <h1>{{ message }}</h1>
    <!-- 点击按钮时调用changeMessage方法 -->
    <button v-on:click="changeMessage">改变信息</button>
</div>


<script>
    new Vue({
        // 将Vue实例挂载到id为app的元素上
        el: '#app',
        data: {
            // 定义一个名为message的变量，初始值为'Hello, Vue!'
            message: 'Hello, Vue!'
        },
        methods: {
            // 定义一个名为changeMessage的方法
            changeMessage: function() {
                // 将message的值改为'New Message!'
                this.message = 'New Message!';
            }
        }
    });
</script>
</body>
</html>

v-show

用于条件显示，根据表达式的值来决定是否显示某个元素，与v-if不同的是，v-show只是通过CSS的display属性来控制元素的显示与隐藏。

例如：v-show=“isShow”，根据isShow属性的值来决定是否显示该元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 点击按钮时调用toggleShow方法 -->
    <button @click="toggleShow">Toggle Show</button>
    <!-- 根据show的值来决定是否显示该段落 -->
    <p v-show="show">点击按钮时显示这一段</p>
</div>


<script>
    new Vue({
        // 将Vue实例挂载到id为app的元素上
        el: '#app',
        data: {
            // 初始化show的值为false，即不显示该段落
            show: false
        },
        methods: {
            // 定义toggleShow方法
            toggleShow() {
                // 切换show的值，如果为true则变为false，如果为false则变为true
                this.show = !this.show;
            }
        }
    });
</script>
</body>
</html>