vue快速入门

Vue 基础简介

Vue.js 是一套用于构建用户界面的渐进式 JavaScript 框架，它具有以下特点：

1. JS 框架：提供一套完整的工具和规范，助力高效开发。
2. 简化 DOM 操作：开发者无需直接编写复杂的 DOM 操作代码，只需关注数据变化。
3. 响应式数据驱动：当数据发生变化时，视图会自动更新。

环境准备

首先，通过 <script> 标签导入 Vue.js：

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

Vue 实例的两大核心元素

1. el：挂载点

通过 CSS 选择器设置 Vue 实例所管理的 HTML 元素。Vue 实例可以挂载在大部分双标签元素上，但建议不要挂载到 <body> 和 <html> 上。

2. data：数据对象

Vue 中用到的所有数据都定义在 data 对象中。data 中可以存储复杂类型的数据（如数组、对象），在渲染它们时，需遵守 JavaScript 语法。

<div id="app">
    <p>{{ message }}</p>
</div>

var app = new Vue({
    el: "#app", // id选择器，也可以使用class选择器等
    data: {
        message: "hello"
    }
})

Vue 指令详解

指令 (Directives) 是带有 v- 前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM 上。

v-text

用于设置标签的纯文本内容（等同于 innerText）。

<div id="app">
    <p v-text="message"></p>
</div>

var app = new Vue({
    el: "#app",
    data: {
        message: "hello"
    }
})

v-html

用于在标签中嵌入 HTML 代码（等同于 innerHTML）。

<div id="app">
    <!-- 如果是普通文本，效果和 v-text 一样 -->
    <!-- <p v-html="message"></p> -->
    
    <!-- 如果是 HTML 字符串，则会被渲染为 HTML 元素 -->
    <p v-html="link"></p>
</div>

var app = new Vue({
    el: "#app",
    data: {
        // message: "hello"
        link: '<a href="http://baidu.com">百度</a>'
    }
})

v-on

用于为元素绑定事件，可以使用简写 @。

<div id="app">
    <!-- 完整语法 -->
    <input type="button" value="事件绑定" v-on:click="handleClick">
    
    <!-- 简写语法 -->
    <input type="button" value="事件绑定" @click="handleClick">
</div>

var app = new Vue({
    el: "#app",
    methods: {
        handleClick: function() {
            // 方法体
            alert('按钮被点击了！');
        }
    }
})

常见事件

事件名	说明	触发时机
click	点击	鼠标点击元素时
dblclick	双击	鼠标双击元素时
mousedown	鼠标按下	在元素上按下鼠标按钮时
mouseup	鼠标松开	在元素上松开鼠标按钮时
mouseenter	鼠标进入	鼠标进入元素时（不冒泡）
mouseleave	鼠标离开	鼠标离开元素时（不冒泡）
mouseover	鼠标悬停	鼠标进入元素或其子元素时（冒泡）
mouseout	鼠标移出	鼠标移出元素或其子元素时（冒泡）
mousemove	鼠标移动	鼠标在元素内移动时
scroll	滚动	元素滚动条滚动时
resize	窗口调整	窗口大小变化时（通常用 window.addEventListener）
contextmenu	右键菜单	鼠标右键点击时（通常配合 .prevent 阻止默认菜单）

v-show 与 v-if

两者都用于根据表达式的真假，条件性地显示或隐藏元素，但原理不同。

• v-show ：通过操作元素的 CSS display 样式来控制显示和隐藏。元素始终会被渲染并保留在 DOM 中。
• v-if：通过操作 DOM 元素来控制显示和隐藏。当条件为假时，元素及其子元素会被完全销毁和移除。

选择建议 ：如果需要在显示与隐藏之间频繁切换 ，推荐使用 v-show（性能开销更小）；如果在运行时条件很少改变 ，则使用 v-if 更合适。

<div id="app">
    <!-- 使用 v-show -->
    <img v-show="isShow" src="示例图片地址1.jpg">
    <img v-show="age >= 18" src="示例图片地址2.jpg">
    
    <!-- 使用 v-if -->
    <img v-if="isShow" src="示例图片地址1.jpg">
    <img v-if="age >= 18" src="示例图片地址2.jpg">
</div>

var app = new Vue({
    el: "#app",
    data: {
        isShow: true,
        age: 17
    }
})

v-bind

用于动态设置元素的属性（如 src、title、class 等），可以使用简写 :。

<div id="app">
    <!-- 完整语法 -->
    <img v-bind:src="imgSrc">
    
    <!-- 简写语法 -->
    <span :title="message">将鼠标悬停在我上面</span>
</div>

var app = new Vue({
    el: "#app",
    data: {
        imgSrc: "https://example.com/image.jpg",
        message: "这是一个动态提示信息"
    }
})

v-for

用于根据一组数据遍历生成列表结构，语法为 item in items，并支持获取循环索引。

<div id="app">
    <ul>
        <!-- 获取元素和索引 -->
        <li v-for="(item, index) in arr">
            {{ index + 1 }}. {{ item }}
        </li>
    </ul>
</div>

var app = new Vue({
    el: "#app",
    data: {
        arr: ["a", "b", "c"]
    }
})

v-model

实现表单元素与数据之间的双向数据绑定。当表单控件的值发生变化时，对应的数据也会自动更新，反之亦然。

<div id="app">
    <input type="text" v-model="message">
    <p>你输入的内容是：{{ message }}</p>
</div>

var app = new Vue({
    el: "#app",
    data: {
        message: "hello"
    }
})

网络应用：axios

Vue.js 结合网络请求库 axios 可以轻松开发网络应用。

首先导入 axios：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

GET 请求示例

axios.get('https://api.example.com/data?key1=value1&key2=value2')
    .then(function(response) {
        // 成功后的回调函数
        console.log('数据获取成功：', response.data);
    }, function(err) {
        // 失败后的回调函数
        console.error('请求失败：', err);
    });

POST 请求示例

axios.post('https://api.example.com/data', {
    key1: 'value1',
    key2: 'value2'
})
    .then(function(response) {
        // 成功后的回调函数
        console.log('数据提交成功：', response.data);
    }, function(err) {
        // 失败后的回调函数
        console.error('提交失败：', err);
    });