插件

说起vue的插件就不得不提及vetur,vetur是对Vue2支持很友好的插件，用于为.vue单文件组件提供代码高亮以及语法支持。

但是它对于ts的支持，并不友好，而且Vue3是一整套从头到尾使用ts的新底层以及全新的composition-api,所以此时volar顺应而生。

volar不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。

需要注意的是：使用时需要禁用 Vetur 插件,Volar与它会有冲突

vue的HelloWorld

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>
    <div id="vue">
            <div>{{msg}}</div>
    </div>
    <script>
    var vuem =new Vue({
        el: '#vue',
        data: {
            msg: 'helloWorld'
        }
    })
    </script>
</body>
</html>

数据绑定的几个指令和属性

v-text指令
1

v-html指令

1

v-pre属性

显示编译前内容

插值表达式

指令概念与v-cloak指令的用法

数据填充相关3个指令的用法

数据响应式概念与v-once用法

v-once属性

如果要显示的信息后续不需要修改,就可以用v-once,这样可以提高性能

数据双向绑定v-model

v-model=’[data中的值]’

MVV-M

model view view-model

事件

事件绑定

与数据绑定同出一辙,概念差不多

写法v-on:[事件]=’[操作名]’

1
2
3
<input type='button' v-on:click='num++'/>
<!--或者简写-->
<input type='button' @click='num++'/>

事件绑定函数(也就是方法)

1
2
3
4
5
6
<!--直接写函数名-->
<input type='button' @click='[函数名]'/>
<input type='button' @click='handle'/>
<!--或者简写多个括号-->
<input type='button' @click='[函数名()]'/>
<input type='button' @click='handle()'/>

HTML页面

1
2
3
4
5
6
7
methods: {
   handle:function(){
         //这里对this是Vue的实例对象
         console.log(this ===vm)
         this.num++;
      }
}

事件绑定带参传递函数(也就是方法)

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
<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>
</body>

事件修饰符

v-on:click.stop =”[事件名称]” 直接.调用

可以连写

属性绑定v-bind

1
2
3
<a v-bind:href='url'>跳转</a>
<!--简写-->
<a :href='url'>跳转</a>

Vue动态处理属性

分支循环结构

  • v-if

  • v-else

  • v-else-if

  • v-show

    循环结构

    v-for

两者结合

1
2
3
4
<!--v等于13才遍历-->
<div v-if='v==13' v-for='(v,k,i) in obj'> 
{{v+'----'+k+'----'+i}}
</div>