Wscats
vue
Vue.js 教程 - 极客学院Wiki Vue.js首先是个MVVM的框架，跟angular在某些地方很相似，它没有控制器的概念，有的是组建和过滤器来处理数据在M跟V层之间的通信
View 用户看到的实际HTML / DOM demo.$el // The View
Model 这是一个略微修改的Javascript对象 demo.$data // The Model
Vue.extend 返回的自定义构造函数可以把这些组件实例化，不过更推荐的声明式的用法是通过 Vue.component(id, constructor) 注册这些组件。一旦组件被注册，它们就可以在 Vue 实例的模板中以自定义元素形式使用了
注意写过滤器的顺序，尽可能写在全局的开头，不然会容易发生报错
Vue.filter('reverse', function(value) {
return value.split('').reverse().join('')
})
<h2>{{title | lowercase | reverse}}</h2>
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方法把异步回来得到的值进行操作
绑定data的三种方法
var demo = new Vue({});
demo.$set('name', 'wsscat');
demo.name = 'wsscat';
demo.$data.name = 'wsscat';
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>