Vue-first

2024-04-08 12:04:15

Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='./libs/vue-2.4.0.js'></script>
</head>
<body>
<!--Vue实例所控制的这个元素区域 就是MVVM中的v -->
    <div id="app">
        <p>{{msg}}</p><!--和art—template类似 不过这里直接msg就好 不用写上data.mes-->
    </div> 

<script>
    //而我们new出来的这个VM对象 就是MVVM中的 VM调度者
     var vm=new Vue({ //创建一个Vue实例
         el:'#app', //element元素 表示当前我们new出来的Vue实例 要控制页面上的哪个区域
          //这里的data就是MVVM中的V 专门用来保存每个页面的数据的
         data:{    //data属性中,存放的是el中要用到的数据
             msg:'123'
         } //通过Vue提供的指令 很方便能把数据渲染到页面上 不再需要操作DOM元素
     })
</script>
</body>
</html>

插值表达式语法：{{}}

插值表达式是vue框架提供的【指令】

插值表达式中不可以写代码片段会报错 
属性节点中不能使用插值表达式，如果要为元素节点动态绑定数据，我们要用v-bind动态绑定属性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 字符串 -->
        <p>{{ str }}</p> <!--页面展示：字符串-->
        <p>{{ num + 'aaa'}}</p><!--页面展示：1aaa-->
        <p>{{ str.length }}</p> <!--页面展示：3-->
        
        <!-- 数值 -->
        <p>{{ num }}</p> <!--页面展示：1-->
        <p>{{ num+num1 }}</p> <!--页面展示：101-->
        <p>{{ num > num1 }}</p>  <!--页面展示：false-->
        <p>{{ num.toFixed(2) }}</p> <!--页面展示：1.00-->
        
        <!-- boolean -->
        <p>{{ flag }}</p> <!--页面展示：true-->
        
        <!-- 数组 -->
        <p>{{ arr }}</p> <!--页面展示：[1,2,3,4]-->
        <p>{{ arr[3] }}</p> <!--页面展示：4-->

        <!-- 对象 -->
        <p>{{ obj }}</p> <!--页面展示：{ "name": "tom", "age": 20 }-->
        <p>{{ obj.name }}</p> <!--页面展示：tom-->
        
        <!-- null/undefined/NaN -->
        <p>{{ arg1 }}</p> <!--页面展示：-->
        <p>{{ arg2 }}</p> <!--页面展示：-->
        <p>{{ arg3 }}</p> <!--页面展示：NaN-->

        <!-- 三目运算符 -->
        <p>{{ num > num1 ? "是" : "否" }}</p> <!--页面展示：否-->

    </div>
    
    <script>
        new Vue({
            el:"#app",
            data:{
                str: '字符串',
                num: 1,
                num1:100,
                flag: true,
                arr: [1,2,3,4],
                obj:{
                    name:'tom',
                    age:20
                },
                arg1: null,
                arg2: undefined,
                arg3: NaN
            }
        })
    </script>
</body>
</html>

    <style>
       [v-cloak]{
           display:none;
       }
    </style>
</head>
<body>
    <div id="app">
        <!--使用v-cloak能够解决 差值表达式的闪烁问题  必须搭配style里的display:none-->
        <p v-cloak>{{msg}}</p>
        <h4 v-text='msg'>
            <!--v-text默认是没有闪烁问题的自然不需要display属性
            但是会覆盖掉元素中原本的内容 而v-cloak的差值表达式 只会替换掉自己的占位符-->
        </h4>
    </div>

码农公寓

相关文章