vue入门到精通-第一个vue程序和基本语法组件

1.简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它
大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上
手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。

好处

轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb （Angular 压缩后 56kb+，React
压缩后 44kb+）
移动优先。更适合移动端，比如移动端的 Touch 事件
易上手，学习曲线平稳，文档齐全
吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属
性
开源，社区活跃度高

2.第一个vue的程序

开发版本
包含完整的警告和调试模式：https://vuejs.org/js/vue.js
删除了警告，30.96KB min + gzip：https://vuejs.org/js/vue.min.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<body>
    <div id="vue">
        {{message}}
    </div>


    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue',
            data: {
                message: 'Hello Vue!'
            }
        }); 
    </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

el:‘#vue’ ：绑定元素的 ID
data:{message:‘Hello Vue!’} ：数据对象中有一个名为 message 的属性，并设置了初始值

在这里插入图片描述

说明：只需要在绑定的元素中使用双花括号将 Vue 创建的名为 message 属性包裹起来，即可实现数据
绑定功能，也就实现了 ViewModel 层所需的效果，是不是和 EL 表达式非常像？

2.基本语法

2.1 v-bind

v-bind 特性被称为指令。指令带有前缀 v- ，以表示它们是 Vue 提供的特殊特性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!--如果要将模型数据绑定在html属性中
             则使用 v-bind 指令,此时title中显示的是模型数据 -->
        <h1 v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </h1> <!-- v-bind 指令的简写形式： 冒号（:） -->
        <h1 :title="message">我是简写的v-bind/h1>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        }) 
    </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
30
31
32
33

v-bind: 被称为指令，v- 代表啥vue的指令。
v-bind: 的简写形式就是 :

2.2 v-if 系列

v-if
v-else-if
v-else

<body>
    <div id="app">
        <h1 v-if="type === 'A'">A</h1>
        <h1 v-else-if="type === 'B'">B</h1>
        <h1 v-else-if="type === 'C'">C</h1>
        <h1 v-else>who</h1>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                type: 'B'
            }
        }) 
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.3 v-for

<body>
    <div id="app">
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                //items数组
                items: [
                    { message: '你好Java！' },
                    { message: '你好世界！' }
                ]
            }
        }) 
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2.4 v-on

v-on 监听事件：

<body>
    <div id="app">
        <button v-on:click="sayHi">点我</button> 
        <!-- v-on 指令的简写形式 @ --> 
        <button @click="sayHi">点我</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message:"你好，世界"
            },
            methods: {
                sayHi:function(event){
                    alert(this.message);
                }
            }
        }) 
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

v-on:click=“sayHi” 绑定事件
简写 @click=“sayHi”

2.5 v-model

v-model：双向数据绑定
Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发
生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

文本框

<body>
    <div id="app">
        <!-- v-bind:value只能进行单向的数据渲染 -->
        <input type="text" v-bind:value="searchMap.keyWord">
        <!-- v-model 可以进行双向的数据绑定 -->
        <input type="text" v-model="searchMap.keyWord">
        <p>您要查询的是：{{searchMap.keyWord}}</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap: {
                    keyWord: '张三'
                }
            },
            methods: {

            }
        }) 
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

v-bind:value只能进行单向的数据渲染
v-model 可以进行双向的数据绑定

单复选框

for 属性规定 label 与哪个表单元素绑定。

<body>
    <div id="app">
        单复选框：
        <input type="checkbox" id="checkbox" v-model="checked">
        &nbsp;&nbsp;
        <label for="checkbox">{{ checked }}</label>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                checked: false
            },
            methods: {

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

下拉框：

<body>
    <div id="app">
        下拉框：
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>选中的值: {{ selected }}</span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                selected: ''
            },
            methods: {

            }
        }) 
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

3.1 第一个vue组件

注意：在实际开发中，我们并不会用以下方式开发组件，以下方法只是为了让大家理解什么是组件。

新建一个 vue-component.html

<body>
    <div id="app">
        <ul>
            <!-- 有点类似自定义标签 --> 
            <my-component-li v-for="item in items"  v-model:value="item"></my-component-li> 
        </ul>
    </div>
 

    <script>
        // 先注册组件
        Vue.component('my-component-li', {
            props: ['value'],
            template: '<li>{{value}}</li>'
        });
        // 再实例化 Vue 
        var vm = new Vue({
            el: '#app',
            data () {
                return {
                    items:["张三","李四","王二麻子"]
                }
            }
        }); 
    </script>
</body>
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

Vue.component()：注册组件
my-component-li：自定义组件的名字
props：参数传递
template：组件的模板

注意：默认规则下 props 属性里的值不能为大写：

4. 计算属性

<body>
    <div id="app">
        <span>选中的值: {{ currentTime }}</span>
        <span>当前时间戳: {{ currentTime1() }}</span>
        <span>当前时间戳: {{ currentTime2 }}</span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                currentTime: Date.now()
            },
            methods: {
                currentTime1:function(){
                    return Date.now();
                }
            },
            computed:{
                currentTime2:function(){
                    return Date.now();
                }
            }
        }) 
    </script>
</body>
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

注意：methods 和 computed 里的东西不能重名
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

5.插槽

在 Vue 中我们使用元素，作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;

我们先用模板组件定义一个简单的待办事项的

<body>
    <div id="app">
        <todo></todo>
    </div>


    <script>
        // 定义一个待办事项的组件 
        Vue.component('todo', {
            template: '<div>' +
                '<div>待办事项</div>' +
                ' <ul>' +
                '<li>猫吃鱼</li>' +
                '<li>狗吃肉</li>' +
                '<li>奥特曼打小怪兽</li>' +
                ' </ul>' +
                ' </div>'
        });

        new Vue({
            el: '#app',
            data: {

            }
        }) 
    </script>
</body>
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

但是这些代办怎么实现动态绑定呢

<body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" title="代办事项"></todo-title>
            <todo-items slot="todo-items" v-for="(item, index) in todoItems" v-bind:item="item" v-bind:index="index"></todo-items>
        </todo>
    </div>


    <script>
        // 定义一个待办事项的组件 
        Vue.component('todo', {
            template: '<div>' +
                '<slot name="todo-title"></slot>' +
                ' <ul>' +
                '<slot name="todo-items"></slot>' +
                ' </ul>' +
                ' </div>'
        });
        Vue.component('todo-title', {
            props: ['title'],
            template: '<div>{{title}}</div>'
        });
        //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
         Vue.component('todo-items', { 
            props: ['item', 'index'], 
            template: '<li>{{index + 1}}. {{item}}</li>'
         });

        new Vue({
            el: '#app',
            data: {
                todoItems: ['猫吃鱼', '狗吃肉', '奥特曼打小怪兽']
            }
        }) 
    </script>
</body>
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

相关阅读:
linux crontab 定时任务详细
 Windows 11 Manager v1.1.8 系统优化工具中文便携版
 Hessian 序列化、反序列化
 sklearn机器学习——day04
Linux从入门到精通（八）——Linux磁盘管理
 2022 ios APP最新iOS开发上架测试教程
 进了985材料天坑，还刚得知转专业特别难，应该怎么办？
uniapp H5预览PDF支持手势缩放、分页、添加水印、懒加载、PDF下载
 【Go并发编程】Goroutine的基本使用
 STL笔记
原文地址：https://blog.csdn.net/weixin_44480609/article/details/125501511