项目实训第一天

最新推荐文章于 2023-08-17 09:17:27 发布

Monou...

最新推荐文章于 2023-08-17 09:17:27 发布

阅读量119

点赞数

分类专栏：项目实训

本文链接：https://blog.csdn.net/qq_45535307/article/details/118313245

版权

项目实训专栏收录该内容

11 篇文章 0 订阅

订阅专栏

项目实训
今天项目实训第一天，进行了简单的开营仪式，和指导老师进行简单对接，便在组内进行简单的分工。我和另一位同学负责关于车间管理和仓库管理负责小组。而在小组内我选择了负责前端由另一位同学进行后端开发。
在今天第一天的内容主要是对人员分工以及技术选择的问题，基本大方向前端采用vue框架，后端则是JavaSpring。
之前写的一些课设前端都是原生html、css、js进行开发，从未接触过vue的学习内容，在今天进行分工结束之后，便简单开始一点vue的学习。
vue学习
vue版本

/*!
 * Vue.js v2.6.14
 * (c) 2014-2021 Evan You
 * Released under the MIT License.
 */

简单vue语法：
Mustache: 在这里插入图片描述

vue的数据是相应式的，但是有时候并不希望其随便更改，于是可以使用v-once命令
v-once: 表示元素和组件只会被渲染一次，不会随着数据更改而更改

在这里插入图片描述

v-html 在从服务器获取的数据有时候有 html标签的，这时候希望对html标签一起
解析，而不是直接显示其内容，这时候可以添加v-html标签
<body>

<div id="app">
<!--  -->
  <h2>{{message}}</h2>
  <h2 >{{url}}</h2>
<!--  使用 v-html  元素-->
  <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '早桑好呀！',
      //有时候 从服务器获得的信息 包括html符号
      url: '<a href= "www.baidu.com">百度一下 </a>'
    }
  })

</script>
</body>

v-pre 标签，跳过对Mustache语法的解析，直接显示
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '早桑好呀！'
    }
  })
</script>

在这里插入图片描述

v-for  简单的很  感觉和python的for很简单。
<div id="app">
  <ul>
     <li v-for="item in movies">{{item}}</li>
  </ul>
</div>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      movies:['海王','海贼','星际穿越','大话西游','盗梦空间']
    }
  })

在这里插入图片描述

v-bind 动态绑定：
动态绑定的语法糖   在前面简单加一个 “：”  冒号
对象语法：（以给类加具体值为例） :class = {类1：boolean，类2，boolean｝
数组语法：   :class = [类1，类2]
对象语法可实现动态绑定，数组语法相比则比较笨拙。

简单对所学vue的应用：

<!DOCTYPE html>
<html lang="en">
<head>
<!--    实现动态输出一个列表，初始第一个元素为红色，
之后点击哪个元素，则那个元素变为红色。-->
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
    <ul>
        <li    @click="liClick(index)" :class="getClass(index)" v-for="(item,index) in movies">{{index}}-{{item}}</li>
    </ul>

</div>

<script>

    const app = new Vue({
        el: '#app',
        data:{
            movies: ['海王', '海尔兄弟', '哪吒闹海', '亚特兰蒂斯', '功夫熊猫'],
            num : 0,
            isActive:false
        },
        methods: {
            getClass: function (index) {
                this.isActive = (index === this.num)
                return {active :this.isActive}
            },
            liClick: function (index){
                this.num = index;
            }
        }
    })
</script>
</body>
</html>

Monou...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目实训第一天

项目实训今天项目实训第一天，进行了简单的开营仪式，和指导老师进行简单对接，便在组内进行简单的分工。我和另一位同学负责关于车间管理和仓库管理负责小组。而在小组内我选择了负责前端由另一位同学进行后端开发。在今天第一天的内容主要是对人员分工以及技术选择的问题，基本大方向前端采用vue框架，后端则是JavaSpring。之前写的一些课设前端都是原生html、css、js进行开发，从未接触过vue的学习内容，在今天进行分工结束之后，便简单开始一点vue的学习。vue学习vue版本/*! * Vue.js
复制链接

扫一扫