前端学习笔记：Vue 第一天--移动端布局、Vue介绍

最新推荐文章于 2024-05-07 06:50:28 发布

Yokily

最新推荐文章于 2024-05-07 06:50:28 发布

阅读量749

点赞数 1

本文链接：https://blog.csdn.net/weixin_44519518/article/details/119462489

版权

本文介绍了移动端布局的基本策略，包括宽度百分比、高度自适应以及使用calc计算属性。接着，深入探讨了Vue框架，阐述了Vue的三大核心内容：指令、组件和路由，并解释了MVVM模式。最后，详细讲解了Vue中的插值表达式及其用途。

摘要由CSDN通过智能技术生成

移动端布局

移动端布局，一般宽度百分比，高度自适应左右两边的留白一般固定15px，一些小元素可以设置宽高的。

块级标签如果不设置宽度， content+margin+padding+border等于父级的宽度。

视口标签实现移动端布局，必须加的标签禁止伸缩

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

calc计算属性：可以进行数值的计算符号两边一般加空格

 /* 100vw和当前的窗口一样宽  100vh和当前的窗口一样高 */
           
            main{
                /* calc计算属性 可以进行数值的计算 符号两边一般加空格*/
                height: calc(100vh - 40px);
               
               
            }

Vue

Vue 包含三块内容：vue指令、vue组件、vue路由

vue重点控制数据

书写格式：

 <body>
        <div id="app">
            <!-- 插值表达式  {
  {变量需要在data中出现}} -->
            <p>{

最低0.47元/天解锁文章

Yokily

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记：Vue 第一天--移动端布局、Vue介绍

移动端布局移动端布局，一般宽度百分比，高度自适应左右两边的留白一般固定15px，一些小元素可以设置宽高的。块级标签如果不设置宽度， content+margin+padding+border等于父级的宽度。视口标签实现移动端布局，必须加的标签禁止伸缩<metaname="viewport"content="width=device-width,initial-scale=1.0">calc计算属性：可以进行数值的计算符号两边一般加空格 /*...
复制链接

扫一扫