vue.js第一天

最新推荐文章于 2024-08-16 13:15:15 发布

DB_鸠

最新推荐文章于 2024-08-16 13:15:15 发布

阅读量238

点赞数

分类专栏： vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_66711291/article/details/123051787

版权

vue.js 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

vue.js是一个框架，是声明式编程

1.创建

const o = new Vue()

2.框架

在创建vue时括号内可以传入一个对象

对象内有一些固定的框架

1.el：绑定dom对象

2.data：基础数据

3.methods：函数

4.conputed：计算属性

const o = new Vue({
            el:'#main',
            data:{
                games:[
                    {name:'musedash',price:18},
                    {name:'musedash',price:20},
                    {name:'musedash',price:40},
                    {name:'musedash',price:50},
                ]
            },
            computed: {
               totalprice:function(){
                   var s = 0;
                   this.games.forEach(element => {
                       s = s + element.price;
                   });
                   return s;
               }
            },
            methods: {
                
            }
        })

3.插值语法

在标签内写入{{}}可以将双括号内的内容作为变量进行解析

4.指令

 v-once 只会解析一次，已经展示不能被修改
        v-html  解析传来的html，覆盖之前的所有内容
        v-text  将字符串原封不动展示，覆盖之前的所有内容
        v-pre   对内容不做解析，原封不动得显示
        v-cloak  在页面解析之前不做显示
                  //需要自己定义，这也说明vue可以自定义指令
                  vue的变量被解析后会清除标签内的指令
        v-bind  可以为标签动态绑定属性值  例如class  src   href   style
                有变量，对象，数组三种写法

5.作业

要求在页面上展示一个列表

列表的第一项默认选中，当点击某一项时该项会被选中，其他会被取消选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <script src="./环境/vue.min.js"></script>

    <style>
        *{
            padding: 0px;
            border: 0px;
            margin: 0px;
        }

        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color:aqua;
        }

        #main{
            width: 308px;
            height: 408px;
            background-color: aquamarine;
            display: flex;
            justify-items: center;
        }

        li{
            list-style: none;
            width: 300px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid aqua;
        }

        .now{
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="main">
        <ul>
            <li v-for="(item,index) in games" v-bind:class="{'now':index == active_index}" @click="active_index = index">
            {{item}}</li>
        </ul>
    </div>

    <script>
        var o = new Vue({
            el: '#main',
            data:{
                games: ['原神','明日方舟','炉石传说','喵斯快跑'],
                active_index:0,
            },
        })
    </script>
</body>
</html>

DB_鸠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js第一天

vue.js是一个框架，是声明式编程1.创建const o = new Vue()2.框架在创建vue时括号内可以传入一个对象对象内有一些固定的框架1.el：绑定dom对象2.data：基础数据3.methods：函数4.conputed：计算属性const o = new Vue({ el:'#main', data:{ games:[ {na
复制链接

扫一扫

专栏目录