Vue基本使用

发表于 | 分类于 | | 阅读量 次

Vue基本使用

[TOC]

简述

摘自百度百科

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

MVVM模式

以前的MVC为

Model层—View层—Controller层

MVVM层分为

Model层—-View层—-ViewModel

Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。

ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；

安装

首先安装Node.js

Node.js安装很简单

Node.js地址 直接下载傻瓜式安装即可

然后创建好项目，以本人的Java项目为例

在终端里使用命令

npm install vue

这样就在此次项目中安装好了vue

也可以进行全局安装

npm install vue -g

ECMAScript6语法

常用语法

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6语法</title>
    <script>
        for (var i = 0; i < 5; i++) {
            /*console.log(i);*/
        }
        /*console.log("让我康康i有没有值"+i);*/

        /* 块级元素let 相当于局部变量*/
        for (let j=0;j<5;j++){
            /*console.log(j);*/
        }
        /*console.log("让我康康i有没有值"+j);*/

        /* const代表常量*/
        /*const s = 5;
        s = 78; //报错，因为const定义后就为常量*/

        /* 解构表达式 */
        /* 数组解构 */
        let arr = [15,56,69];
        const [a1,a2,a3] = arr;
        console.log(a1,a2,a3);

        /* 对象解构 */
        let ars = {'name':'不想说',age:18}
        let {name,age} = ars;
        console.log(name,age);

        /* 箭头函数 */
        let product = {
            name:'最爱',
            eat:function (food) {
                alert(this.name+"吃"+food);
            },
            //箭头函数
            eat1:food=>alert(this.name+"吃"+food),
            //简写
            eat2(food){
                alert(this.name+"吃"+food);
            }
        }
        /*product.eat('汉堡');
        product.eat1('汉堡');
        product.eat2('汉堡');*/

        /* 箭头表达式 + 解构表达式 */
        const person = {
            name:'山泥若',
            age:25,
            speak:['疼痒集团','火焰鼠','喂喂喂']
        }
        function hello(person) {
            alert(person.name+"是"+person.speak[0])
        }
        var hi = ({name,speak}) => alert(name+"是"+speak[0]);
        hi(person);

        /* Promise对象 */
        /* Promise是异步编程的一种解决方案，比传统的解决方案（回调函数+事件）更加合理和强大 */
        const p = new Promise((resolve, reject) => {
            //模拟定时任务的异步
            setTimeout(()=>{
                const num = Math.random();
                //随机返回成功或者失败
                if (num<0.5){
                    resolve('成功!'+num)
                }else {
                    reject('失败!'+num)
                }
            },300)
        });
        //成功后调用
        p.then(function (msg) {
            alert(msg);
        }).catch(function (msg) {
            //失败后调用
            alert(msg);
        })

    </script>
</head>
<body>

</body>
</html>

Vue常用语法

数据绑定

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
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
    <div id="con">
        {{msg}}
    </div>
    <div class="con1">
        {{user}}
        {{user.name}}
        {{user.age}}
        {{user.red}}
    </div>
    <script>
        var app = new Vue({
            el:"#con",
            data:{
                msg:'你看什么看？'
            }
        });

        var app1 = new Vue({
            el:'.con1',
            data: {
                user:{
                    name:'山泥若',
                    age:25,
                    color:'red'
                }
            }
        });

    </script>

</body>

</html>

数据双向绑定

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
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="con">
    <input type="text" v-model="message" v-on:change="changeData">
</div>
    <script>
        var vue = new Vue({
           el:'#con',
           data:{
               message:'山泥若是大恶人'
           },
           methods:{
               changeData(){
                    this.message='山泥若biss';
               }
           }
        });
    </script>

</body>

</html>

Vue表达式

1
2
3
4
5
一般表达式都是写在{{}}

语法:{{表达式}}

例如：{{5+5}}

Vue指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
v-text指令：
<标签名 v-text="表达式"></标签名>
v-html指令：
<标签名 v-html="表达式"></标签名>
v-for指令：
<标签 v-for="元素 in 数据源"></标签>
v-bind指令：
<标签 v-bind:标签属性名字="表达式"></标签>
v-model指令：
<标签 v-model="表达式"></标签>
v-show指令：
<标签名 v-show="表达式"></标签名>
v-if指令：
<标签名 v-if="表达式"></标签名>
v-else指令：
<标签名 v-if="表达式"></标签名>
<标签名 v-else></标签名>
v-else-if指令：
<标签名 v-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else></标签名>
❤赏点钱让我买杯快乐水8❤