web应用开发实战-vue.js

最新推荐文章于 2024-03-18 15:03:53 发布

みさかMimi

最新推荐文章于 2024-03-18 15:03:53 发布

阅读量528

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_62800996/article/details/126585754

版权

复习HTML-CSS-JavaScript：

什么是HTML语义化？

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。语义化的标签，旨在让标签有自己的含义。这些标签称为语义化标签：<title>、<hn>：h1~h6、<ul>、<li>、<header>、<nav>等。

解释清除浮动？

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。清除浮动的本质: 主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

CSS垂直居中实现？

通过display:flex实现CSS垂直居中；
已知父元素高度通过transform实现CSS垂直居中；
通过line-height实现CSS垂直居中；
定位到垂直居中的位置；

绝对定位和相对定位？

position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素；
position: relative;相对定位：相对定位是相对于元素在文档中的初始位置

说说盒子模型？

CSS盒子模型包括：内边距、外边距、边框、内容，还有高度（height）和宽度（width）。margin(左右外边距)，padding(左右内边距)，border(左右边框)。

了解Vue.js

官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
vue,js是基于JavaScript语言一套用于构建用户界面的渐进式JavaScript框架

<meta charset="utf-8">
<title>Vue.js</title>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello world!'
  }
})
</script>
</body>
</html>

MVVM与MVC

MVVM，是Model-View-ViewModel的简写,如图：其中ViewModel将视图 UI 和业务逻辑分开，ViewModel分离出来大部分的Controller代码，比起MVC更加清晰和容易维护。提高可测试性，降低耦合度。

MVC,M是模型层(业务模型)，V是视图层(用户界面)，C是控制层(控制器)。

Vue导入

先下载Vue.js,在谷歌浏览器中的扩展程序里面进行添加,如图：

Vue.js实例-计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器-Vue.js</title>
    <script src="lib/vue.js"></script>
</head>
<body>
      <div id="app">
          <button @click="subtract">-</button>
          <h1>进球数：{{num}}</h1>
          <button @click="add">+</button>
      </div>
     <script>
         var vm = new Vue({
             el:'#app',
             data:{
                 num: 0,
             },
             methods:{
                 subtract: function(){
                     this.num--;
                     console.log('1hello vue')
                 },
                 add: function(){
                     this.num++;
                     console.log('2hello vue')
                 }
             }


         })

     </script>
</body>
</html>