VUE常用语法

1. 子组件调用父组件方法

1.1 子组件使用this.$parent.event

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件：

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <child></child>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: { child },
    methods: {
      fatherMethod() { console.log('测试'); }
    }
  };
</script>

子组件：

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <button @click="childMethod()">点击</button>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

1.2 子组件使用$emit

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

$emit也可以在子组件的html中使用。

父组件：

1
2
3
4
5
6
7
8
9
10
<template>
  <child @fatherMethod="fatherMethod"></child>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: { child },
    methods: { fatherMethod() { console.log('测试'); } }
  };
</script>

子组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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 方法当属性传入子组件直接使用

第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

父组件：

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <child :fatherMethod="fatherMethod"></child>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: { child },
    methods: {
      fatherMethod() { console.log('测试'); }
    }
  };
</script>

子组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    <button @click="childMethod()">点击</button>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) { this.fatherMethod(); }
      }
    }
  };
</script>

2. 父组件调用子组件方法

父组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

子组件：

1
2
3
4
5
6
7
8
9
10
11
12
<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 则是被迭代的数组元素的别名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。

1
2
3
4
5
6
7
8
9
10
11
12
<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中引入：

1
2
3
<script>
import "@/assets/css/reset.css"
</script>

2、在.vue文件中的style中引入：

1
2
3
4
<style src="./download.scss"  lang="scss" scoped>
<style scoped>
  //新的css样式
</style>

注意：lang="scss" 是为了告诉vue CSS文件的语言格式。这种方式的引入，scoped会生效。

或者在.vue文件中的style中使用@import方式引入：

1
2
3
<style scoped>
@import '../../assets/css/VueCss.css';
</style>

使用@import引入样式文件，就算加scoped，其它没有引入的模块还是可以访问到你的样式，如果某个组件的类名一致，则就会被污染到

3、在main.js 全局引入

1
import './assets/css/common.css'

5. vue中添加回车等按键监听事件

1、直接绑定事件：

1
2
3
4
5
<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

1
<inputComponent type=“text” v-on:keyup.enter.native="search">

2、绑定按键事件，然后通过按键值判断：

1
2
3
4
@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

1
2
3
4
5
6
7
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 记录：

1
2
3
4
5
this.$router.replace("/home");
this.$router.replace({
  path: 'home',
  query: { name: 'jack', code: '1' }
})

3、this.$router.go：这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步。参数为 0 时会重新加载页面，但会有短暂白屏：

1
this.$router.go(-2); // 回退两个页面

4、this.$router.back:在 history 记录中，返回上一页。

5、this.$router.forward：在 history 记录中，前往下一页。

6.2 vue-router在新窗口打开页面

vue2.0以后，需要使用this.$router.resolve,如下：

1
2
let routeData = this.$router.resolve({ path:'/home'});
window.open(routeData.href, '_blank'); //打开新标签

6.3 route获取URL参数

路由组件配置：

1
2
3
4
5
6
7
import PageB from '@/pages/PageB'
{
  path: '/b',
  // path: '/b?name=:name',// 或者这种的形式
  name: 'PageB',
  component: PageB
}

6.3.1 router-link标签中参数的获取：

1
2
3
4
5
6
<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>
1
2
this.$route.query // {name: '张三', id: '1234'}
this.$route.params // {name: '张三'}

注意：

1、query方式传参，参数会拼接在URL链接中。

2、params方式配置路由参数时只能写路由名（name），不能写路径（path），这种方式的参数会拼接在URL后面

6.3.2 this.$router.push传参的获取

1
2
3
4
5
6
7
8
9
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语句

1
2
3
4
5
6
7
8
9
<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共存

1
2
3
4
5
6
7
<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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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列表：

1
2
3
4
5
6
7
<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才会被应用）

1
2
3
4
5
6
7
8
9
10
11
<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有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法：

1
2
3
4
5
6
7
<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三种方法，以计算属性为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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，样式规则会直接应用到这个组件的根元素上，例如声明一个简单的组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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点击事件使用事件代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>