VUE第1天：为什么要学习vue、渐进式概念、框架概念、MVVM的概念、vue基本使用步骤、插值表达式、vue指令

本文链接：https://blog.youkuaiyun.com/m0_46597922/article/details/107451848

本文介绍了为何要学习Vue，强调其在主流框架中的易学性和高效性。详细阐述了Vue的基本概念，包括渐进式框架的概念、MVVM模式以及Vue的使用步骤。通过实例讲解了插值表达式、v-bind、v-model和v-on指令，以及事件修饰符的运用，帮助读者快速入门Vue开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么要学习vue

公司对vue有要求 BOSS直聘

在这里插入图片描述

在主流框架：angular、vue、react中，vue最容易学习。

Vue课程介绍和基本概念

在这里插入图片描述

课程介绍

vue课程安排（22天）
- vue基础：vue的全家桶（vue/vue-router/vuex/vue-cli）+webpack+ES6
- vue进阶：项目实战（移动端+PC端）

vue介绍

vue 中文网
Vue.js 是什么
vue优点：易用、灵活、高效。

1、易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

2、灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

3、高效：20kB min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。

渐进式的概念

渐进式：逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue的全家桶来管理整个项目。

在这里插入图片描述

框架的概念

我们所说的前端框架与库的区别？

Library

代表：jQuery art-template moment
库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能

使用库的时候，把库当成工具使用，需要自己控制代码的执行逻辑。

例：自己动手用工具榨果汁：

在这里插入图片描述

Framework

代表：vue、angular、react、bootstrap
框架，是一套完整的解决方案

使用框架的时候，框架实现了大部分的功能，我们只需要按照框架的规则写代码

例：用榨汁机榨果汁

在这里插入图片描述

库和框架的区别

使用库的时候，很自由，只要调用库提供的各种各样的方法就行，也可以不用其他的一些方法
使用框架的时候，需要按照框架的规则写代码，限制会非常多，但同时框架的功能也很强大，可以极大的提升开发的效率。

MVVM的概念

MVVM，一种软件架构模式，决定了写代码的方式。
- M：model数据模型(ajax获取到的数据)
- V：view视图（页面）
- VM：ViewModel 视图模型

MVVM通过数据双向绑定让数据自动地双向同步 不在需要操作DOM
- V（修改视图） -> M（数据自动同步）
- M（修改数据） -> V（视图自动同步）

在这里插入图片描述

Vue中的MVVM

虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例

注意：

1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！

在这里插入图片描述

vue初体验

基本使用步骤

安装：npm i vue
引入vue.js文件

<script src="vue.js"></script>

创建Vue实例，指定el和data参数

// 创建vue实例，需要指定el和data属性
const vm = new Vue({
    // 指定vue的模版，值是一个选择器
    el: '#app',
    // 提供了vue中使用的数据
    data: {
        msg: 'hello vue'
    }
})

在模版中显示数据

<div id="app">
    // 通过{{}}可以显示data中的数据
    {{msg}}
</div>

代码演示：

<body>
    <!-- 安装vue  npm i vue
        2. 引入vue.js
        3. 实例化vue    
    -->

    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello 01-vue初体验'
            }
        })
    </script>
</body>

注意事项：

在开发阶段，一定要引入未压缩版的vue.js，因为压缩版的vue.js去除了警告信息和错误提示
el不能是html或者body
vue html标签要写到模板中
模板不可以绑定在body或标签上
{{}}不可以写在html标签的属性上

插值表达式

插值表达式：{{}}，也叫Mustache语法，小胡子语法，因为长得像胡子

在这里插入图片描述

解释：使用{{}}（插值表达式）从data中获取数据，并展示在模板中
说明：{{}}中只能出现JavaScript表达式
javascript 表达式：
- 特点：一定有值。
常见的表达式有：
- 所有的javascript 数据类型都是表达式。比如 1 ，‘a’ ，对象、数组，都是表达式。
- 数据类型和运算符的组合： 1+ 1 、 true ? ‘a’ : ‘b’ 。
识别表达式的技巧：能出现在等号右边的内容都是表达式。比如 const a= 1， const b= 1 + 1， const c= true ? ‘a’ : ‘b’

	<h1>Hello, {{ msg }}.</h1> 是
    <p>{{ isOk ? 'yes': 'no' }}</p> 是
    <p>{{ if (isOk){console.log('yes')}}}</p> 不是
    <p>{{ 1 + 2 }}</p>是
    <p>{{let str = 'hello vue'}}</p> 不是
    <p>{{ ['a', 'b', 'c'].map(function(item){return item}) }}</p> 是
    <p>{{ for(let i= 0; i < 10; i++){console.log(i)} }}</p>不是

代码演示：

<body>
    <div id="app">

        <h1 title="你好啊">hello, {{msg}}</h1>

        <p>{{isok ? 'yes' : 'no'}}</p>

        <p>{{1+2}}</p>

        <p>{{['a', 'b', 'c'].map(function(item){return item})}}</p>

    </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello,vue!!!',
                isok: true
            }
        })
    </script>
</body>

注意点：

插值表达式中不能出现语句，比如if / else / for等
插值表达式中访问的数据要在data中存在。
插值表达式不能在属性中使用，只能在标签的内容中使用。

vue双向数据绑定

代码演示：

<body>
    <div id="app">
        <h1>vue的例子</h1>
        <h1>{{msg}}</h1>
        <input type="text" v-model="msg">
    </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            }
        })
    </script>
</body>

vue指令

解释：指令 (Directives) 是带有 v- 前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性
作用：指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为

v-bind指令

描述：插值表达式不能用在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令
作用：动态的设置html的属性
语法：v-bind:title="msg"
简写：:title="msg"

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

代码演示：

<body>
    <!-- 
    vue指令：
        以 v- 开头的 自定义属性
        v-xxxxx

    v-bind 指令
        作用：动态绑定html标签的属性值
        语法： v-bind:属性名="值"
    
    简写：
        :属性名="值"
    -->

    <div id="app">
        <h1 :title="msg">{{msg}}</h1>
    </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            }
        })
    </script>
</body>

v-model指令

v-model: https://cn.vuejs.org/v2/guide/forms.html

作用：在表单元素上创建双向数据绑定
说明：监听用户的输入事件以更新数据
思考：如何在JS代码中获取到文本框的值？？？

<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

代码演示：

<body>
    <div id="app">
        <h1>vue的例子</h1>
        <input type="text" v-model="msg">
        <br>
        <textarea name="" id="" cols="30" rows="10" v-model="desc"></textarea>
        <br>
        <select name="" id="" v-model="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4">深圳</option>
        </select>
        <br>
        <input type="checkbox" v-model="agree">同意本站协议
    </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello',
                desc: '这是个说明',
                city: '2',
                agree: false
            }
        })
    </script>
</body>

案例-模拟登陆：

<body>
    <div id="app">
        <input type="text" v-model="username" placeholder="请输入用户名">
        <br>
        <input type="text" v-model="password" placeholder="请输入密码">
        <br>
        <button>登录</button>

    </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: '',
                password: ''
            }
        })
    </script>
</body>

v-on指令

https://cn.vuejs.org/v2/guide/events.html

作用：绑定事件
语法：v-on:click="say" or v-on:click="say('参数', $event)"
简写：@click="say"
说明：绑定的事件从methods中获取
案例：跑马灯

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

代码演示：

<body>
    <!-- 
        v-on:事件名="函数"
        @事件名="函数"

        方法要定义在methods对象中
    -->

    <div id="app">
        <input type="text" v-model="username" placeholder="请输入用户名">
        <br>
        <input type="text" v-model="password" placeholder="请输入密码">
        <br>
        <button v-on:click="fn">登录</button>
        <button @click="fn1">清空</button>
    </div>

    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            //定义数据
            data: {
                username: '',
                password: ''
            },
            methods: {
                fn() {
                    console.log(this.username);
                    console.log(this.password);
                },
                fn1() {
                    this.username = ''
                    this.password = ''
                }
            }
        })
    </script>
</body>

案例1-字符串翻转：
在这里插入图片描述

<body>
    <div id="app">
        <h1>vue的例子</h1>
        <button @click="reve">翻转</button>
        <br> {{msg}}
    </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello kuku!!!!'
            },
            methods: {
                reve() {
                    this.msg = this.msg.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

案例2-跑马灯：
在这里插入图片描述

<body>
    <div id="app">
        <h1>vue的例子</h1>
        <button @click="go">走</button>
        <button @click="stop">停</button>
        <br> {{msg}}
    </div>

    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '我一定可以月薪15K！！！！',
                timeId: ''
            },
            methods: {
                go() {
                    clearInterval(this.timeId)
                    this.timeId = setInterval(() => {
                        this.msg = this.msg.slice(1) + this.msg.slice(0, 1)
                    }, 200)
                },
                stop() {
                    clearInterval(this.timeId)
                }
            }
        })
    </script>
</body>

事件修饰符

.stop 阻止冒泡，调用 event.stopPropagation()
.prevent 阻止默认行为，调用 event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
.once 事件只触发一次
代码演示：

<body>
    <!-- 
        事件修饰符：

        @事件名.事件修饰符="函数"
        .prevent 阻止默认行为
        .stop 阻止冒泡
        .capture 设定捕获机制
        .self 只有点自己的时候触发事件，点自己的子节点不会触发事件
        .once 只触发一次
     -->

    <div id="app">
        <h1>vue的例子</h1>
        <div class="father" @click.once="father">
            <a href="http:www.baidu.com" @click.prevent="son">点我</a>
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                son() {
                    console.log('son');
                },
                father() {
                    console.log('father');
                }
            }
        })
    </script>
</body>

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

re添加事件侦听器时使用事件捕获`模式

.self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
.once 事件只触发一次

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

代码演示：

<body>
    <div id="app">
        <h1>vue的例子</h1>
        <input type="text" @keyup.13="fn" placeholder="请输入关键字并按回车键搜索。">
    </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                fn() {
                    console.log('执行搜索');
                }
            }
        })
    </script>
</body>