搭建脚手架CLI
- 脚手架是通过webpack搭建的开发环境
- 使用ES6语法
- 打包和压缩js为一个文件
- 项目文件在环境中编译,而不是浏览器
- 实现页面自动刷新
组件css作用域
- 组件域:
scoped
- 为防止在给某个组件标签添加样式时,用于相同标签的其他组件也有这个样式
<style scoped></style>
属性传值Props
在子组件中调用父组件的数据
- 在父组件
<template>
的子组件标签中,绑定一个子组件自定义的属性
<users v-bind:users = "users"></users>
- 子组件添加
props
获取自定义属性名
//props:["users"], //获取自定义属性名
props:{ //标准写法
users:{
type:Array, //说明users中传入的值的类型
required:true
}
},
- 在
<template>/<style>
中写入对应的样式、html模板
传值和传引用
属性传值,一般传的有两个东西,传值和传引用;传引用大多为传数组或对象;传值一般传的为字符串、数值、布尔值等
-
传值:
string
、number
、boolean
-
引用:
array
、object
- 传引用,当改变一个地方的数据,另外引用了这个数据的地方也会发生改变
事件传值(子传父)
在子组件中通过方法写入内容,传给父组件,更改父组件的内容
子组件中
$emit()
methods:{
changeTitle:function(){
this.$emit("titleChanged","子向父组件传值");
}
}
父组件中
在template
中找到对应子组件的标签,添加点击事件v-on
,点击触发子组件函数
<app-header v-on:titleChanged = "updateTitle($event)" v-bind:title = "title"></app-header>
export default {
name: 'App',
data(){
return{
title:"传值跟传引用的区别"
}
},
methods:{
updateTitle(title){
this.title = title; //第一个`title`对应父组件`data`中的,第二个为函数的参数`title`
}
}
生命周期钩子
export default{
beforeCreate:function(){
alert("组件实例化之前执行的函数");
},
created:function(){
alert("组件实例化完毕,但页面还未显示");
},
beforeMount:function(){
alert("组件挂载前,页面仍未显示,但虚拟dom已经配置");
},
mounted:function(){
alert("组件挂载前,此方法执行后,页面显示");
},
beforeUpdate:function(){
alert("组件更新前,页面仍未更新,但虚拟dom已经配置");
},
updated:function(){
alert("组件更新,此方法执行后,页面显示");
},
beforeDestroy:function(){
alert("组件销毁前");
},
destroy:function(){
alert("组件销毁");
}
}
路由和请求
1.路由
- 在
main.js
中引入路由模块
import VueRouter from 'vue-router' //引入路由模块
- 使用路由模块
Vue.use(VueRouter)
- 配置路由
const router = new VueRouter({ //传递对象
routes:[
{path:"/",component:Home}, ,//调用路由地址,Home为父组件
{path:"/helloworld",component:HelloWorld}
],
mode:"history" //去掉网页地址后面的'#/'
})
new Vue({
router,
})
- 在根组件下链接路由地址
<template>
<div id="app">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/helloworld">HelloWorld</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
- 在
main.js
中引入需要用到的子组件
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'
2.请求
通过VueResource
,请求外部资源链接地址,使用里面的资源数据
- 在
main.js
中引入VueResource
import VueResource from 'vue-resource'
Vue.use(VueResource)
- 在父组件中引入链接
export default {
name: 'Home',
data(){
return{
users:[
]
}
},
created() {
this.$http.get("http://jsonplaceholder.typicode.com/users") //请求地址
.then((data) => { //请求成功会通过'then'返回数据
// console.log(data); //打印获取的数据
this.users = data.body;
})
}
}