分五步
1.安装
2.生命周期函数
3.属性与事件绑定
4.组件之间传值
5.异步请求
学会了这五个，基本上可以开发页面了，至于其他知识点，可在开发过程中逐渐了解。
1.安装（3分钟）
我这边使用官方提供的cli工具安装，设置了国内淘宝镜像，大约3分钟
node8.0.0
$ npm install --global vue-cli
$ vue init webpack my-project
多次回车
$ cd my-project
（依赖已经安装完毕，不用npm install）
$ npm run dev
打开浏览器localhost:8080就可以看见页面。
2.了解一下生命周期函数（3分钟）
在App.vue文件
写下面的代码，看看浏览器控制台
<template>
<div>
生命周期 {{ message }}
</div>
</template>
<script>
export default {
name: 'Life',
components: {
},
data () {
return {
message: 'Hello Vue!',
}
},
computed: {
},
methods: {
},
beforeCreate: function () {
console.log('beforeCreated')
},
created: function () {
console.log('created')
},
beforeMount () {
console.log('beforeMounted')
},
mounted () {
console.log('mounted')
},
beforeUpdate () {
console.log('beforeUpdated')
},
updated () {
console.log('updated')
},
beforeDestroy () {
console.log('beforeDestroy')
},
destroyed () {
console.log('destroyed')
},
}
</script>
3.属性与事件绑定（10分钟）
在App.vue文件
写下面的代码，看看页面
<template>
<div>
属性 {{ message }}
<button v-on:click="reverseMessage">绑定事件</button>
<button @click="reverseMessage">绑定事件：简写</button>
<div v-html="html"></div>
<button v-bind:disabled="isButtonDisabled">绑定属性</button>
<button :disabled="isButtonDisabled">绑定属性：简写</button>
<div v-bind:id="'list-' + id">绑定id属性，通过表达式</div>
<div class="static"
v-bind:class="{ active: isActive }">绑定class</div>
<div class="static"
v-bind:class="classObject">绑定class对象</div>
<div v-if="ok">
<h1>v-if</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<div v-if="type === 'A'">
v-if-else A
</div>
<div v-else-if="type === 'B'">
v-if-else B
</div>
<div v-else-if="type === 'C'">
v-if-else C
</div>
<div v-else>
Not A/B/C
</div>
<div>v-for list</div>
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<div>v-for object</div>
<ul id="example-2">
<li v-for="item in items1">
{{ item }}
</li>
</ul>
<ul id="example-3">
<li v-for="(value, key,index) in items1">
{{ index }}.{{ key }}: {{ value }}
</li>
</ul>
<button @click="getHomeInfo('hi',$event)">事件传值</button>
<div>阻止事件冒泡</div>
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="getHomeInfo">阻止事件冒泡</a>
<!-- Ctrl + Click -->
<div @click.ctrl="getHomeInfo"> Ctrl + Click </div>
<div>表单双向绑定</div>
<input v-model="message1" placeholder="edit me">
<p>Message1 is: {{ message1 }}</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
</template>
<script>
export default {
name: 'Attr',
components: {},
data() {
return {
checked:true,
items1: {
firstName: 'John',
lastName: 'Doe',
age: 30
},
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
type:'B',
ok:true,
id: "id",
classObject: {
active: true,
'text-danger': false
},
isActive: true,
message: '测试',
message1: '测试',
html: '<div>直接注入html</div>',
isButtonDisabled: true,
}
},
methods: {
getHomeInfo(mes,$event) {
alert(mes)
alert($event)
},
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
},
}
</script>
4.组件之间传值
在App.vue文件
写下面的代码，看看页面（10分钟）
<template>
<div>
组件传递 {{ message }}
<button v-on:click="reverseMessage">逆转消息</button>
<div>自定义组件</div>
<child></child>
<child></child>
<child></child>
<hr/>
<div>父-->子组件传值</div>
<child-message
my-message="父组件传递"
:message="messageForChild"
></child-message>
<hr/>
<div>子-->父消息传递</div>
<div>在父组件中监听子组件发送过来的事件</div>
<p>这个是父组件{{ total }}</p>
<child-event
my-message="第一个子组件"
:message="messageForChild"
v-on:increment="incrementTotal"
></child-event>
<child-event
my-message="第二个子组件"
:message="messageForChild"
v-on:increment="incrementTotal"
></child-event>
</div>
</template>
<script>
var Child = {
template: '<div>A custom component! child' +
'<div>' +
'<p v-on:click="counter += 1">{{ counter }}</p>' +
'</div>' +
'</div>',
data: function () {
return {
counter: 0
}
}
}
var ChildMessage = {
template: '<div>' +
'<div>' +
'{{ message }}' +
'</div>' +
'<div>' +
'{{ myMessage }}' +
'</div>' +
'</div>',
props: ['message', 'myMessage'],
}
var ChildEvent = {
template: '<div>' +
'<button v-on:click="incrementCounter">{{ message }}{{ counter }}</button>' +
'<div>' +
'{{ myMessage }}' +
'</div>' +
'</div>',
data: function () {
return {
counter: 0
}
},
methods: {
//在子组件定义事件然后 $emit 出自定义事件
incrementCounter: function () {
this.counter += 1
this.$emit('increment')
}
},
props: ['message', 'myMessage'],
}
export default {
name: 'Test',
components: {
Child,
ChildMessage,
ChildEvent
},
data() {
return {
messageForChild: "父组件传递值绑定",
message: 'Hello Vue!',
total: 0
}
},
computed: {},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
},
incrementTotal: function () {
this.total += 1
}
},
}
</script>
5.异步请求（3分钟）
先安装一个异步请求模块
npm install --save axios
然后看如下代码
<template>
<div>
异步请求 {{ message }}
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Ajax',
components: {
},
data () {
return {
message: 'Hello Vue!',
}
},
computed: {
},
methods: {
getInfo () {
/*
配置文件config/index.js
默认请求跟路径是当前host，可以设置代理
比如：api代理目录 /static/mock
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:8080',
pathRewrite:{
'^/api':'/static/mock'
}
}
},
*/
axios.get('/api/index')
.then(this.getInfoSucc)
.catch(this.err)
},
getInfoSucc (res) {
res = res.data;
//请求结果
console.log(res)
this.message = "请求结果";
},
err(err){
//请求错误
console.log(err.response)
}
},
mounted () {
this.getInfo()
},
}
</script>
了解了这些，记住它，然后写简单的页面，没有问题了
至于打包，尝试一下
npm run build
打包完成在dist目录下
猜你喜欢
联络方式：
深圳 · 龙岗 · 大运软件小镇22栋201
电话：400 182 8580
邮箱：szhulian@qq.com
