搭建脚手架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;
})
}
}