MVVM记录 #19

TracerLee · 2016-09-26T06:31:17Z

学习MVVM框架

TracerLee · 2016-09-26T06:32:08Z

vue.js

此记录由于为1.x的版本不再作为学习参考
2017年4月7日 00:54:07

摘录

所有的 Vue.js 组件其实都是被扩展的 Vue 实例
Vue.js 拥抱数据驱动的视图概念。

指令带有前缀 v-，以指示它们是 Vue.js 提供的特殊特性。
组件系统是用 Vue.js 构建大型应用的基础。
一个典型的用 Vue.js 构建的大型应用将形成一个组件树。

组件的应用模板

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel

var vm = new Vue({
  // 选项
})

生命周期图示

阅读到http://cn.vuejs.org/guide/class-and-style.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>vue demo</title>
        <script src="./node_modules/vue/dist/vue-1.0.js"></script>
    </head>
    <body>
        <div id="example-2">
            <p v-if="greeting">Hello {{* name}}!</p>
            <p v-if="greeting">Hello {{name}}!</p>
            <p>{{{html}}}</p>
            <p>{{ok?'yes':'no'}}</p>
            <p>{{ message.split('').reverse().join('') }}</p>
            <p>首字母大写“过滤器”: {{ message | capitalize }}</p>
            <a :href="http://baidu.com">link</a>
            <button :disabled="disabledFn">Button</button>
            <button @click="clickFn">Button</button>
            <div>a={{a}},b={{b}}</div>
            <div>fullName: {{fullName}}; firstName: {{firstName}}; lastName: {{lastName}}</div>
        </div>
    </body>
</html>

<script>
var vm = new Vue({
    el: "#example-2",
    data: {
        greeting: 1,
        name: 'Vue.js',
        html: '<strong>输出html</strong>',
        ok: false,
        message: 'hello world',
        a: 100,
        firstName: 'Foo',
        lastName: 'Bar'
    },
    created: function () {
        console.warn('vm is created.');
    },
    methods: {
        disabled: function () {
            console.error('disabled');
        },
        clickFn: function () {
            alert('点击');
        }
    },
    computed: {
        b: function () {
            return this.a + 1
        },
        // 相当于getter
        // fullName: function () {
        //  return this.firstName + ' ' + this.lastName
        // }
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },

            // setter
            set: function (newVal) {
                var names = newVal.split(' ');
                this.firstName = names[0];
                this.lastName = names[names.length - 1];
            }
        }
    }
});


vm.$watch('name', function (newVal, oldVal) {
    console.log('变化了',newVal,oldVal);
});
</script>

TracerLee · 2017-04-06T16:54:46Z

vuex map的使用遇到的坑

vuex的map有如下写法

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

其中的使用扩展符...来进行对象展开运算，标准的ES6只对数组有效，故一直报错...

查明原因原来是Babel的不同等级支持度不一样，需要设置不同的stage

解决方案

# 安装babel-preset-stage-2
$ npm i babel-preset-stage-2 -D

// 设置.babelrc，新增了stage-2
{
  "presets": [
    ["es2015", { "modules": false }],
    "stage-2"
  ]
}

再次启动程序npm run dev，不报错了

汗！真是折腾，官网vuex没有告知这一点

参考： 如何区分Babel中的stage-0,stage-1,stage-2以及stage-3（一）

TracerLee · 2017-04-06T17:05:23Z

重新看Vue.js教程得到的启示

生态学习

axios（ajax工具，替代vue-resource）
组件库（iview、element-ui、YDUI、mint-ui）

基础

模板语法
- 纯HTML，v-html
- 用 JavaScript 表达式，迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。
- 过滤器可以用在两个地方：mustache 插值和 v-bind 表达式
- ```
 
 {{ message | capitalize }}
 
 <div v-bind:id="rawId | formatId"></div>
```
- 过滤器可以串联，过滤器是 JavaScript 函数，因此可以接受参数
计算属性
- 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
- 观察 Watchers
列表渲染
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：
```
vm.items[indexOfItem] = newValue
```
当你修改数组的长度时，例如：
```
vm.items.length = newLength
```
为了避免第一种情况，以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果，同时也将触发状态更新：
```
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
```
避免第二种情况，使用 splice：
```
example1.items.splice(newLength)
```
组件

Prop
字面量语法 vs 动态语法

<!-- 传递了一个字符串"1" -->
<comp some-prop="1"></comp>
<!-- 传递实际的数字 -->
<comp v-bind:some-prop="1"></comp>

自定义事件
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
使用自定义事件的表单输入组件
使用 Slot 分发内容

TracerLee added the 经验 label Sep 26, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MVVM记录 #19

MVVM记录 #19

TracerLee commented Sep 26, 2016

TracerLee commented Sep 26, 2016 •

edited

TracerLee commented Apr 6, 2017

TracerLee commented Apr 6, 2017 •

edited

MVVM记录 #19

MVVM记录 #19

Comments

TracerLee commented Sep 26, 2016

TracerLee commented Sep 26, 2016 • edited

vue.js

摘录

TracerLee commented Apr 6, 2017

vuex map的使用遇到的坑

TracerLee commented Apr 6, 2017 • edited

重新看Vue.js教程得到的启示

生态学习

基础

TracerLee commented Sep 26, 2016 •

edited

TracerLee commented Apr 6, 2017 •

edited