安装脚手架
- 安装node.js
- 安装淘宝镜像
npm config set registry https://registry.npm.taobao.org
- 安装脚手架
npm install -g @vue/cli
使用
vue create 项目名
- 上下加空格和回车
- 按n选择hash模式路由
- 选Standard config
- 都选第一个
- 最后选n不保存模板
项目结构
C.分析Vue脚手架生成的项目结构
node_modules:依赖包目录
public:静态资源目录
src:源码目录
src/assets:资源目录
src/components:组件目录
src/views:视图组件目录
src/App.vue:根组件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js:
2.X搭建脚手架
npm install -g @vue/cli-init
初始化vue init webpack vueplay
- 回车默认名字
- ? Project name vueplay
? Project description Vue基础
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No cd vueplay
npm run dev
main.js
- index.html —> main.js —> App.vue
- 入口文件找到main.js,执行vue实例化对象,找到app.vue。如果模板有内容,就会插入到index.html容器中。
new Vue({
el: '#app',//对应index.html
components: { App },
template: '<App/>'
})
App.vue
- 模板
- tmplate防止dom渲染
- 只能有一个根标签
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
- 行为
- components注册,import第一部分的helloworld
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
- 样式
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
CSS作用域
- scoped:sytle只在自己里面用,会加自己的作用域。
属性传值
- 可以把子组件的一部分给父组件,然后每一个子组件都可以用父组件内容了。
//父亲里
<div id="app">
<app-header></app-header>
<users v-bind:users="users"></users>
<app-footer></app-footer>
</div>
//儿子接收有俩种方法
name: 'users',
// props:["users"],
props:{
users:{
type:Array,
required:true
}
},
传值和传引用
- 值:数字字符串布尔 string number boolean
- 引用:数组和对象 array、object。
- 引用类型一个属性变化,父亲儿子都会变化。
子像父组件传值
- 首先点击之后,触发方法。
- $emit表示向父亲找
v-on:titleChanged='updatedTitle($event)
表示绑定了子组件事件- 执行app的methods
- v-bind绑定的是儿子传的值,
子向父组件传值
//Header
<header v-on:click='changTitle'></header>
methods:{
changeTitle:function(){
this.$emit('titleChanged','子向父组件传值');
}
}
//Vue
<app-header v-on:titleChanged='updatedTitle($event)' v-bind:title='title'></app-header>
methods:{
updateTitle(title){
this.title=title;
}
}
路由:
- 安装路由:
npm install vue-router --save-dev
- 重启项目:
npm run dev
http请求
- 安装:
npm install vue-resource --save-dev
- 启动:npm run dev
- 网站:
http://jsonplaceholder.typicode.com/users
- home.vue: 请求网络的数据
created(){
this.$http.get("http://jsonplaceholder.typicode.com/users")
.then((data)=>{//请求成功,成功数据传给data
// console.log(data);
this.users=data.body;
})
}