生命周期函数
组件挂载以及组件更新、组件销毁的一系列的方法。这些方法就叫做生命周期函数。
其中函数有：
beforeCreate-实例化刚刚被创建;
created-实例化创建完成；
beforeMount-模板编译之前；
mounted-模板编译完成，请求数据，操作dom，放在这个里面；
beforeUpdate-数据更新之前；
Updated-数更新之后；
beforeDestroy-实例销毁之前，页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数；
destroyed-实例销毁完成。
请求数据
1、vue-resource： 官方提供的vue的一个插件，在github中查看使用方法https://github.com/pagekit/vue-resource。
需要引入vue-resource.js。
<script src="js/vue-resource@1.5.1.js"></script>
使用举例
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.get(api).then((response)=>{
console.log(response);
this.list = response.body.result;},
function(err){ console.log(err);
});
2、axios：第三方插件，需要引入js。哪里使用哪里引入。
<script src = “ https://unpkg.com/axios/dist/axios.min.js ” > </script >
axios.get(api).then(response => {
console.log(response.data.result);
this.list = response.data.result;
}).catch(error => { // handle error console.log(error);
}).then(function () { // always executed});
Fetch-jsonp：第三方插件，自己百度了解一下吧！
组件
可以是页面的一部分，也可以是一个页面。
全局注册组件
Vue.component('my-component-name', { // ... 选项 ...})
局部注册组件
var ComponentA = { /* ... */ }
new Vue({
el: '#app',
components: { 'component-a': ComponentA, 'component-b': ComponentB }})
父子组件传值
1、父组件调用子组件的时候绑定动态属性；
2、使用子组件绑定属性title=“msg”></v-header>
3、props:[‘title’]子组件使用props接收父组件传递的参数；
在开发有人员多的情况下可以约束传值的合法性。
Props:{
Home:Object,//也可以将整个父组件传给子组件
title:String
}
父组件主动获取子组件的数据和方法
1、调用子组件的时侯定义一个ref
<v-header ref=”header”></v-header>
2、在父组件里面通过
This.$refs.header.属性;
This.$refs.header.方法;
子组件主动获取父组件的数据和方法
this.$parent.属性；
this.$parent.方法；
非父子组件传值
1、新建一个js文件,实例化vue ；
Var VueEmit = new Vue();
2、在要广播的地方引入刚才定义的实例；
3、通过$emit设置数据
VueEmit.$emit(‘name’,’数据’);
4、在接受数据的地方通过$on接受广播的数据,监听值是否改变，值改变则触该事件，改变则执行。
VueEmit.$on(‘name‘，(data)=>{
Console.log(data);
});
路由（vue-router）
根组件自动挂载不同的组件，官网：https://router.vuejs.org/
如何使用：
1、创建组件，引入组件js
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
2、定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
3、实例化vueRouter
// 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
4、挂载根实例
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router}).$mount('#app')
访问路由
// Home.vue单页
export default {
computed: {
username () {
// 我们很快就会看到 `params` 是什么
return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}}
使用elementUI
1、找到官网http://element.eleme.io/#/zh-CN/component/quickstart 查看api
2、在项目下安装element包
cpnm i element-ui -s//-s表示--save
3、main.js 引入elementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
4、Webpack.config.js配置file_loader
//解析字体文件、svg图标等
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
网友评论