vue-day01

最新推荐文章于 2024-09-17 13:42:29 发布

迷失555

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量169

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_62012576/article/details/137087321

版权

本文介绍了Vue.js的基本用法，包括引入库、书写视图层（插值表达式和v-text/v-html的区别）、创建Vue实例，以及v-bind用于元素属性绑定和v-on用于事件绑定。实例演示了如何处理数据和响应式更新图片。

摘要由CSDN通过智能技术生成

1、引入vue.js

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

2、书写视图层

插值表达式 {{}} 展示数据,进行简单运算

{{msg}}======{{age+2}}

v-text v-html

<div v-text="msg">1</div>
<div v-html="msg">2</div>
<div v-text="html">1</div>
<div v-html="html">2</div>

相同点：替换标签中原有的内容
不同点：v-text不能解析富文本，v-html能解析富文本。
在这里插入图片描述

3、创建vue实例

<script>
    let vm = new Vue({
        // 控制区域
        el: '#app',
        // 存放数据的地方
        data: {
            msg: '今天开始学习vue',
            age: 18,
            html: '<a href="">学习vue</a>'
        },
        // 存放方法的地方
        methods: {
        }
    })
</script>

v-bind：元素属性的绑定

        <img v-bind:src="imgSrc" alt="">
 <!-- 简写 -->
        <img :src="imgSrc" alt="">
        <input type="text" :value="value">

v-on: 事件的绑定

        <button v-on:click="log1">按钮</button>
        <!-- 简写 @-->
        <button @click="log2">按钮</button>
        <button @click="changeImg">修改图片</button>

实例

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            imgSrc: 'https://img0.baidu.com/it/u=2983778692,229617415&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711126800&t=04e5db5263ec13da36b02728d5cbfacb',
            value: '我是输入框的值'
        },
        methods: {
            changeImg() {
                // this指向vue实例
                console.log(this);
                console.log('测试');
                console.log(this.imgSrc);
                if (this.imgSrc == '') {
                    this.imgSrc = 'https://img0.baidu.com/it/u=2983778692,229617415&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711126800&t=04e5db5263ec13da36b02728d5cbfacb'
                } else {
                    this.imgSrc = ''
                }
            },
            // log1: function () {
            //     console.log(111);
            // },
            log1() {
                console.log(111);
            },
            log2() {
                console.log(22222);
            }
        }
    })
</script>