"0.MVVM 　　什么是 MVVM？就是 Model-View-ViewModel。 [图片] 　　ViewModel 是 Vue.js 的核心，它是一个 Vue 实例。 1. 基础示例代码： <meta charset='utf-8'> <meta name='viewpor ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 8 浏览 • 4 个月前

vue 学习

0.MVVM

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

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

1. 基础示例

代码：

<!DOCTYPE html>
<html>
<head>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">charset</span><span style="color: rgba(0, 0, 255, 1)">="utf-8"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="viewport"</span><span style="color: rgba(255, 0, 0, 1)"> content</span><span style="color: rgba(0, 0, 255, 1)">="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</head>
<body>
<div id="didi-navigator">
 <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">ul</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

 <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">li </span><span style="color: rgba(255, 0, 0, 1)">v-for</span><span style="color: rgba(0, 0, 255, 1)">="tab in tabs"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">

 {{ tab.text }}

 </span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">li</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

 <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">ul</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="js/vue.js"</span><span style="color: rgba(255, 0, 0, 1)"> type</span><span style="color: rgba(0, 0, 255, 1)">="text/javascript"</span><span style="color: rgba(255, 0, 0, 1)"> charset</span><span style="color: rgba(0, 0, 255, 1)">="utf-8"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="text/javascript"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

 <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">new</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> Vue({

 el: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">#didi-navigator</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,

 data: {

 tabs: [

 { text: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">巴士</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },

 { text: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">快车</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },

 { text: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">专车</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },

 { text: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">顺风车</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },

 { text: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">出租车</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },

 { text: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">代驾</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> }

 ]

 }

 })



</span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</body>
</html>

　　使用 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 标签也接受表达式形式的值。

3. 指令（上）

v-if 指令
v-show 指令
v-else 指令
v-for 指令
v-bind 指令
v-on 指令
v-model 指令

　　v-if：是否渲染。

　　v-show：肯定渲染，是否显示。

　　其中，v-show 不支持 <template 语法 >。一般来说，v-if 有更高的切换消耗，而 v-show 有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用 v-show 较好；如果在运行时条件不大可能改变，则使用 v-if 较好。另外，将 v-show 用在组件上时，因为指令的优先级 v-else 会出现问题，可以用另一个 v-show 替换 v-else。

3.1 关于 v-for

　　使用基础可参看http://www.cnblogs.com/xulei1992/p/6015416.html。

　　补充：

　　Vue.js 增加了两个方法观测变化：$set、$remove。

3.1.1 应该尽量避免直接设置数据绑定的数组元素

　　因为这些变化不会被 Vue.js 检测到，因而也不会更新视图渲染。这时，我们可以使用 $set 方法：

demo.item.$set(0,{childMsg:’Changed!’})

　　$remove 是 splice 的语法糖，用于从目标数组中查找并删除元素。

demo.item.$remove(item)

3.1.2 有时可能需要用全新对象来替换数组

　　Vue.js 应尽可能地复用已有实例。如果没有唯一的键供追踪，则可以使用 track-by=”$index”，它强制让 v-for 进入原位更新模式：片段不会被移动，而是简单地以对应索引的新值刷新。这时 DOM 节点不再映射数组元素顺序的改变，不能同步临时状态（比如 <input> 元素的值），以及组件的私有状态。

　　因为 js 的限制，Vue.js 不能检测到下面数组的变化：

直接用索引设置元素，如 vm.items[0]={}。
修改数据的长度，如 vm.items.length = 0。

　　前一个问题可用 $set 解决，后一个问题只需用一个空数组替换 items 即可。

3.1.3 v-for 可以和 vue.js 提供的内置过滤器（filterBy）或排序（orderBy）数据一起使用

　　filterBy 的例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input v-model="searchText" />
        <ul>
            <li v-for="user in users | filterBy searchText in'name'">{{user.name}}</li>
        </ul>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var haha = new Vue({
                el:'body',
                data:{
                    users:[
                        {
                            name:'快车',
                            tag:'1'
                        },
                        {
                            name:'慢车',
                            tag:'2'
                        },
                        {
                            name:'好车',
                            tag:'3'
                        },
                        {
                            name:'破车',
                            tag:'4'
                        }
                    ]
                }
            })
        </script>
    </body>
</html>

　　当我搜破车的时候：

　　orderBy 的例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li v-for="user in users | orderBy field reverse">{{user.name}}</li>
        </ul>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var demo = new Vue({
                el:'body',
                data:{
                    field:'tag',
                    reverse:false,    // 颠倒
                    users:[
                        {
                            name:'快车',
                            tag:'2'
                        },
                        {
                            name:'慢车',
                            tag:'3'
                        },
                        {
                            name:'好车',
                            tag:'1'
                        },
                        {
                            name:'破车',
                            tag:'0'
                        }
                    ]
                }
            })
        </script>
    </body>
</html>

其他：

　　v-bind 指令可以缩写为一个冒号，v-on 指令可以缩写为 @符号。

　　v-model 指令后面可以添加 number、lazy、debounce 参数。

Number 可以将用户的输入转换为 Number 类型（如果原值的转换结果为 NaN，则返回原值）。
在 input 中时添加 lazy 将数据改到在 change 事件中发生。
Debounce 可设置延时。

vue 学习

相关帖子

随便看看

vue 学习