Vue初体验

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

一、Vue 简介

    Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
    vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。

Vue的特点

1.遵循 MVVM 模式
2.编码简洁，体积小，运行效率高，适合 移动/PC 端开发
3.它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目
4.采用组件化模式，提高代码复用率、且让代码更好维护
5.声明式编码，让编码人员无需直接操作DOM，提高开发效率
6.使用 虚拟DOM和 Diff算法，尽量复用DOM节点

Vue使用

搭建Vue开发环境

直接在html中用script引入

vue.js文件引入，这两个用哪一个都可以

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

创建Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="root">
       <!--插值语法-->
      <h1>Hello,{{who}}</h1>
  </div>

  <script>
    <!-- 3.创建Vue实例 -->
    const vm = new Vue({
        el:'#root',
        data() {
                return{
                    who:'Vue'
                }
            }
    });
  </script>
</body>
</html>

指令语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="app">
      <!-- 插值语法 -->
      <h1>Hello,{{who}}</h1>
      <hr>
      <!-- 指令语法 -->
      <p><a v-bind:href="url"> 百度</a></p>
      <p><a :href="url"> 百度-1</a></p>
  </div>

  <script>
    <!-- 3.创建Vue实例 -->
    const vm = new Vue({
        el:'#app',
        data:{
            who:'Vue',
            url:'https://www.baidu.com'
        }
    });
  </script>
</body>
</html>

点击会 跳转到百度页面

数据绑定

单向数据绑定，数据只能从 data 流向页面，在页面其中改变who的值时，其他相同数据不变

双向数据绑定，数据不仅能从 data 流向页面，还能从页面流向 data。改变值时，其他相同数据一同改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="app">
      <!-- 插值语法 -->
      <h1>Hello,{{who}}</h1>
      <hr>
       <p>Hello,<input type="text" :value="who">————————单向数据绑定</p>
       <p>Hello,<input type="text" v-model:value="who">————————双向数据绑定</p>
       <p>Hello,<input type="text" v-model="who">————————双向数据绑定</p>
      
  </div>

  <script>
    <!-- 3.创建Vue实例 -->
    const vm = new Vue({
        el:'#root',
        data:{
            who:'Vue',
        }
    });
  </script>
</body>
</html>

事件处理

点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="app">
       <!--插值语法-->
      <h1>Hello,{{who}}</h1>

       <!-- 点击事件-->
      <button @click="showWho">点击</button>
      <button @click="allo(2)">点击：带参数</button>
  </div>

  <script>
    <!-- 3.创建Vue实例 -->
    const vm = new Vue({
        el:'#app',
        data() {
                return{
                    who:'Vue'
                }
            },
        methods:{
                showWho(){
                    alert(this.who);
                },
                allo(param){
                    alert(param * 9)
                }             
            }
    });
  </script>
</body>
</html>

点击左边的，会出现弹窗

点击右边的，

阻止默认事件  .prevent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="app">
       <!--插值语法-->
      <h1>Hello,{{who}}</h1>

       <!-- 阻止默认事件  .prevent  -->
      <p><a href="https://www.baidu.com" @click.prevent="allo(1)">百度一下</a> </p>

  </div>

  <script>
    <!-- 3.创建Vue实例 -->
    const vm = new Vue({
        el:'#app',
        data() {
                return{
                    who:'Vue'
                }
            },
        methods:{
                
                allo(param){
                    alert(param * 9)
                }            
            }

    });
  </script>
</body>
</html>

原本的结果是点击之后会出现上图的弹框，确定之后会进入到百度页面，但是由于我们添加了

阻止默认事件  .prevent  所以在点击确定后不会进行跳转了

阻止事件冒泡 .stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="app">
       <!--插值语法-->
      <h1>Hello,{{who}}</h1>

       <!--阻止事件冒泡 .stop 外面有效果的话不去触发-->
   <div @click="showDIV" style='border: 1px solid red;width:200px; height:200px'>
       <p><a href="https://www.baidu.com" @click="showWho">百度两下</a> </p>
       <p><a href="https://www.baidu.com" @click.prevent="showWho">百度三下</a> </p>
       <p><a href="https://www.baidu.com" @click.prevent.stop="allo(3)">百度四下</a> </p>
   </div>


  </div>

  <script>
    <!-- 3.创建Vue实例 -->
    const vm = new Vue({
        el:'#app',
        data() {
                return{
                    who:'Vue'
                }
            },

        methods:{
                showWho(){
                    alert(this.who);
                },
                allo(param){
                    alert(param * 9)
                },
                showDIV(){
                    alert('div')
                }
            }
    });
  </script>
</body>
</html>

输出结果为百度四下的，点击后只会弹出它本身的效果，其他效果不显示

事件只触发一次  .once

此结果，只能点击一次，之后再点击均为效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="app">
       <!--插值语法-->
      <h1>Hello,{{who}}</h1>

        <!--事件只触发一次 once-->
     <button @click.once="showAAA">点击：只能点一次</button>


  </div>

  <script>
    <!-- 3.创建Vue实例 -->
    const vm = new Vue({
        el:'#app',
        data() {
                return{
                    who:'Vue'
                }
            },
        methods:{
                
                showAAA(){
                    alert('AAA')
                }
            }
    });
  </script>
</body>
</html>

事件的捕获模式   capture

.capture没有时先触发里面的函数，在冒泡阶段触发外面函数
.capture存在时先触发外面函数，在捕获阶段触发里面的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="app">
       <!--插值语法-->
      <h1>Hello,{{who}}</h1>

      <!--使用事件的捕获模式  让事件在捕获阶段就执行(传统方式是先捕获再冒泡，在冒泡阶段执行函数)
          .capture没有时先触发里面的函数，在冒泡阶段触发外面函数
          .capture存在时先触发外面函数，在捕获阶段触发里面的函数-->
      <div class="box1" @click.capture="showMsg(1)" style='border: 1px solid red;width:200px; height:200px'>
                div1
          <div class="box2" @click="showMsg(2)" style='border: 1px solid #1c1919;width:100px; height:100px'>
                div2
          </div>
      </div>

  </div>

  <script>
    <!-- 3.创建Vue实例 -->
    const vm = new Vue({
        el:'#app',
        data() {
                return{
                    who:'Vue'
                }
            },

        methods:{
               
                showMsg(param){
                    alert(param)
                }
            }
    });
  </script>
</body>
</html>

只有event.target是当前操作的元素时才触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="app">
       <!--插值语法-->
      <h1>Hello,{{who}}</h1>

       <!-- 只有event.target是当前操作的元素时才触发事件-->
       <div class="demo1" @click.self="show($event)" style='border: 1px solid blue;width:200px; height:200px'>
       <button @click="show($event)" >点我</button>
       </div>

  </div>

  <script>
    <!-- 3.创建Vue实例 -->
    const vm = new Vue({
        el:'#app',
        data() {
                return{
                    who:'Vue'
                }
            },

        methods:{
             
                show(e){
                    alert(e.target)
                }
            }


    });
  </script>
</body>
</html>

点击“点我”按钮时

点击其他空白时

键盘事件

在输入框中输入内容后只有在键盘上按下特定的键才能弹出框来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="app">
        <h1>hello, {{who}}</h1>
        <p><input type="text" @keydown.enter="show1($event)"></p>
        <p><input type="text" @keydown.13="show1($event)"></p>
        <p><input type="text" @keydown.huiche="show1($event)"></p>
        <p><input type="text" @keydown.ctrl="show1($event)"></p>
  </div>
  <script>
      Vue.config.keyCodes.huiche = 13 // 自定义一个回车键的keyCode别名按键
    //3.创建Vue实例
    const vm = new Vue({
        el:'#app',
        data:{
            who:'Vue',
        },
        methods:{
                show1(e){
                    alert(e.target.value)
                }
            }
    });
  </script>
</body>
</html>

exact 修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="app">
        <h1>hello, {{who}}</h1>

         <!-- 即使alt或shift被一同按下，也会触发 -->
        <button @click.ctrl="msg('A')">A</button>

        <!-- 有且只有ctrl 被按下，才会触发 -->
        <button @click.ctrl.exact="msg('B')">B</button>
        <button @click.alt.exact="msg('C')">C</button>
        <button @click.shift.exact="msg('D')">D</button>

        <!-- 非系统按键被按下，才会触发 -->
        <button @click.exact="msg('E')">E</button>
  </div>
  <script>
     
    //3.创建Vue实例
    const vm = new Vue({
        el:'#app',
        data:{
            who:'Vue',
        },
        methods:{
               
                msg(param){
                    alert(param)
                }
            }
    });
  </script>
</body>
</html>

鼠标按钮修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初体验</title>
    <!-- 1.引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 2.准备一个容器 -->
  <div id="app">
        <h1>hello, {{who}}</h1>
        <button v-on:click="showClick">点我1(不传参)</button>
        <button @click.right="showClick">右键点我1(不传参)</button>
        <button @click="showClick($event,66)">点我2(传参)</button>
        <button @dblclick="showClick">双击点我3(不传参)</button>
  </div>
  <script>
    
    //3.创建Vue实例
    const vm = new Vue({
        el:'#app',
        data:{
            who:'Vue',
        },
        methods:{
                showClick(event,param){
                    alert(param)
                }
            }
    });
  </script>
</body>
</html>
知识大白
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue初体验
qq_45117205的博客
08-27 203
Vue基础体验
Vue 初体验
ILove_bugs的博客
11-22 317
第1阶段： html css 。 浮动、定位布局、mdeia（百分比）、响应式、flex、rem布局 <tagname key="value"></tagname> <tagname key="value" /> selector{ key:value; } 第2阶段： 得保证嵌套标签要合理 ，逻辑思维，编程思维。 声明变量、数据类型、运算符（算术、赋值、比较、逻辑、三目）、 声明函数( 参数、this )、分支语句（ if,switch ），..
VUE初体验
weixin_43487532的博客
12-13 110
vue体验
vue3.0初体验（项目搭建）
02-23
今天分享了vue-nextv3.0.0-beta.1版本不要太刺激哦6大亮点Performance：性能更比Vue2.0强。Treeshakingsupport：可以将无用模块“剪辑”，仅打包...基于vue-cli快速搭建Vue3.0项目2.Vue3.0基本特性体验3.集成vue-router
基于vue-ssr的静态网站生成器VuePress 初体验
08-27
基于Vue-SSR的静态网站生成器VuePress初体验 VuePress是基于Vue的轻量级静态网站生成器，旨在满足Vue自己的子项目文档需求。它提供了预加载的HTML，加载速度极佳，同时对SEO非常友好。VuePress由两部分组成：一个...
浅谈vue-cli 3.0.x 初体验
11-27
总结来说，Vue CLI 3.0.x 的改进主要体现在更友好的开发体验、更简洁的配置结构以及强大的多环境配置支持上。通过使用官方文档和最新的安装方法，开发者可以快速上手并充分利用这些新特性，提高开发效率，同时保持...
vue-cli3+typescript初体验小结
10-17
主要介绍了vue-cli3+typescript初体验小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1186
vue切换主题
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 764
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1370
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Vue的常见指令
m0_63624484的博客
07-09 566
它的作用就是我们可以动态的定义属性的值，比如常见的<img src = "1.jpg">我们如果想要修改图片就需要获取到DOM对象，然后再重新填充，但是如果使用v-bind，v-show作用和v-if一样，只是当它为true或者false都会生成DOM对象；style表示样式，同样我们也可以用vue绑定style，实现样式属性的动态生成。接下来，我们实现经常在网页上看见的多选项选择时，选到哪个，哪个就会高亮显示。所以说，vue主要是实现对数据的操作，而js是对DOM对象的操作。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 760
模糊搜索功能 每个网站都要用得到
vue vite+three在线编辑模型导入导出
regretTAT的博客
07-10 477
要实现一个类似于数字孪生的场景 可以在线、新增、删除模型 、以及编辑模型的颜色、长宽高 然后还要实现 编辑完后 保存为json数据 记录模型数据 既可以导入也可以导出
vue3 路由跳转新页面并传递参数与获取参数
Anlittlecat的博客
07-10 309
parmas的形式传参需在路由处定义。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 202
通过sm4对文件进行加解密，用户输入密码
Vue.js学习笔记（五）抽奖组件封装——转盘抽奖
summer_gf的博客
07-11 372
动态配置转盘组件开发，只需要改动数据，就自动生成转盘，减少UI和前端的工作量。
VUE export import
最新发布
mqiqe的专栏
07-13 794
在Vue.js项目中，export 和 import 是ES6（ECMAScript 2015）模块系统的一部分，用于在JavaScript文件中导出和导入模块（比如组件、函数、变量等）。这对于组织大型项目中的代码、提高代码的可复用性和可维护性非常重要。下面我将详细解释如何在Vue.js项目中使用export和import。
vue 搭建 pinia
淼淼不暴躁!
07-11 428
作用：简单来说（有了一个新的存储数据和方法的空间）中的数据，需要经过处理后再使用时，可以使用。此时开发者工具中已经有了。的实体，每个组件都可以。
vue proje inje
08-13
- *1* *2* *3* [Vue3通透教程【三】Vue3代码初体验找不同](https://blog.csdn.net/JHXL_/article/details/128790237)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值