Vue基础学习——基础语法和使用

一、vue实例创建和引入

    Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

    而我们在使用vue时，首先第一步，需要引入vue环境，有以下两种方式。

    1.通过 CDN 使用 Vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    2.使用npm搭建vue（略）

    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。在引入vue的js文件后，我们就可以创建我们的第一个vue实例了。

<div id="app">
        {{name}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
    <script>
       Vue.createApp({
            data() {
                return {
                    name: '李雷'
                };
            },
        }).mount('#app')
    </script>

二、vue事件绑定

v-once：用于指定元素或者组件只渲染一次

当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；用于性能优化

v-on ：绑定事件

前面我们绑定了元素的内容和属性,在前端开发中另外一个非常重要的特性就是交互 , 所以vue是使用v-on来实现事件监听

v-on的使用：

1,缩写 :·@

2.参数：event

3.修饰符：

4.

1. stop- 调用 event.stopPropagation()
2. .prevent - 调用 event.preventDefault()。
3. .capture－添加事件侦听器时使用capture模式。
4. .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyAlias} - 仅当事件是从特定键触发时才触发回调。
5. .once - :只触发一次回调。
6. .left - 只当点击鼠标左键时触发。
7. .right - 只当点击鼠标右键时触发。
8. .middle - 只当点击鼠标中键时触发。
9. .passive -{ passive: true }模式添加侦听器☐ 用法：绑定事件监听