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

本文链接：https://blog.youkuaiyun.com/weixin_44519518/article/details/119462489

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端布局

移动端布局，一般宽度百分比，高度自适应左右两边的留白一般固定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>{{msg}}</p>
        </div>

        <script src="js/vue.js"></script>
        <script>
            // new Vue()实例化对象
            new Vue({
                // el绑定元素
                el:'#app',
                // data专门书写数据
                data:{
                    // k:v k代表数据名字 v数据的值
                    msg:'hello vue'
                }
            })
        </script>
    </body>

el绑定可以使用vue的区域，绑定的元素一般是id （#id名） id可以保证唯一性，一般一个页面只实例化一个对象，可以是标签名类名.+类名

一个页面可以实例化多个，但是不建议

MVVM:

view视图：指的就是MVVM中的V。

new Vue（{}）：指的是MVVM中的VM ，通过控制器把M和V联系起来。

data：指的就是MVVM中的M model数据模型。

插值表达式：

插值表达式：可以放置变量也可以放置表达式。

 <body>
        <div id="app">
          
            <p>
                {{Math.random()}}
            </p>
            
            <p>
                {{1+1}}
            </p>
            <p>
                <!-- 条件？'条件为真的时候执行代码':'条件为假的时候执行代码' -->
               {{ 1>2?'hello':'welcome'}}
            </p>
        </div>

        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app'
            })
        </script>
    </body>