[TOC]
VUE常用语法
1. 子组件调用父组件方法
1.1 子组件使用this.$parent.event
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法
父组件：
<template>
<child></child>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: { child },
methods: {
fatherMethod() { console.log('测试'); }
}
};
</script>
子组件：
<template>
<button @click="childMethod()">点击</button>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};
</script>
1.2 子组件使用$emit
第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
$emit也可以在子组件的html中使用。
父组件：
<template>
<child @fatherMethod="fatherMethod"></child>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: { child },
methods: { fatherMethod() { console.log('测试'); } }
};
</script>
子组件：
<template>
<div>
<button @click="childMethod()">点击</button>
<button @click="$emit('fatherMethod')")>也可以直接在html中使用</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() { this.$emit('fatherMethod'); }
}
};
</script>
1.3 方法当属性传入子组件直接使用
第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法
父组件：
<template>
<child :fatherMethod="fatherMethod"></child>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: { child },
methods: {
fatherMethod() { console.log('测试'); }
}
};
</script>
子组件：
<template>
<button @click="childMethod()">点击</button>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
methods: {
childMethod() {
if (this.fatherMethod) { this.fatherMethod(); }
}
}
};
</script>
2. 父组件调用子组件方法
父组件：
<template>
<div>
<button @click="clickParent">点击</button>
<child ref="mychild"></child>
</div>
</template>
<script>
import Child from './child';
export default {
name: "parent",
components: { child: Child },
methods: {
clickParent() {
this.$refs.mychild.parentHandleclick("嘿嘿嘿");
}
}
}
</script>
子组件：
<template>
<div> child </div>
</template>
<script>
export default {
name: "child",
methods: {
parentHandleclick(e) { console.log(e) }
}
}
</script>
3. html中模板里面相关语法
3.1 v-for批量渲染
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<template>
<div>
<li v-for="(item, index) in items" :key="item.message">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
};
}
};
</script>
3.2 条件渲染
根据表达式的值的真假来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
D
</div>
4. vue中引入单独CSS文件
1、在对应.vue文件的script中引入：
<script>
import "@/assets/css/reset.css"
</script>
2、在.vue文件中的style中引入：
<style src="./download.scss" lang="scss" scoped>
<style scoped>
//新的css样式
</style>
注意：lang="scss" 是为了告诉vue CSS文件的语言格式。这种方式的引入，scoped会生效。
或者在.vue文件中的style中使用@import方式引入：
<style scoped>
@import '../../assets/css/VueCss.css';
</style>
使用@import引入样式文件，就算加scoped，其它没有引入的模块还是可以访问到你的样式，如果某个组件的类名一致，则就会被污染到
3、在main.js 全局引入
import './assets/css/common.css'
5. vue中添加回车等按键监听事件
1、直接绑定事件：
<input type=“text” @keyup.enter=“show()”><!-- 回车执行 -->
<input type=“text” @keydown.up=‘show()’ ><!-- 上键执行 -->
<input type=“text” @keydown.down=‘show()’ ><!-- 下键执行 -->
<input type=“text” @keydown.left=‘show()’ ><!-- 左键执行 -->
<input type=“text” @keydown.right=‘show()’ ><!-- 右键执行 -->
注意！！！如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native
<inputComponent type=“text” v-on:keyup.enter.native="search">
2、绑定按键事件，然后通过按键值判断：
@keydown=‘show()’ 当然我们传个$event 也可以在函数中获 ev.keyCode
if(ev.keyCode==13){
alert(‘你按了回车键！’)
}
6. vue中路由route使用
1、$router：路由操作对象 ，只写对象。
2、$route：路由信息对象，只读对象。
3、无论是 router-link 标签，还是 $router.push 方式。用 query 参数配置的，就用 this.$route.query 获取；用 params 参数配置的，就用 this.$route.params 获取。
4、router-link 中 params 配置的无法使用url路径（path），$router.push 中 params 配置的可以使用url路径（path）。
6.1 vue页面跳转5中方式
1、this.$router.push:这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL
this.$router.push("/home");
this.$router.push({
path: 'home',
query: { name: 'jack', code: '1' }, // 从 URL 的 search 部分提取的已解码查询参数的字典
params: { username: 'posva' }, // 从 path 中提取的已解码参数字典
hash: '#bio', // 已解码 URL 的 hash 部分。总是以 #开头。如果 URL 中没有 hash，则为空字符串。
})
2、this.$router.replace：它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录：
this.$router.replace("/home");
this.$router.replace({
path: 'home',
query: { name: 'jack', code: '1' }
})
3、this.$router.go：这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步。参数为 0 时会重新加载页面，但会有短暂白屏：
this.$router.go(-2); // 回退两个页面
4、this.$router.back:在 history 记录中，返回上一页。
5、this.$router.forward：在 history 记录中，前往下一页。
6.2 vue-router在新窗口打开页面
vue2.0以后，需要使用this.$router.resolve,如下：
let routeData = this.$router.resolve({ path:'/home'});
window.open(routeData.href, '_blank'); //打开新标签
6.3 route获取URL参数
路由组件配置：
import PageB from '@/pages/PageB'
{
path: '/b',
// path: '/b?name=:name',// 或者这种的形式
name: 'PageB',
component: PageB
}
6.3.1 router-link标签中参数的获取：
<router-link :to="'/b?name=张三&id=1234'">路由测试</router-link>
<router-link :to="{ name:'PageB',query:{name :'张三'} }">测试</router-link>
或者
<router-link :to="{ path:'/b',query:{name :'张三'} }">路由</router-link>
<router-link :to="{ name:'PageB',params:{name :'张三'} }">路由测试</router-link>
this.$route.query // {name: '张三', id: '1234'}
this.$route.params // {name: '张三'}
注意：
1、query方式传参，参数会拼接在URL链接中。
2、params方式配置路由参数时只能写路由名（name），不能写路径（path），这种方式的参数会拼接在URL后面
6.3.2 this.$router.push传参的获取
this.$router.push({
name: 'PageB',
query: { id: 123, name: '李四' },
params: { id: 123, name: '李四' }
})
// 获取
this.$route.query // {name: '李四', id: '123'}
this.$route.params // {name: '李四', id: '123'}
注意：
1、query方式传参，参数会拼接在URL链接中。
2、params方式传参的，参数不会出现在URL链接中。
7. 根据条件动态添加CSS类名样式
:class是v-bind:class的简写
7.1 :class使用JS语句
<div id="app"> <div :class="true && 'aaa' || 'bbb'"></div> </div>
<div id="app"> <div :class="false && 'aaa' || 'bbb'"></div> </div>
<div id="app"> <div :class="isActive === true ? 'aaa' : 'bbb'"></div> </div>
<script>
var app = new Vue({
el:'#app',
data:{ isActive:true, isError:false }
})
</script>
第一个结果：<div class="aaa"></div>
第二个结果：<div class="bbb"></div>
第三个结果：<div class="aaa"></div>
7.2 :class绑定JS对象
对象中也可存在多个属性，动态切换class，:class 可以跟class共存
<div id="app"> <div class="static" :class="{'active':isActive,'error':isError}"></div> </div>
<script>
var app = new Vue({
el:'#app',
data:{ isActive:true, isError:false }
})
</script>
最终渲染结果：<div class="static active"></div>
当:class的表达式过长或逻辑复杂时，可以绑定一个计算属性，一般当条件多于两个时，都可以使用data或者computed：
<div id="app"> <div :class="classes"></div> </div>
<script>
var app = new Vue({
el:'#app',
computed:{
classes(){
return {
active:this.isActive && !this.error,
'text-fail':this.error && this.error.type ==='fail'
}
}
}
})
</script>
7.3 :class绑定数组
1、当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表：
<div id="app"> <div :class="[atvieCls,errorCls]"></div> </div>
<script>
var app = new Vue({
el:'#app',
data:{ atvieCls:'active', errorCls:'error' }
})
</script>
最后渲染的结果：<div class="active error"></div>
2、使用三元表达式，根据条件切换class（当数据isActive为真时，样式active才会被应用）
<div id="app"> <div :class="[isActive ? activeCls : '',errorCls]"></div> </div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
atvieCls:'active',
errorCls:'error'
}
})
</script>
渲染的结果为：<div class="active error"></div>
3、class有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法：
<div id="app"> <div :class="[{'active':isActive},errorCls]"></div> </div>
<script>
var app = new Vue({
el:'#app',
data:{ isActive:true, errorCls:'error' }
})
</script>
渲染的结果为：<div class="active error"></div>
4、与对象语法一样，也可以使用data、computed、method三种方法，以计算属性为例：
<div id="app"> <button :class="classes"></button> </div>
<script>
var app = new Vue({
el: '#app',
data: { size: 'large', disabled: true },
computed: {
classes: function () {
return [
'btn',
{
['btn-'+this.size]: this.size!=='',
['btn-disabled']: this.disabled,
}
]
}
}
})
</script>
最后渲染结果：<div class="btn btn-large btn-disabled"></div>
7.4 在组件上动态绑定:class
如果直接在自定义组件上使用class或:class，样式规则会直接应用到这个组件的根元素上，例如声明一个简单的组件：
<script>
Vue.component('my-component', {
template: '<p class="article">一些文本</p>'
})
</script>
<div id="app">
<my-component :class="'active':isActive"></my-component>
</div>
<script>
var app = new Vue({
el: '#app',
data: { isActive: true }
})
</script>
最终组件渲染后的结果为：<p class="article active">一些文本</p>
8. vue中dom点击事件使用事件代理
<div id="app" @click="handleClick">
<span data-key="1">1</span>
<span data-key="2">2</span>
<span data-key="3">3</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: { isActive: 1 }
methods: {
handleClick(el) {
const key = el.target.getAttribute('data-key');
this.isActive = key;
}
}
})
</script>