学习Vue.js打卡第一天

于 2024-01-03 17:58:20 发布
阅读量434 收藏 8
点赞数 11
文章标签： 学习 vue.js 前端 big data 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64498202/article/details/135369651
版权
本文介绍了在Vue.js中使用插值表达式进行动态渲染，包括v-bind绑定HTML属性、v-for循环渲染数据以及常用的v-if、v-show指令。同时展示了事件绑定和数据操作的实例，如v-on处理事件和数组操作.
摘要由CSDN通过智能技术生成

 插值表达式！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--
    创建实例：
        准备容器->引包->创建实例->渲染数据 el挂载点 data
-->
<!--
    利用表达式进行插值渲染
    {{ 表达式 }}
-->
<body>
    <div id="app">
        {{ message }}
        <p>{{ message }}</p>
        <p>{{ age }}</p>
        {{ chinese.name }}
    </div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue!',
            age: 1,
            chinese: {
                name: '你好！'
            }
        }
    })
</script>


</body>
</html>

 

Vue指令！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--
    v-html:动态解析标签

v-show/v-if:通过正确与否判断：
    v-show:靠切换css的display:none来控制显示隐藏；适用于频繁切换显示隐藏的场景
    v-if:靠根据判断控制元素的创建和移除；适用于不频繁切换的场景，要么显示要么隐藏

v-else/v-else-if紧挨着v-if使用：
    v-else:表否定
    v-else-if:再次判断==或则另一种情况的判断

v-on指令：注册事件=添加监听+提供处理逻辑
    v-on:事件名="内联语句"
    v-on:事件名="methods中的函数名fn"
    v-on:事件名="methods中的函数名fn(参数)"
    v-on:<===>@事件名

    v-bind：动态设置html的标签属性--》src url tirle

    v-for:基于数据循环，多次渲染整个元素--》数组，对象，数字...
        v-for = "(item,index) in 数组"--（未用到index时可以省略）
-->
<body>
    <div id="app">

        {{msg}}
        <div v-html="msg"></div>
<hr>
        <div v-show="flag">v-show</div>
        <div v-if="flag02">v-if</div>
<hr>       
        <p v-if="gender === 1">性别：男</p><p v-else>性别：女</p>
        <div v-if="score >= 90">A等</div>
        <div v-else-if="score >= 60">B等</div>
        <div v-else>C等</div>  
<hr>
    <button v-on:click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
<hr>
    <button @click="fn">登录</button>
    <h5 v-show="login">请您先登录</h5>
<hr>
    <p>零食贩卖机！！！</p>
    <div>
        <button @click="shopping(15)">可乐15元</button>
        <button @click="shopping(19)">牛奶19元</button>
    </div>
    <div>
        <button @click="shopping(66)">炸鸡66元</button>
        <button @click="shopping(19)">汉堡19元</button>
    </div>
    <div>余额:{{ money }}</div>
<hr>
    <div>
        <img v-bind:src="url" alt="">
        <img v-bind:src="url02" alt="">
    </div>
<hr>
    <p>水果店</p>
    <ul>
        <li v-for="(item,index) in list">
            {{ item }}
        </li>
    </ul>


    </div>
    
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg:
           '<a href="https://www.baidu.com">百度</a> ',
            flag: false,
            flag02: true,
            gender: 2,
            score: 90,
            count: 100,
            login: true,
            money: 666,
            url: './image/01.webp',
            url02: './image/02.webp',
            list: ['苹果','草莓','西瓜']
        },
        methods: {
            fn(){
                //this指向当前实例（app.login=this.login）
                app.login = !app.login  
            },
            shopping(price){
                this.money -= price
            }
        }
    })
</script>
</body>
</html>

 

图片切换案例！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-show="index > 0" @click="index--">上一页</button>
        <img v-bind:src="list[index]" alt="">
        <button v-show="index < list.length-1" @click="index++">下一页</button>
    </div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            index: 0,
            list:[
                './image/01.webp',
                './image/02.jpg',
                './image/03.jpg',
                './image/04.jpg',
                './image/05.jpg',
            ]
        }
    })
</script>
</body>
</html>

图书管理案例！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>图书管理</p>
        <ul>
            <li v-for="item in bookList">
                <span>{{ item.name }}</span>
                <span>{{ item.author }}</span>
                <!--注册点击事件->通过id进行删除数组中的对应项-->
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data:{
            bookList:[
                {id: 1, name:'《西游记》', author: '吴承恩'},
                {id: 2, name:'《西游记》', author: '吴承恩02'},
                {id: 3, name:'《西游记》', author: '吴承恩03'},
                {id: 4, name:'《西游记》', author: '吴承恩04'}
            ]
        },
        methods: {
            del(id){
            //通过id进行删除数据中的对应项->filter
            //filter:根据条件，保留满足条件的对应项，得到一个新数组
            //=>:箭头(需要保留的数据)
            this.bookList=this.bookList.filter(item => item.id != id)
            }
        }
    })
</script>

</body>
</html>

Crystal_qwq
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值