Web网络开发 -- Vue2基础语法，属性和生命周期

发布于：2025-09-03 ⋅ 阅读:(21) ⋅ 点赞:(0)

引入

在这里插入图片描述

什么是Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue2官方教程
Vue3官方教程

设计模式

MVVM设计模式

M Model 模型层

VM ViewModel 中间件

V View 视图层

导入Vue.js

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

min是生产环境，建议使用，不带min是开发环境，会显示错误日志

创建容器

<div class="app">
    ...
</div>

创建vue2实例对象

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

一个实例对象只能挂载在一个元素身上,一个元素只能被一个实例对象挂载,这是一对一的关系

如果一个元素被多个实例对象挂载,挂载由上到下,最下面的才会生效

绑定元素

// 方式一 el绑定
new Vue({
    el: '#app',
    data: {
        tag: '<h1>这是解析标签的</h1>'
    }
})
// 方式二 创建实例对象时赋值
var app = new Vue({
    el: '#app',
    data: {
        tag: '<h1>这是解析标签的</h1>'
    }
})
app.$mount('#app')
// 方式三 创建实例对象时直接绑定
new Vue({
    el: '#app',
    data: {
        tag: '<h1>这是解析标签的</h1>'
    }
}).$mount('#app')

基础语法

插值语法

可以用{{}}来在html中显示变量

<div id="app">
    <h1>{{ message }}</h1>
    <h2>{{ num + 1 }}</h2>
    <p>{{num >= 10?"ture":"false" }}</p>
</div>

渲染解析html标签

可以使用v-text/v-html属性来将某些文字/html标签渲染到容器中,这里将vue实例对象中的tag值渲染到id为"app"的容器中

<div id="app" v-html="tag"></div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            tag: '<h1>这是解析标签的</h1>'
        }
    })
</script>

v-html会覆盖元素中已有的内容,并替换为tag中的内容

隐藏html标签

可以使用v-if/v-show属性来隐藏容器中指定的html标签

<div id="app">
    <div v-if="isShow">这是元素1</div> <!-- 通过删除和创建节点来实现隐藏,适用于一次性弹窗场景 -->
    <div v-show="isShow">这是元素2</div> <!-- 通过CSS属性来实现隐藏,适用于导航栏下拉菜单等多次使用的场景 -->
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            tag: '<h1>这是解析标签的</h1>',
            isShow: true,
        }
    })
</script>

v-if和v-show都可以实现隐藏元素,区别是前者通过删除和创建节点来实现隐藏,适用于一次性弹窗场景;后者通过元素的displayCSS属性来实现隐藏,适用于导航栏下拉菜单等多次使用的场景.后者可以节约资源避免反复删除创建元素带来的性能损耗

单向绑定和双向绑定

v-bind:value属性用于实现单向绑定,可以简写为:value,其只能由data中的变量的内容单向输出到输入框中,修改输入框的内容不会影响到data中的数据,适用于只展示数据的情况

v-model:value属性用于实现双向绑定,可以简写为v-model,其data中的变量和输入框双方,修改一方另一方也会同步修改,适用于与数据进行交互的情况,只适用于输入框输入

<div id="app">
    <span> {{num}} </span>
    <input type="text" v-bind:value="num"> <!-- 单向绑定 -->
    <input type="text" v-model:value="num"> <!-- 双向绑定 -->
    <input type="text" :value="info">  <!-- 单向绑定简写 -->
    <input type="text" v-model="info"> <!-- 双向绑定简写 -->

</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            // 这里可以定义变量
            num: 80,
            info:"这是一个例子"
        }
    })
</script>

绑定网页和图片

v-bind属性也可用于绑定网页或图片等,例如v-bind:href(简写为:href)、v-bind:src(简写为:src)等

<div id="app">
	<a v-bind:href="web.url" target="_blank">{{web.title}}</a> <!-- 绑定网页 -->
	<a :href="web.url" target="_blank">{{web.title}}</a> <!-- 绑定网页简写 -->
	<img :src="'https://www.baidu.com/img/flexible/logo/pc/result.png'" alt="百度logo"> <!-- 图片绑定 -->
    <img :src="bd" alt="百度logo"> <!-- 图片绑定 -->
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            web:{
                url: "https://www.baidu.com",
                title: "百度一下，你就知道",
            },
            bd: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
            },
        },
    })
</script>

事件对象 Event

$event可以调用当前事件的详细信息,通过函数传参到方法中

<div id="app">
    <span> {{num}} </span>
    <button v-on:click="fn($event)">点我</button>
    <button @click="fn($event)">点我</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            // 这里可以定义变量
            num: 80,
        },
        methods: {
            // 这里可以定义方法
            fn(e){
                console.log(e); // 打印事件对象
                console.log('点击了',this.num);
                this.num += 10; // 每次点击按钮num加10
            }
        }
    })
</script>

点击事件

v-on:click用于给元素绑定点击事件,也可以简写为@click

<div id="app">
    <span> {{num}} </span>
    <button v-on:click="num++">点我+1</button>
    <button @click="num--">点我-1</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            num: 80,
        }
    })
</script>

常见其他事件类型

  • 鼠标经过 v-on:mouseover或@mouseover v-on绑定事件

  • 阻止某个标签的默认事件 v-on:click="$event.preventDefault"或@click.prevent

  • 点击弹窗 @click="alert('弹窗')"

  • 事件只执行一次 @click.once="fn"

  • 阻止事件冒泡执行 @click.stop="fn"

冒泡就是一大一小两个框重叠,且都绑定事件,点击相同区域会同时执行两个事件

  • 按下按键触发事件 @keydown="getVaule($event)"
  • 按下指定按键(例如回车键)触发事件 @keydown.Enter="getVaule($event)"
<div id="app">
    <span> {{num}} </span>
    <button @click="num--">点我-1</button>
    <button @mouseover="num+=3">鼠标经过</button>
    <button @click="add(5)">按钮</button>
    <!-- 阻止默认事件-->
    <a href="https://www.baidu.com" @click.prevent>百度一下</a>
    <!-- 事件只执行一次 -->
    <button @click.once="showBox">点击一次</button>
    <!-- 阻止事件冒泡执行 -->
    <div class="big" @click="show1">
        <div class="small" @click.stop="show2"></div>
    </div>
    
</div>
<script>
    new Vue({
        data: {
            // 这里可以定义变量
            num: 80,
        },
        methods: {
            // 这里可以定义方法
            add(n) {
                console.log(n); // 打印传入的参数n
                this.num += n; // 每次点击按钮num加n
            },
            showBox() {
                alert('弹窗');
            },
            show1() {
                alert('大盒子');
            },
            show2() {
                alert('小盒子');
            },
        }
    }).$mount('#app'); // 挂载到#app元素上
    console.log(app);  //在控制台中打印vue的详细信息
</script>

在Vue.js中，.stop是一个事件修饰符,它的作用是调用event.stopPropagation()，阻止事件冒泡

如果没有.stop修饰符，点击内层div时，事件会冒泡到外层div，导致两个事件都会被触发

加上.stop后，点击内层div只会触发show2，不会触发外层的show1

在控制台输出vue2实例对象的详细信息

<script>
	console.log(app);
</script>

多级条件判断

v-if不止可以显示单一条件判断,也可以多级判断

<div id="app">
    <div v-if="score >= 90">优秀</div>
    <div v-else-if="score >= 80">很棒</div>
    <div v-else-if="score >= 70">良好</div>
    <div v-else-if="score >= 60">及格</div>
    <div v-else>不及格</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            score: 80,
        }
    })
</script>

列表循环

可以使用v-for对数组进行遍历,其中item是数组(列表)中的一项,index是数组(列表)的索引

index可以省略不写

<div id="app">
    <ul>
        <li v-for="(item,index) in arr">
            {{index}} - {{item.name}} - {{item.age}}
        </li>
    </ul>
    <ul>
        <li v-for="item in arr2"> //index可以省略不写
            {{item}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        data: {
            arr: [
                { name: '张三', age: 18 },
                { name: '李四', age: 20 },
                { name: '王五', age: 22 }
            ],
            arr2: [
                'red','orange','blue'
            ]
        },
    }).$mount('#app');
</script>

Vue2定义实例对象

<script>
    const app = new Vue({
        data:{
            ...
        },
        methods:{
            ...
        },
        computed:{
            ...
        },
        watch:{
            ...
        },
        c...
    }.$mount("#app")
</script>
  • data:{} 定义变量,用于存储实例对象的数据
  • methods:{} 定义方法,用于存储实例对象的方法
  • computed:{} 定义监听(计算)属性,用于响应式数据计算和结果缓存
  • watch:{} 定义观察属性,用于观察数据的前后变化

计算数据和计算属性的应用

方法一: 通过自定义方法并绑定到指定按钮上实现计算

方法二: 通过计算属性实现响应式计算,实时计算并显示

<div id="app">
        <input type="text" v-model="num1">
        <input type="text" v-model="num2">
        <button @click="add()">求和</button>
        <p>结果: {{count}} </p>  <!-- 方法一 -->
        <p>结果: {{he}} </p> <!-- 方法二 -->
</div>
<script>
    const app = new Vue({
        data:{
            num1: 0,
            num2: 0,
            count: 0,
        },
        methods:{
            // 方法一
            add() {
                // 将输入的字符串转换为数字
                const n1 = parseFloat(this.num1);
                const n2 = parseFloat(this.num2);
                // 计算和
                this.count = n1 + n2;
            }
        },
        computed:{
            // 计算属性
            // 方法二
            he(){
                return Number(this.num1) + +this.num2;
            }
        }
    }).$mount('#app');
    console.log(app);
</script>

观察属性

用于观察数据的前后变化

<div id="app">
    <input type="text" v-model="num1">
</div>
<script>
    const app = new Vue({
        data:{
            num1: 0,
        },
        watch:{
            num1:{
                handler(newVal, oldVal) {
                    console.log(`num1 changed from ${oldVal} to ${newVal}`);
                },
            }
        }
    }).$mount('#app');
    console.log(app);
</script>

Vue2生命周期

Vue 的生命周期是指组件从创建到销毁的整个过程，包括初始化数据、编译模板、挂载 DOM、更新 DOM 和卸载等阶段。在这些阶段中，Vue 提供了一系列的生命周期钩子函数，允许开发者在特定时机运行自定义代码。

Vue 的生命周期分为四个主要阶段，每个阶段都有对应的钩子函数：

  1. 创建阶段： beforeCreate：实例初始化后调用，此时数据和 DOM 尚未初始化。 created：实例创建完成后调用，此时数据已初始化，但 DOM 尚未挂载。
  2. 挂载阶段： beforeMount：挂载开始前调用，此时模板已编译，但 DOM 尚未渲染。 mounted：挂载完成后调用，此时 DOM 已渲染，可以进行 DOM 操作。
  3. 更新阶段： beforeUpdate：数据更新后、DOM 更新前调用，可用于访问更新前的 DOM。 updated：数据更新后调用，此时 DOM 已完成更新。
  4. 销毁阶段： beforeDestroy：实例销毁前调用，可用于清理定时器或事件监听器。 destroyed：实例销毁后调用，此时所有事件和子实例均已移除。
<script>
    new Vue({
        data:{
            num: 10,
        },
        methods:{

        },
        computed:{

        },
        watch:{
            num:{
                handler(newValue, oldValue){ 

                },
            },
        },
        // Vue的四个生命周期和八个钩子函数
        beforeCreate(){}, //创建之前
        created(){}, //创建
        beforeMount(){},  //挂载之前
        mounted(){}, //挂载
        beforeUpdate(){}, //更新之前
        updated(){}, //更新
        beforeDestroy(){}, //销毁之前
        destroyed(){}, //销毁
    })
</script>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布