2025-5-10 vue

Vue总览

vue是一个用于构建用户界面的渐进式框架

vue适合开发中大型项目

优点：大大提升开发效率

缺点：需要理解记忆规则 -> 官网

渐进式：循序渐进地学习

框架：一套完整地项目解决方案，提升开发效率

创建Vue初始实例

准备容器 -> 引包 -> new Vue() -> 指定配置项，渲染数据（el指定挂载点，data提供数据）

例如：

var app = new Vue({
        // 2. 将 Vue 实例挂载到页面上的一个元素上
        el: '#app',
        // 3. 定义一些数据
        data: {
            message: 'Hello, Vue!',
            count: 666
        },
        // 4. 定义一些方法
        methods: {
            reverseMessage: function() {
                this.message = this.message.split('').reverse().join('');
            },
            addCount: function() {
                this.count++;
            },
            subtractCount: function() {
                this.count--;
            }
        }
    });

插值表达式

是一种Vue的模板语法

1. 作用：利用表达式进行插值，渲染到页面中。表达式是可以被求值的代码，JS引擎会计算出一个结果

2. 语法：{{表达式}}

3. 支持的是表达式，不是语句，不能把语句放进去

Vue响应式特性

Vue的核心特性，如果vue实例里面的数据变化了，视图可以自动更新

怎么去修改访问或者修改？比如上面那个例子，可以通过app.message访问，修改直接赋值即可。

v-html

v-html:设置元素的innerHTML，解析字符串标签(比如字符串是一个href地址，普通插值无法解析)

语法：v-html="表达式"

v-show / v-if

v-show：控制元素显示隐藏，v-show隐藏是通过display:none方法实现的

v-if：控制元素显示隐藏 (条件渲染)，v-if隐藏是移除整个元素，基于条件判断是否创建和移除元素节点

v-else,v-else-if

辅助v-if进行判断渲染
例如：

    <div v-if="grade >= 90" class="box">成绩为A</div>
    <div v-else-if="grade >= 80 && grade < 90" class="box">成绩为B</div>
    <div v-else-if="grade >= 60 && grade < 80" class="box">成绩为C</div>
    <div v-else class="box">不合格</div>

v-on

1.作用： 注册事件 = 添加监听 + 提供处理逻辑

2.语法：v-on:事件名 = "内联语句"
v-on:事件名 = "methods中的函数名"

v-on:可以替换成@

v-on后面接着的函数可以加入参数

v-bind

动态设置html的标签属性

语法：v-bind:属性名="表达式"

v-bind:可以替换为:

v-for

基于数据循环，多次渲染整个元素

语法：v-for = "(item, index) in 数组"

v-for中的key: 给列表添加唯一标识，便于Vue进行列表项的正确排序复用

如果不加key，v-for的默认行为会尝试原地修改元素（就地复用），比如说删除li的第一个元素，不加key的情况下，第一个元素本身的li不会删除，而是把后面的元素都往前提一位

v-model

作用：给表单元素使用，双向数据绑定 -> 可以快速获得或设置表单元素内容

数据变化 -> 视图自动更新
视图变化 -> 数据自动更新

语法：v-model='变量'