VUE学习
1.Vue绑定属性
2.双向数据，事件以及ref获取dom节点
<input ref='xxxx' stype=input />
(this.$refs.xxxx.value),取值，其中this.$refs.xxxx 为dom节点，可以进行js操作
3.绑定html属性
例如
data(){
url1:'https://www.baidu.com',
}
<a :href="url1" ></a>
等同于 v-bind:href="url1"
4.模块化封装js，已经数据本地存储localStorage使用
<script>
import storage from '../model/storage.js';
</script>
5.注册组件，组件使用
<template>
<div id="app">
<v-menu></v-menu>
...
</template>
<script>
import Menu from '../components/Menu.vue';
import Resource from '../components/Resource.vue';
export default {
components:{
'v-menu':Menu,
'v-resource':Resource,
},
...
6.Vue生命周期函数
<script>
export default {
beforeCreate() {
console.log('beforeCreate!!');
},
created() {
console.log('created!!');
},
beforeMount() {
console.log('beforeMount!!');
},
mounted() {
console.log('mounted!!');
},
beforeUpdate() {
console.log('beforeUpdate!!');
},
updated() {
console.log('updated!!');
},
beforeDestroy() {
console.log('beforeDestroy!!');
},
destroyed() {
console.log('destroyed!!');
},
...
</script>
7.vue-resource 数据请求，安装使用
cnpm install vue-resource --save
main.js #引入
import VueResource from 'vue-resource'
Vue.use(VueResource)
然后xxx.vue中直接使用
methods: {
getinfo(){
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.get(api).then(function(response){
console.log(response);
var infolist=response.body.result;
if (infolist){
this.infolist=infolist;
}},
function(err){
console.log(err);
})}
},
