Vue-first

2019-08-08 18:05:32 阅读：219 来源： 互联网

标签：Vue MVVM ViewModel 视图 num 数据 first

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>

标签：Vue,MVVM,ViewModel,视图,num,数据,first
来源： https://www.cnblogs.com/yundong333/p/11322739.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue-first