本专栏将从基础开始，循序渐进的讲解Vue的基本概念以及使用，希望大家都能够从中有所收获，也请大家多多支持。
专栏地址: Vue专栏
相关软件地址: 相关安装包地址
如果文章知识点有错误的地方，请指正！大家一起学习，一起进步。

1. Vue基础

1.1 基本指令

1.1.1 Vue的变量

Vue的变量用双花括号表示{{}},并且只能存放单行语句

例如不能使用如下语句:
 {{ if(true){'YES'}}}
正确的使用示例如下:
<!--    字符串-->
    {{"哈哈"}}
<!--    数字-->
    {{1 + 1}}
<!--    三目运算法-->
    {{ 1 + 1 > 2 ? "YES" : "NO"}}
<!--    函数-->
    {{"hello".split('').reverse().join('')}}
<!--    使用变量-->
    {{msg}}
1
2
3
4
5
6
7
8
9
10
11
12
13

1.1.2 v-once

<!--    v-once只能渲染一次-->
<!--    当msg变化不会被渲染-->
    <p v-once>{{msg}}</p>
1
2
3

1.1.3 v-html

<div v-html = "hello"></div>
1

1.1.4 v-bind(简写为:)

解析属性中的对象,把某一个属性和成员变量绑定,只要是在标签中的属性,v-bind都可以绑定

如下图所示：

注意:

v-bind的简写为':'

v-bind中也可以组合

<div :class="divClass + '-1'">容器1</div>
1

1.1.5 v-if条件渲染

v-if的条件渲染如下图所示：

1.1.6 v-show条件渲染

注意

​ v-show和v-if的区别在于,v-if只有当第一次满足条件的时候才会渲染,涉及到组件的销毁重建,而v-show只要属性是true就会渲染,因此,如果需要非常频繁的切换,使用v-show,如果条件很少改变,则使用v-if较好。

1.1.7 v-for列表循环

v-for的使用示例如下

<ul>
	<!--        直接遍历list,list中每一个参数是字符串-->
        <li v-for="name in names" :key="name"> {{name}} </li>
        <!--遍历list,最后一个参数为索引,list中每一个参数是字符串-->
        <li v-for="(name,index)  in names" :key="index"> {{name}} </li>
        <!--遍历list,list中每一个参数是一个对象-->
        <li v-for="item in names2" :key="item"> {{item.name + ' ' + item.age}} </li>
        <!--遍历list,,最后一个参数为索引,item是list中的对象-->
        <li v-for="(item,index)  in names2" :key="index"> {{index + ' ' + item.name + ' ' + item.age}} </li>
	<!--        取出names2中每一个对象-->
        <li v-for="item in names2" :key="item">
	<!--遍历对象,第一个参数是值,第二个参数是键,第三个参数是索引,只能使用在对象上,不能在list上使用-->
		<div class="liofli" v-for = "(value,key,index) in item" :key="index">{{ index+ '-' + key + '-' + value }}</div>
        </li>
</ul>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },

  data(){
    return{
      names:["name1","name2","name3"],
      names2:[
        {
          name:"name1",
          age:20
        },
        {
          name:"name1",
          age:20
        }
      ]
    }
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

效果如下图所示:

1.2 事件处理

1.2.1 v-on(简写为@)

1.2.1.1 无参事件

​ 无参事件的案例如下，当事件改变data数据会引起视图的变化。

<!--事件处理-->
<template>
  <div class="HelloWorldStyle">
    <div v-if="flag">true</div>
    <div v-else>false</div>
      <button type="button" name="button" v-on:click = clickHandler>按钮</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      flag:true,
    }
  },
  methods:{
    clickHandler(){
      //改变data中的数据\
      this.flag = !this.flag
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

1.2.1.2 传参事件

传参事件的案例如下

<!--事件处理-->
<template>
  <div class="HelloWorldStyle">
    <div v-if="flag">true</div>
    <div v-else>false</div>
    <!--template begin-->
      <button type="button" name="button" v-on:click = "clickHandler('hello1','hello2')">按钮</button>
    <!--template end-->
    <!--template begin-->

    <!--template end-->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      flag:true,
    }
  },
  methods:{
    clickHandler(data1,data2){
      //改变data中的数据\
      this.flag = !this.flag
      console.log(data1)
      console.log(data2)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

1.2.1.3 数组更新检测

​ 未改变原数组的方法不能引起页面的变化,例如concat,filter返回的是一个新数组

addItem(){
      this.helloArr.push('he')
      this.helloArr.unshift('hb')
      //未改变原数组的方法不能引起页面的变化,例如concat,filter返回的是一个新数组,但可以通过给原数组赋值的方式更新页面
      this.helloArr.concat(['hh'])
    }
1
2
3
4
5
6

1.3 计算属性

为了防止太乱,新建立一个vue组件

编写组件CalcDemo.vue

<template>
  <div class="">
    vuedemo
  </div>
</template>

<script>
export default {
  name: "ClacDemo",
  data(){
    return{

    }
  }
}
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

修改App.vue显示新组件

为了防止重复计算,定义计算属性:

<template>
  <div>
    {{getMsg}}
    {{getMsg}}
    {{getMsg}}
  </div>
</template>

<script>
export default {
  name: "ClacDemo",
  //计算属性,只有当内部调用的变量发生变化,才会调用computed中的函数,注意,这里不是判断返回值中的计算中是否有变量变化来判断是否需要调用
  computed:{
    getMsg(){
      console.log('-------')
      return this.msg.split('').reverse().join('')
    }
  },
  data(){
    return{
      msg:"hello"
    }
  }
}
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

注意:调用计算属性的时候不需要加括号,可以看到只调用了一次:

​ 以下所示的代码中,虽然computed的getMsg函数中变量testNum的变化对最后返回的结果没有影响,但是只要其发生变化,getMsg函数就会调用:

<template>
  <div>
    {{getMsg}}
    {{getMsg}}
    {{getMsg}}
    <input type="button" value="testNum加1" name="button" @click="clickHandler">
  </div>
</template>

<script>
export default {
  name: "ClacDemo",
  //计算属性
  computed:{
    getMsg(){
      console.log('-------')
      console.log(this.testNum)
      return this.msg.split('').reverse().join('')
    }
  },
  methods:{
    clickHandler() {
      this.testNum += 1
    }
  },
  data(){
    return{
      msg:"hello",
      testNum:1
    }
  }
}
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37