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中使用到的,用于组件中定时任务的清除。
模板写法
例子
{{ message }}
绑定内容到html属性中
例子
双向绑定
例子
以html的形式在标签内部渲染内容
例子
是否显示dom
例子
是否渲染dom
需要注意v-else永远跟随前面一个v-if,并且不提供else if功能
例子
列表渲染
例子
事件绑定 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: {
// 限制类型
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', ...参数)
是模板代码书写位置,写法和html完全相同
当使用模块化开发时,此处代码放到文件中的标签中
插槽:
子组件中需要的地方加入
即可在加入的位置渲染父组件调用子组件时在组件标签中写入的内容。
这里并不像之前的实列化Vue
一样是一个对象,组件中的data
必须一个函数,每个实列化的组件单独维护一份被返回对象,因此我们可以再同一个页面中多次引入一个相同的组件而不会相互影响
以下是一个简单的监听器代码结构:
watch: {
xxx(newValue, oldValue) {}
}
也可以这么写:
watch: {
xxx: {
// 是数据改变时触发的函数
handler(newValue, oldValue) {}
}
}
xxx
是要监听的属性名称,如需监听对象中的某个属性写法为 'obj.xxx'
字符串,如下:
watch: {
'obj.xxx': {
// 是数据改变时触发的函数
handler(newValue, oldValue) {}
}
}
函数代码位置,函数中的this指向当前实列对象,因此可以再函数中通过this.xxx
获取所有当前组件中的内容
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>
点击下载步骤 1-7 配置完成的完整 Demo