1.mvvm 的讲解与 差值语法

 

　　什么是MVVM？就是Model-View-ViewModel。

img

　　ViewModel是Vue.js的核心，它是一个Vue实例。

1.基础示例

v 就是页面展示的效果 m 就是body 里边的内容 vm 就是new Vue 实例里边的内容

代码：

复制代码

<!DOCTYPE html>
​
<html>
​
<head>
​
    <meta charset="utf-8">
​
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
​
    <title></title>
​
</head>
​
<body>
​
<div id="didi-navigator">
​
     <ul>
​
     <li v-for="tab in tabs">
​
     {{ tab.text }}
​
     </li>
​
     </ul>
​
    </div>
​
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
​
    <script type="text/javascript">
​
     new Vue({
​
     el: '#didi-navigator',
​
     data: {
​
     tabs: [
​
     { text: '巴士' },
​
     { text: '快车' },
​
     { text: '专车' },
​
     { text: '顺风车' },
​
     { text: '出租车' },
​
     { text: '代驾' }
​
     ]
​
     }
​
     })
​
   
​
    </script>
​
</body>
​
</html>

复制代码

img

　　使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

　　· 定义View

　　· 定义Model

　　· 创建一个Vue实例或"ViewModel"，它用于连接View和Model

 

2.数据绑定

2.1 插值

　　有时候只需渲染一次数据，后续数据变化不再关心，可以通过“*”实现：

<span>Text: {{*text}}</span>

　　双大括号标签会把里面的值全部当作字符串来处理，如果值是HTML片段，则可以使用三个大括号来绑定：

<div>Logo: {{{logo}}}</div>
​
Logo: ‘<span>DDFE</span>’

2.2 表达式

　　Mustache标签也接受表达式形式的值。

 

 

posted @ 2021-10-20 17:30  软件开发路上的伴友  阅读(60)  评论(0)    收藏  举报