暑期实训记录2

最新推荐文章于 2022-01-19 14:07:17 发布

晚上蹦哒嘀

最新推荐文章于 2022-01-19 14:07:17 发布

阅读量77

点赞数

本文链接：https://blog.csdn.net/qq_43510209/article/details/118368509

版权

今天是项目实训的第三天，时间过得好快啊。作为开发过程管理小组的一员，今天我主要学习了vue框架的一些基础，了解了前后端开发组成员的进度，目前代码整合和文档管理工作还没开始进行。后端的数据库开发部分平稳地推进着，完成了数据表的建立，并对外提供了数据插入接口。由于在前端开发中没有经验，所以多数同学只能从html基础开始，用户模块的同学通过网上的demo实现了登录功能，结合了一个小的数据库，还未与自己设计的界面相结合。大家还处于一个摸索阶段，而且现在我们采用的是直接引入vue.js的方式，目前感觉前后端的开发任务还是非常紧的。

今天熟悉了vue对象的创建，包括赋值el，data，methods等，并使用mustache语法显示对象，了解了v-once，v-for，v-on，v-bind等基本语法，体会了vue的响应的数据绑定，它简化了对显示数据的控制。

下面是学习过程中的一些代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display:none
        }
    </style>
</head>
<body>

<div id="app" v-cloak>
    <h2>{{message}},Aloha</h2>
    <h1>{{name}}</h1>
    <h1 v-once>{{name}}</h1>
    <ul>
        <li>{{movies[0]}}</li>
        <li v-for="item in movies">{{item}}</li>
    </ul>
    <h2>当前计数{{counter}}</h2>
    <button v-on:click = "add"> + </button> //按钮点击响应 v-on与:之间不能有空格，否则点击事件失效！
    <button v-on:click = "sub"> - </button> //v-on -> @click “语法糖”
</div>

<div id="app1" v-cloak>
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
    <h2 v-text="message"></h2>
    <h2 v-pre>{{message}}</h2>
    <img src="https://img.alicdn.com/imgextra/i1/28826658/O1CN01eyA3lu1z3PgS21jF2_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt="">
    <img v-bind:src="imgURL" alt="图片无法加载">
    <a v-bind:href="aHref">百度一下</a>
</div>

<script src="/static/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // let(变量) const(常量)
    const app = new Vue({
        el:'#app',//用于挂在要管理的元素 vue需要管理的属性
        data:{ //定义数据     可以是从服务器请求的数据
            message:'你好啊',
            name:'计数器',
            movies:['hh','ll','kk','qq','yy'],
            counter:0
        },
        methods:{
            add:function(){
                this.counter++
            },
            sub:function(){
                this.counter--
            }
        }
    })
    const app1=new Vue({
        el:'#app1',
        data:{
            message:'你好啊',
            url:'<a href="http://www.baidu.com">百度一下</a>',
            imgURL:'https://img.alicdn.com/imgextra/i1/28826658/O1CN01eyA3lu1z3PgS21jF2_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            aHref:'https://www.baidu.com/'
        }
    })
</script>

</body>
</html>

晚上蹦哒嘀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
暑期实训记录2

今天是项目实训的第三天，时间过得好快啊。作为开发过程管理小组的一员，今天我主要学习了vue框架的一些基础，了解了前后端开发组成员的进度。后端的数据库开发部分平稳地推进着，完成了数据表的建立，并对外提供了数据插入接口。...
复制链接

扫一扫