vue

[Wscats]

Vue.js 教程 - 极客学院Wiki
Vue.js首先是个MVVM的框架，跟angular在某些地方很相似，它没有控制器的概念，有的是组建和过滤器来处理数据在M跟V层之间的通信

View
用户看到的实际HTML / DOM
demo.$el // The View

Model
这是一个略微修改的Javascript对象
demo.$data // The Model

[Wscats]

Vue.extend 返回的自定义构造函数可以把这些组件实例化，不过更推荐的声明式的用法是通过 Vue.component(id, constructor) 注册这些组件。一旦组件被注册，它们就可以在 Vue 实例的模板中以自定义元素形式使用了

[Wscats]

1.0版本v-repeat指令已经失效了，已替换为v-for

[Wscats]

注意写过滤器的顺序，尽可能写在全局的开头，不然会容易发生报错

Vue.filter('reverse', function(value) {
       return value.split('').reverse().join('')
})

<h2>{{title | lowercase | reverse}}</h2>

[Wscats]

vue路由
vue ajax

[Wscats]

vue-resource是一个非常轻量的用于处理HTTP请求的插件，它提供了两种方式来处理HTTP请求：

• 使用Vue.http或this.$http
• 使用Vue.resource或this.$resource

这两种方式本质上没有什么区别，阅读vue-resource的源码，你可以发现第2种方式是基于第1种方式实现的。

var demo = new Vue({
    el: '#app',
    data: {
        gridColumns: ['customerId', 'companyName', 'contactName', 'phone'],
        gridData: [],
        apiUrl: 'http://211.149.193.19:8080/api/customers'
    },
    ready: function() {
        this.getCustomers()
    },
    methods: {
        getCustomers: function() {
            this.$http.get(this.apiUrl)
                .then((response) => {
                    this.$set('gridData', response.data)
                })
                .catch(function(response) {
                    console.log(response)
                })
        }
    }
})

关键是可以在对象自身去调用$http服务，需要注意的是要用$set方法把异步回来得到的值进行操作

[qq452261789]

挤前排

[Wscats]

绑定data的三种方法

var demo = new Vue({});
demo.$set('name', 'wsscat');
demo.name = 'wsscat';
demo.$data.name = 'wsscat';

[LucienJan]

绑定data的三种方法写在外面会不会略显累赘？一般情况是否建议写在new Vue({})里呢？ 😃
@Wscats 是的建议写在里面~

[Wscats]

Vue3.0 使用 Composition-API 风格重构逻辑

下载了 @vue/composition-api 插件以后，按照文档在 main.js 引用便开启了 Composition API 的能力。

// main.js
import Vue from 'vue'
import App from './App.vue'
import VueCompositionApi from '@vue/composition-api'

Vue.config.productionTip = false
Vue.use(VueCompositionApi)

new Vue({
  render: h => h(App),
}).$mount('#app')

回到 App.vue，从 @vue/composition-api 插件引入 { reactive, computed } 两个函数：

import { reactive, computed } from '@vue/composition-api'

仅保留 components: { ... } 选项，删除其他的，然后写入 setup() 函数：

export default {
  components: { ... },
  setup () {}
}

接下来，我们将会在 setup() 函数里面重写之前的逻辑。

首先定义数据。

setup() {
  const data = reactive({
    name: "Eno Yao"
  });
  return data;
}

在 setup() 函数里，我们定义一个响应式的 data 对象，类似于 2.x 风格下的 data() 配置项。

<template>
  <div>
    <p>{{name}}</p>
    <p>{{fullName}}</p>
  </div>
</template>

<script>
import { reactive, computed } from "@vue/composition-api";
export default {
  setup() {
    const data = reactive({
      todoList: [],
      name: "Yao",
      fullName: computed(() => {
        return `Eno ${data.name}`;
      })
    });
    return data;
  }
};
</script>

生命周期函数

setup() {
  onMounted(() => {
    window.console.log("mounted被触发");
  });
}

增加方法和响应式

<template>
  <div>
    <p>{{name}}</p>
    <p>{{fullName}}</p>
    <button @click="add">ok</button>
  </div>
</template>

<script>
import { reactive, toRefs, computed, onMounted } from "@vue/composition-api";
export default {
  setup() {
    const data = reactive({
      name: "Yao",
      fullName: computed(() => {
        return `Eno ${data.name}`;
      })
    });
    onMounted(() => {
      window.console.log("mounted被触发");
    });
    const add = () => {
      data.name = "Yo";
      window.console.log("add被触发", data);
    };
    return {
      // 这里使用了 toRefs() 给 data 对象包装了一下，是为了让它的数据保持响应式的
      ...toRefs(data),
      add
    };
  }
};
</script>

watch和节点ref

<template>
  <div>
    <p>{{name}}</p>
    <p ref="p">{{fullName}}</p>
    <button @click="add">ok</button>
  </div>
</template>

<script>
import {
  reactive,
  toRefs,
  computed,
  onMounted,
  watch
} from "@vue/composition-api";
export default {
  setup() {
    const data = reactive({
      // ref节点
      p: null,
      name: "Yao",
      fullName: computed(() => {
        return `Eno ${data.name}`;
      })
    });
    watch(
      () => data.name,
      () => {
        window.console.log("count数值发生变化了");
      }
    );
    onMounted(() => {
      window.console.log("mounted被触发");
    });
    const add = () => {
      data.name = "Yo";
      window.console.log("add被触发", data);
    };
    return {
      // 这里使用了 toRefs() 给 data 对象包装了一下，是为了让它的数据保持响应式的
      ...toRefs(data),
      add
    };
  }
};
</script>

参考文档

• 官方API
• 官方vue-composition-api文档