Vue2基础

最新推荐文章于 2024-10-10 13:13:22 发布
最新推荐文章于 2024-10-10 13:13:22 发布
阅读量917 收藏 3
点赞数 12
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52076808/article/details/142813223
版权

一、基础

1.el:挂载点

el 选项用于指定 Vue 实例挂载的 DOM 元素。这一元素被称为挂载点。通过 el 选项，Vue.js 知道在页面的哪个部分渲染 Vue 实例，并接管页面的内容。

1.1挂载方式
  • el选项挂载
<div id="app">
    {{message}}
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            message:"hello vue!"
        }
    });
</script>
  • 手动挂载
<div id="app">
    {{message}}
</div>
<script>
    let vue = new Vue({
        // el:"#app",
        data:{
            message:"hello vue!"
        }
    });
    vue.$mount('#app')
</script>
1.2注意事项
  • 单页应用的典型模式：在 Vue 单页应用中，通常在 index.html 文件中有一个空的 div 元素作为挂载点，Vue 实例接管此元素，并将整个应用渲染到其中。
  • el 选项接受一个 CSS 选择器字符串或一个 HTML 元素对象：你可以直接传递一个选择器字符串（如 '#app'），也可以传递一个 DOM 元素对象（如 document.getElementById('app')）。
  • 确保挂载点在页面中存在：在 Vue 实例被创建时，指定的 el 挂载点必须已经存在于页面中，否则 Vue 无法挂载。

2.data数据对象

在 Vue 实例或组件中，data 通常是一个返回对象的函数，该对象包含了所有需要在模板中使用的数据。

2.1**data 中的数据类型**

  • data 对象可以包含各种数据类型，包括：

    1. 对象：例如 user: { name: 'John', age: 30 }
    2. 字符串：例如 message: 'Hello World'
    3. 数字：例如 count: 42
    4. 布尔值：例如 isVisible: true
    5. 数组：例如 items: [1, 2, 3]

  • 示例：

<div id="app">
    {{message}}
    <h2>{{school.name}}{{school.mobile}}</h2>
    <ul v-for="capu in capus">
        <li>{{capu}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"你好",
            school:{
                name:"老王技术学院",
                mobile:"128913891318"
            },
            capus:["北极","南极","上海","广州","福建"]
        }
    })

二、本地引用

1.v-text

v-text 是一个用于更新元素的文本内容的指令。它将绑定的数据渲染为纯文本，替换元素内部的任何现有内容。

1.1基本用法

v-text 指令的作用类似于使用 Mustache 语法（双大括号 {{ }}），不过 v-text 直接操作的是元素的 textContent，不会保留元素内的任何子内容。它可以防止 XSS 攻击，因为它不会将 HTML 解析为标签，只会作为纯文本输出。

  • 示例：
<div id="app">
    <h2 v-text="message"></h2>
    <h2 v-text="info"></h2>
    <h2>{{message+"?"}}</h2>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"比老外",
            info:"vue亲啊后端"
        }
    })
</script>
1.2与 {{ }} 的区别
  • v-text

    和 Mustache 语法（

    {{ message }}

    ）的主要区别在于：

    • v-text 会直接替换元素的整个文本内容，v-text 会直接覆盖 <p> 标签内部的所有内容，只显示 message 的值。
    • Mustache 语法 会在元素内部插入文本内容，同时保留原有的 HTML 结构。
<p>{{ message }}</p>//可以进行字符串拼接
//这个语法会将 message 的值插入到 <p> 标签中，但它保留了 <p> 标签内的任何其他内容。
1.3防止 XSS 攻击

由于 v-text 渲染的是纯文本，而不是 HTML 内容，它可以有效防止 XSS（跨站脚本攻击）。即使绑定的数据包含 HTML 标签或脚本，v-text 也会将它们作为普通文本显示，而不会执行任何脚本。

2.v-html

v-html 直接将数据绑定为 HTML 内容，插入到指定的元素中。它适用于需要动态插入 HTML 的场景，比如从服务器获取的富文本内容。

2.1.与 v-text 的区别
  • v-text 只会将绑定的数据渲染为纯文本，不解析其中的 HTML 标签。
  • v-html 将绑定的内容作为 HTML 解析，并插入到 DOM 中。它允许你动态地插入和渲染 HTML 代码片段。
<div id="app">
    <p v-html="content"></p>
    <p v-text="content"></p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            content:"<a href='http://www.raokang.top/'>辞南的博客</a>"
        }
    })
</script>
2.2插入组件的注意事项

如果你希望在 v-html 插入的内容中使用 Vue 组件，这样做是不可行的，因为 v-html 渲染的内容不会被 Vue 解析为模板，也不会激活 Vue 组件。要在动态内容中使用 Vue 组件，需要手动构建模板，或者使用插槽、动态组件等方式。

3.v-on

3.1基本语法

v-on 的基本语法是 v-on:事件名="方法名"。它用于绑定事件到 DOM 元素，并在事件触发时调用 Vue 实例中的一个方法。

<div id="app">
    <button v-on:click="greet">Click me</button>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                message: 'Hello, Vue!'
            };
        },
        methods: {
            greet() {
                alert(this.message);
            }
        }
    });
3.2简写语法

Vue.js 提供了 v-on 的简写方式，可以将 v-on:事件名 简写为 @事件名。这是一个更简洁的语法，在大多数情况下都使用简写。

<div id="app">
    <button @click="greet">Click me</button>
    <button @click="changeFood">{{food}}</button>
    <button @dblclick="greet">dblclick me</button>//双击事件
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                message: 'Hello, Vue!',
                food:"西兰花"
            };
        },
        methods: {
            greet() {
                alert(this.message);
            },
            changeFood(){
                this.food="西红柿"
            }
        }
    });
3.3内联表达式

除了绑定方法，你还可以在 v-on 中使用内联表达式。这些表达式可以是简单的 JavaScript 表达式。

<div id="app">
  <button @click="count++">Clicked {{ count }} times</button>
</div>
new Vue({  el: '#app',
  data() {
    return {
      count: 0
    };
  }
});
3.4事件修饰符
  • Vue.js 提供了一些事件修饰符，可以修改事件处理器的行为。这些修饰符可以在事件名后面添加。
    1. .once：只触发一次事件。
    2. .stop：阻止事件的冒泡行为。
    3. .prevent：阻止事件的默认行为。
    4. .capture：使用事件的捕获模式。
    5. .self：只在事件由自身元素触发时才触发处理函数。

4.v-show

4.1基本用法

v-show 的语法是 v-show="expression"，其中 expression 是一个返回布尔值的表达式。当表达式的结果为 true 时，元素将显示；当结果为 false 时，元素将隐藏。

<div id="app">
    <input type="button" value="切换显示状态" @click="changeShow">
    <img src="/images/preview.jpg" alt="" v-show="isShow">
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods:{
            changeShow(){
                this.isShow=!this.isShow;
            }
        }
    })
</script>

5.v-if

v-if 是 Vue.js 中用于条件渲染的指令。它根据表达式的值决定是否在 DOM 中渲染元素。与 v-show 不同，v-if 会完全移除或添加元素到 DOM 中，而不仅仅是改变元素的可见性。

<div id="app">
    <input type="button" value="切换显示状态" @click="changeShow">
    <img src="/images/preview.jpg" alt="" v-show="isShow">
    <img src="/images/preview.jpg" alt="" v-if="isShow">
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:17
        },
        methods:{
            changeShow(){
                this.isShow=!this.isShow;
                this.age++;
            }
        }
    })
</script>
5.1**v-else 和 v-else-if**
  • **v-else：**用于在 v-if 表达式为 false 时渲染一个替代块。v-else 必须紧跟在 v-if 或 v-else-if 元素之后。
  • **v-else-if：**用于在前一个 v-if 或 v-else-if 表达式为 false 时，提供一个新的条件。
5.2性能对比：v-if vs v-show
  • **v-show：**当条件为 false 时，元素仍然存在于 DOM 中，只是不可见（display: none;）。适用于需要频繁切换可见性的场景。
  • **v-if：**当条件为 false 时，元素不会渲染到 DOM 中。如果条件在运行时切换，Vue 将销毁或重建元素。适用于不经常切换条件的场景，因为每次切换都会触发元素的销毁或重建。

6.v-bind

v-bind 是 Vue.js 中的一个指令，用于动态地绑定元素的属性、Class 或 Style。通过 v-bind，你可以将数据或表达式的值绑定到元素的属性上，实现动态更新。

6.1简写语法

Vue.js 提供了 v-bind 的简写方式，可以将 v-bind:attribute 简写为 :attribute。这种简写方式使代码更加简洁。

<style>
    .active{
        border: 1px solid red;
    }
</style>
<body>
<div id="app">
    <img :src="imgSrc" alt="" :title="imgTitle" :class="isActive?'active':''" @click="changeActive">
    <br>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            imgSrc:"/images/DM_20240807212841_001.jpg",
            imgTitle:"二次元",
            isActive:false
        },
        methods:{
            changeActive(){
                this.isActive=!this.isActive
            }
        }
    })
</script>

7.v-for

v-for 是 Vue.js 中的指令，用于循环渲染列表。它能够遍历数组、对象，甚至是指定的数字范围，并为每一项生成一个对应的 DOM 元素。

<div id="app">
    <ul>
        <li v-for="(item,index) in items" :title="item.name">
            {{index+1+":"+item.name}}
        </li>
    </ul>
    <input type="button" value="添加" @click="add">
    <input type="button" value="移除" @click="remove">
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            items:[
                {name:"北京"},
                {name:"南极"},
                {name:"上海"},
                {name:"深圳"},
            ]
        },
        methods:{
            add(){
                this.items.push({name:"瑞典"});
            },
            remove(){
                this.items.pop();
            }
        }
    })
</script>

8.v-model

v-model 是 Vue.js 中的一个双向数据绑定指令，它允许在表单控件（如输入框、复选框、单选按钮等）和数据模型之间建立双向绑定。当用户在表单控件中输入或修改数据时，数据模型会自动更新，反之亦然。

<div id="app">
    <label>
        <input type="radio" v-model="picked" value="One"> One
    </label>
    <label>
        <input type="radio" v-model="picked" value="Two"> Two
    </label>
    <p>Picked: {{ picked }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            picked: ''
        }
    });
</script>

三、网络应用

1.axios基本用法

axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送异步请求。它可以处理 GET、POST、PUT、DELETE 等 HTTP 请求，并支持请求和响应的拦截、取消请求、自动转换 JSON 数据等功能。

<div id="app">
    <input type="button" value="get请求" @click="get">
    <input type="button" value="post请求" @click="post">
</div>

<script>
    new Vue({
        el:"#app",
        methods:{
            get(){
                axios.get("https://autumnfish.cn/api/joke/list?num=6")
                    .then(function (response){
                        console.log(response);
                    },function (err){
                        console.log(err)
                    })
            },
            post(){
                axios.post("https://autumnfish.cn/api/user/reg").then(function (response){
                    console.log(response);
                },function (err){
                    console.log(err)
                })
            }
        }
    })
</script>

四、补充

1.常用的事件修饰符

1.1. .stop
  • 作用: 阻止事件冒泡到父元素。
<div id="app">
    <div id="div1" @click="method1">
        <button @click.stop="method2">
            确定
        </button>
    </div>
</div>
<script>
    Vue.createApp({
        data(){

        },
        methods:{
            method1(){
                alert("div被点击了")
            },
            method2(){
                alert("buttn被点击了")
            },
        }
    }).mount("#app")
2.2..prevent
  • 作用: 阻止事件的默认行为。
<div id="app">
    <div id="div1" @click="method1">
        <a @click.prevent.stop="method3" href="http://baidu.com">百度</a>
    </div>
</div>
<script>

    Vue.createApp({
        data(){

        },
        methods:{
            method3(){
                alert("超链接被点击了")
            }
        }
    }).mount("#app")
</script>
2.3..capture
  • 作用: 以捕获模式来监听事件。事件会在捕获阶段触发，而不是在冒泡阶段。
<div id="app">
    <div @click.capture="handleCapture" style="width: 200px;height: 100px;background-color: red">
        <button @click="handleClick">Click Me</button>
    </div>
</div>

<script>
    Vue.createApp({
        methods: {
            handleCapture() {
                alert('Capture phase: Parent div clicked');
            },
            handleClick() {
                alert('Bubble phase: Button clicked');
            }
        }
    }).mount("#app")
</script>
2.4..self
  • 作用: 只有当事件的目标是事件绑定的元素本身时才触发事件，子元素的点击不会触发。
<div id="app">
    <div @click.self="handleDivClick" style="width: 200px;height: 100px;background-color: red">
        <button @click="handleButtonClick">Click Me</button>
    </div>
</div>

<script>
    Vue.createApp({
        methods: {
            handleDivClick() {
                alert('Div clicked');
            },
            handleButtonClick() {
                alert('Button clicked');
            }
        }
    }).mount("#app")
</script>
2.5..once
  • 作用: 事件只会触发一次，然后会自动移除事件监听器。
<div id="app">
    <button @click.once.prevent="handleClick">Click Me</button>
</div>

<script>
    Vue.createApp({
        methods: {
            handleClick() {
                alert('Button clicked once and default action prevented.');
            }
        }
    }).mount("#app")
</script>
2.6..passive
  • 作用: 将事件监听器标记为被动，意味着它不会调用 event.preventDefault()。这对于提高滚动性能特别有用。
2.7..native (Vue 2.x)

注意：native 修饰符在 Vue 3.x 中已经被废弃。对于 Vue 3.x，事件绑定直接在组件上监听原生事件即可。

  • 作用: 用于在组件上监听原生 DOM 事件。
辞南℡
关注
vue2基础，十分基础
03-11
在这个“Vue2基础”教程中，我们将深入探讨Vue 2的核心概念和特性，帮助你搭建坚实的Vue开发基础。 1. **安装与设置** - 安装Vue CLI（命令行工具）：Vue CLI简化了项目初始化，通过npm或yarn全局安装。 - 创建新...
vite+vue2的项目基础包
06-17
这个“vite+vue2的项目基础包”为开发者提供了一个快速启动Vue2项目的模板，免去了从零开始配置的繁琐过程。 1. Vite的核心特性： - **即时编译**：Vite在开发模式下，采用ES模块的热重载和按需编译，大大提高了...
vue2 基础入门
web00_11的博客
01-15 4240
vue2 基础入门 一、vue 简介 1.什么是 vue 官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。 2.vue 的特性 vue 框架的特性。主要体现在两个方面 数据驱动视图 双向数据绑定 2.1 数据驱动视图 ​ 在使用了 vue 的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构 好处：当页面数据发生变化时，页面会自动重新渲染！ 注意：数据驱动视图是单向的数据绑定。 2.2 双向数据绑定 在填写表单时，双向数据绑定可以辅助
Vue2基础语法
weixin_52441428的博客
05-07 1967
Vue2基础语法【插值语法 指令 事件 事件修饰符 条件渲染 遍历渲染 变更方法 checkbox和radio 】
vue2基础总结
m0_46692607的博客
03-20 1万+
Vue2 API Vue2 guide 参考以上资料选择一些常用高频核心的Vue2知识进行总结归纳 1.基础  Vue文件 = template+script+style  创建vue实例 var vm = new Vue({选项对象})  html标签体插值{{xxx}} ，xxxx 会作为js 表达式解析  单向数据绑定data–>html:v-bind:href ="xxx" 或简写为:href  双向数据绑定data<–>html:v-mode:value="xxx" 或简写为v-
Vue2基础教程(脚手架版)
qq_57319760的博客
09-14 5392
本文讲解使用Vue脚手架进行Vue2学习，适合学习完一遍vue2基础的人进行复习
vue2基础模板代码块设置
qq_54568336的博客
02-28 1465
vue基础模板代码块
Vue2基础(CDN方式)
qq_39593914的博客
04-10 1万+
Vue2基础(CDN方式) 一、环境搭建 1.Vue的引入 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script> 2.安装vue Devtools(v2) 3.关闭cdn开发模式提示 tip: 关闭提示编码： 使用了Vue的全局配置对象，更多配置请参考：API — Vue.js (vuejs.org) Vue.config.productionTip = false; 二、Vue基
Vue2基础 05：计算属性
Fxcrisp的博客
05-20 2392
Vue2基础知识：先通过一个小案例来横向对比 插值语法、methods和计算属性的实现过程，然后对计算属性进行详细介绍。
Vue2-基础知识
热门推荐
qq_54379580的博客
09-28 1万+
一些vue的基础知识啦, 基本用法, 指令相关,侦听器,过滤器,计算属性, 组件相关, 路由相关的基础知识点啦~~~
vue2基础
m0_52227324的博客
11-27 1655
学校的vue课程又跟着尚硅谷禹神过了一遍vue2，将所学整理成笔记供大家参考学习
学Vue2基础内容，这一篇就够了
weixin_49931650的博客
07-18 1751
Vue2笔记--基础篇 二万多字，小白学了都说好 内含Vue的一些基础属性和案例使用 还有事件、指令、生命周期钩子和组件的使用 难理解的地方都用了图片展示
09-vue2基础课件.zip
07-13
这个"09-vue2基础课件.zip"压缩包文件很可能是包含了一系列教程或课程材料，帮助学习者掌握Vue 2的基础知识。以下是关于Vue 2的一些关键知识点： 1. **安装与设置**：Vue 2可以通过CDN链接直接在HTML中引入，也可以...
vue2-empty:vue2基础开发框架
03-27
"vue2-empty" 是一个基于 Vue 2 的基础开发框架，旨在为开发者提供一个快速启动新项目的基础结构。在这个框架中，我们可以看到一些关键组成部分和最佳实践，帮助我们更好地理解和应用 Vue 2。 1. **安装与设置**：...
vue2基础语法笔记和代码
07-28
vue2基础语法笔记和代码
vue3之defineComponent
最新发布
点点滴滴
10-10 348
/script>h1 {</style>使用可以更好地定义组件的 props、emits 和其他选项，从而提供更严格的类型检查。在这个示例中，帮助我们定义了props和emits的类型，从而提供更严格的类型检查。
Vue根实例、实例总结
m0_54007573的博客
10-04 677
Vue根实例、实例总结
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 305
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1479
vue-live2d看板娘集成方案设计使用教程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值