Vue2入门 从0到1
Vue2.x 基础代码使用说明以及提供一个开箱即用的demo用于练习
安装
开箱即用（学习推荐，最好上手）
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue@2">script>
开始使用
创建一个Vue实列
var App = new Vue({
el: '#app', // 实列化dom的选择器
components: {}, // 组件注册
data: {}, // 数据
methods: {} // 函数
})
生命周期
总共分为8个阶段：创建前/后,挂载前/后,更新前/后,销毁前/销毁后。
挂载
beforeCreate（创建前）created（创建后）beforeMount（挂载前）mounted（挂载后）
更新（元素或组件的变更操作）
beforeUpdate（更新前）updated（更新后）
销毁（销毁相关属性）
beforeDestroy（销毁前）destroyed（销毁后）
以上生命周期常用的最常用的是mounted（挂载后） 前置数据的获取处理在这里，因载入前dom并没有渲染到页面上，我们需要操作dom时会获取到undefined。
其次是destroyed（销毁后）是saas中使用到的，用于组件中定时任务的清除。
数据绑定与渲染
1.{{xxx}}
模板写法
例子 {{ message }}
2.v-bind:xxx
绑定内容到html属性中
例子
简写
3.v-model
双向绑定
例子
4.v-html
以html的形式在标签内部渲染内容
例子
5.v-show
是否显示dom
例子
6.v-if，v-else
是否渲染dom
需要注意v-else永远跟随前面一个v-if，并且不提供else if功能
例子
7.v-for
列表渲染
例子
事件处理
事件绑定 v-on:xxx
例子
简写
事件绑定分为带括号和不带括号，是否有括号对事件的影响是不同的，如下
当参数传入对象时，会因为接收方式的不同改变参数格式，如下
funcDemoObj1(obj){}接收整个对象
funcDemoObj2({a, b, d = 4}){}只接收对象中的a和b，并声明一个包含默认值的属性
有意思的是时间函数不管是否传入
$event在函数中都可以通过event获取事件对象
组件注册
全局注册
Vue.component('component-a', { /* ... */ })
局部注册
定义组件 var ComponentA = { /* ... */ }
然后在 components 选项中定义你想要使用的组件,如：components: { ComponentA }
Html中引入 或者 在模块化开发中当组件不使用插槽时可直接作为自合闭标签来使用如 或者 。
其中全大写的写法，只能在模块化开发中使用，同时也推荐在模块化开发中使用，以便于我们能快速查找代码位置与区分组件的来源。现在项目中，我们自己封装或者二次封装的组件就是使用的这种风格。
自定义组件
以下是一个公共基础组件代码的声明
Vue.component('component-a', {
props: ['title'],
template: 'A Num：{{clickNum}} ------ {{title}}
',
data () {
return {
clickNum: 0
}
},
watch: {
clickNum: {
handler(newV, oldV) {}
}
},
// ...生命周期
methods: {
func() {
this.clickNum++
this.$emit('callback', '组件A参数1', '组件A参数2')
}
}
})
在父组件中使用
Props
父组件通过props向子组件传递数据 父组件中写法
上面的基础组件代码中的写法是一个基础写法，只包含了参数名称
更加复杂严谨的写法如下：
props: {
// 限制类型
a: Number,
// 多个可能类型
b: [String, Number],
// 必填
c: {
type: String,
required: true
},
// 带有默认值
d: {
type: Number,
default: 100
},
// 对象默认值
e: {
type: Object,
default() {
return { message: 'hello' }
}
}
}
其中必填和默认值这两项不需要同时存在选择其一即可
Props是单向数据流绑定，子组件中通过$emit调用父组件暴露给子组件的函数进行参数传递修改。代码如下：
父组件暴露函数给子组件：
子组件调用：
this.$emit('xxx')
this.$emit('xxx', ...参数)
Template
是模板代码书写位置，写法和html完全相同
当使用模块化开发时，此处代码放到文件中的标签中
子组件中需要的地方加入
Data
这里并不像之前的实列化Vue一样是一个对象，组件中的data必须一个函数，每个实列化的组件单独维护一份被返回对象，因此我们可以再同一个页面中多次引入一个相同的组件而不会相互影响
Watch
以下是一个简单的监听器代码结构：
watch: {
xxx(newValue, oldValue) {}
}
也可以这么写：
watch: {
xxx: {
// 是数据改变时触发的函数
handler(newValue, oldValue) {}
}
}
xxx是要监听的属性名称，如需监听对象中的某个属性写法为 'obj.xxx'字符串,如下：
watch: {
'obj.xxx': {
// 是数据改变时触发的函数
handler(newValue, oldValue) {}
}
}
Methods
函数代码位置，函数中的this指向当前实列对象，因此可以再函数中通过this.xxx获取所有当前组件中的内容
以下是包含上述内容的dome
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<h3>{{ message }}h3>
<input v-model="message" @change="funcDemo('change', message)" @focus="funcDemo('focus', message)">
<h3 :class="color">颜色h3>
<div>
<button v-on:click="changeColor">切换颜色button>
<br /><br />
<button @click="funcDemo">无括号button>
<button @click="funcDemo($event)">传入事件对象button>
<button @click="funcDemo('arg1')">传参1button>
<button @click="funcDemo('arg1', 'arg2')">传参2button>
<button @click="funcDemoObj1({a:1,b:2,c:3})">传入对象button>
<button @click="funcDemoObj2({a:1,b:2,c:3})">传入对象 解构赋值button>
<br /><br />
div>
<h3 v-html="html">h3>
<ul>
<li v-for="(item, index) in list" :key="item">no:{{index}} val:{{item}}li>
ul>
<component-a title="组件1" @callback="funcDemo">插槽区域提示的内容component-a>
<component-a title="组件2">component-a>
<component-b :a="3" b="字符串或者数字" c="必填项" d="改变默认值" :e="{message: '改变对象默认message的值'}">component-b>
div>
body>
html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
Vue.component('component-a', {
props: ['title'],
template: 'A Num：{{clickNum}} ------ {{title}}
',
data () {
return {
clickNum: 0,
}
},
watch: {
clickNum: {
handler(newV, oldV) {
console.log('clickNum oldV', oldV, 'clickNum newV', newV)
}
}
},
methods: {
func() {
this.clickNum++
this.$emit('callback', '组件A参数1', '组件A参数2')
}
}
})
var ComponentB = {
props: {
// 限制类型
a: Number,
// 多个可能类型
b: [String, Number],
// 必填
c: {
type: String,
required: true
},
// 带有默认值
d: {
type: String,
default: '默认值'
},
// 对象默认值
e: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default() {
return { message: '对象中message' }
}
},
},
template: `
A：{{a}}
B：{{b}}
C：{{c}}
D：{{d}}
E：{{e.message}}
`,
data() {
return {}
}
}
var App = new Vue({
el: '#app',
components: {ComponentB},
data: {
color: 'red',
message: 'Hello Vue!',
html: '这是一端蓝色文字的html渲染',
list: ['a','b','c']
},
mounted() {
console.log('mounted...')
},
methods: {
changeColor() {
if (this.color == 'blue') {
this.color = 'red'
} else {
this.color = 'blue'
}
},
funcDemo(arg1, arg2 = '默认的值2') {
console.log('参数1', arg1, '参数2', arg2)
},
funcDemoObj1(obj) {
console.log('参数', obj)
},
funcDemoObj2({a, b, d = 4}) {
console.log('参数a', a ,'参数b', b, '参数d', d)
}
}
})
script>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
style>
框架搭建整体流程
- 第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架
- 第二步 Vue2 vue.config.js 基础配置，路径别名alias
- 第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局变量
- 第四步 Vue2 配置ESLint
- 第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩
- 第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui
- 第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin
点击下载步骤 1-7 配置完成的完整 Demo