Vue的基本使用（一）

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

一、使用IDEA开发Vue

创建Vue工程

在这里插入图片描述
在这里插入图片描述
新建工程，选择JavaScript->Vue.js->Next
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

最后点击Apply->OK。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
出现这个页面则表示Vue项目搭建成功。

二、基本语法

1、入门案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初始Vue</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <!-- 准备一个容器
      容器中的代码我们称之为【Vue模板】
  -->
  <div id="root">
    <!-- 双大括号里边只能写js表达式（语法中规定的） -->
    <h1>Hello {{name}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false

    // 创建Vue实例,()中传入配置对象
    new Vue({
      el: '#root', // el用于指定当前Vue为哪个容器服务，值通常为css选择器字符串
      data: { // data中的数据只能用于指定的那个el使用
        name: '张三'
      },
    });

    // 我们需要注意的是：一个Vue实例只能接管一个容器，同样的一个容器只能被一个Vue实例接管
  </script>
</body>
</html>

在这里插入图片描述

2、模板语法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板语法</title>
  <script type="text/javascript" src="../js/vue.js"></script>
<body>
  <!-- 
    插值语法：
      用于解析标签体中的内容
    指令语法：
      用于解析标签体（包括：标签属性、标签体内容、绑定事件）
   -->
  <div id="root">
    <h1>插值语法</h1>
    <h1>你好 {{name}}</h1>
    <hr>
    <h1>指令语法</h1>
    <!-- v-bind 可以动态的绑定任意一个属性值，它可以简写为 : -->
    <a v-bind:href="url">点击跳转</a>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        name: '张三',
        url: 'http://www.baidu.com'
      },
    });
  </script>
</body>
</html>

模板语法：模板可以简单理解为一个可重复利用的页面或者组件。而语法就是表达数据需要用到的格式。

3、数据绑定

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据绑定</title>
  <script type="text/javascript" src="../js/vue.js"></script>
<body>
  <div id="root">
    <h1>普通写法</h1>
    <span>单向数据绑定</span>
    <input type="text" v-bind:value="name">
    <br>
    <span>双向数据绑定</span>
    <!-- v-model 只能应用在表单类元素上（输入类元素）
        这类元素都有 value 值，而我们的 v-model 恰好是针对value的
        v-model:value 可以简写为 v-model
    -->
    <input type="text" v-model:value="name"><br>

    <h1>简写形式</h1>
    <!-- 简写形式 -->
    <span>单向数据绑定</span>
    <input type="text" :value="name"><br>
    <span>双向数据绑定</span>
    <input type="text" v-model="name"><br>

  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        name: '张三',
        url: 'http://www.baidu.com'
      },
    });
  </script>
</body>

</html>

Vue中数据绑定，可以有两种形式：

数据的单向绑定：v-bind，它可以读取data中的数据，但是无法修改data中的数据。简写形式：:

数据的双向绑定：v-model:value，它不但可以读取data中的数据，还可以修改data中的数据。简写形式：v-model。v-model 只能应用在表单类元素上（输入类元素）这类元素都有 value 值，而我们的 v-model 恰好是针对value的。

3、el和data的两种书写形式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>el和data的两种写法</title>
  <script type="text/javascript" src="../js/vue.js"></script>
<body>
  <div id="root">
    <h1>你好 {{name}}</h1>
    <hr>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    // const x = new Vue({
    //   // el: '#root', // 除了使用el来指定容器，除此之外还可以通过$mount来挂在到容器上去
    //   data: {
    //     name: '张三',
    //   },
    // });
    // x.$mount("#root");

    // data的第二种写法
    new Vue({
      el: '#root',
      data () { // 我们这里的函数只能是普通函数，不能是箭头函数。
        // 因为箭头函数里边的this是windows，普通函数中的是Vue实例
        return {
          name: '张三'
        }
      },
    })
  </script>
</body>
</html>

el：

​ 方式一：在创建Vue实例对象的时候，在配置对象中写清楚el，即：Vue实例需要接管的容器。

​ 方式二：在创建的实例对象之后，使用$mount(“容器”)，将Vue实例对象挂载上去。

data：

​ 方式一：使用方法的形式，使用return来返回一个数据对象（推荐）。

​ 方式二：使用对象方式。

4、MVVM模型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MVVM模型</title>
  <script type="text/javascript" src="../js/vue.js"></script>
<body>
  <!-- 
      1. M ： Model模型
      2. V ： View视图
      3. VM ： ViewAndModel视图模型
      model：可以理解为数据
      view: 我们的页面
      ViewAndModel: Vue实例
      补充：
        我们在前边说过双大括号里边可以写表达式语法，在这里我们更加深入的理解，双大括号里边可以写
        我们Vue里边所有的东西（属性），他在我们的vue模板（html页面）中都可以被使用。
   -->
  <div id="root">
    <h1>学校名称：{{name}}</h1>
    <h1>学校地址：{{address}}</h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#root',
      data: {
        name: '北大',
        address: '北京'
      },
    });
  </script>
</body>
</html>

5、事件处理

5.1、键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>键盘事件</title>
  <script type="text/javascript" src="../js/vue.js"></script>
<body>

  <!-- Vue提供的按键别名
      回车 => enter
      删除 => delete（捕获“删除”和退格”键)
      退出 => esc
      空格 => space
      换行 => tab (特殊，必须配合keydown去使用)
      上   => up
      下   => down
      左   => left
      右   => right
   -->
  <!-- 注意：
      Vue未提供别名的按键，我们可以通过按键原始的key值去绑定，
      但要将其驼峰的形式转换为xxx-xx(中间用短横线命名)
      例：切换大小写的Caps键，它的键名为：CapsLock,
          我们应该将其写为 caps-lock，当然它对应的键值数也可以
  -->
  <!-- 除了Vue提供的别名之外，他也允许我们自定义别名
    Vue.config.keyCodes.别名 = 键值数
  -->
  <div id="root">
    <h2>欢迎{{name}}</h2>
    <!-- 当我们的键盘事件需要按键组合触发的时候，我们键盘事件也可以连着写 -->
    <input type="text" v-model="name" @keydown.ctrl.x="showInfo">
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        name: '张三',
      },
      methods: {
        showInfo (event) {
          console.log(this.name);
          console.log(event.key, event.keyCode);
        }
      }
    });
  </script>
</body>
</html>

在Vue3中，使用键的数字代号，已经被禁用。

5.2、事件的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件的基本使用</title>
  <script type="text/javascript" src="../js/vue.js"></script>
<body>
  <div id="root">
    <h2>欢迎{{name}}</h2>
    <button v-on:click="showInfo1" id="1">点我提示信息1(不传参)</button>
    <!-- 简写形式 -->
    <button @click="showInfo2(123,$event)" id="2">点我提示信息2(传参)</button>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        name: '张三',
      },
      methods: {
        // 方法可以有参数。如果我们方法在只有一个参数的情况下，调用的时候不传参，那个这个参数默认传入的
        // 就是event事件对象
        showInfo1 (event) {
          alert(event.target.id)
          alert('同学你好！');
        },
        // 如果我们想要在有参数的情况下还传入event，那么我们在调用的时候，传入参数$event
        showInfo2 (number, a) {
          console.log(number)
          console.log(a)
        }
      }
    });
  </script>
</body>
</html>

​ 在Vue中，我们想要使用事件来响应处理某个操作，可以在Vue实例中定义method对象，在method对象中定义事件。

​ 对象中可以写很多属性，当然也就可以定义很多方法。

v-on:click：该语法可以用来通过点击触发事件，后边的值是方法名(有参数的时候需要带上参数)。简写：@click。

有关event事件参数的注意点：

  1. 当方法的参数只有event一个事件参数的时候，调用的时候可以省略这个参数。
  2. 当方法参数除了event还有其他参数的时候，调用的时候不可以省略event参数，且这个event参数必须为$event。

5.3、事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件修饰符</title>
  <script type="text/javascript" src="../js/vue.js"></script>
<body>
  <!-- Vue常用的事件修饰符
      1. prevent: 阻止默认事件
      2. stop： 阻止事件冒泡
      3. once： 事件只触发一次
      4. capture：使用事件的捕获模式
      5. self:  只有event.target是当前操作的元素是才触发事件;
      6. passive: 事件的默认行为立即执行,无需等待事件回调执行完毕;
  -->
  <!-- 需求：当我们点击按钮的时候使我们的页面不发生跳转 -->
  <div id="root">
    <h2>欢迎{{name}}</h2>
    <!-- 阻止页面发生跳转方式2 -->
    <a href="http://www.baidu.com" @click.prevent="showInfo1">点我提示信息</a>
    <div @click="showInfo1">
      <!-- 阻止事件冒泡 -->
      <!-- 修饰符可以连着写 -->
      <button @click.stop.prevent="showInfo1">点我提示信息</button>
    </div>
    <!-- 事件只触发一次 -->
    <button @click.once="showInfo1">点我提示信息</button>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        name: '张三',
      },
      methods: {
        showInfo1 (event) {
          // 阻止页面发生跳转方式1
          // event.preventDefault();
          alert('同学你好');
        }
      }
    });
  </script>
</body>
</html>

事件修饰符可以修改我们有些元素的某些默认行为：

  1. prevent: 阻止默认事件

  2. stop： 阻止事件冒泡

  3. once： 事件只触发一次

  4. capture：使用事件的捕获模式

  5. self: 只有event.target是当前操作的元素是才触发事件;

  6. passive: 事件的默认行为立即执行,无需等待事件回调执行完毕;

如果文章中有描述不准确或者错误的地方，还望指正。您可以留言📫或者私信我。🙏
最后希望大家多多 关注+点赞+收藏^_^，你们的鼓励是我不断前进的动力！！！
感谢感谢~~~🙏🙏🙏

艺术留白
关注
Vue的基本使用
weixin_44529746的博客
10-31 3193
社区资料：Vue：Vue.js专业中文社区 vue官方手册：API — Vue.js 一、vue的介绍 vue是一套构建用户界面的渐进式框架，Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 vue是基于MVVM（M:model V:view VM:viewmodel）设计模式，支持数据的双向绑定(v-model) 补充： MVC设计模式： M model 数据层 V view 视图层 C control控制层
学习笔记-Vue 组件的运用（模板技术）
LearnTech_123的博客
07-24 904
自定义组件
Vue的模板语法(双大括号表达式、插值、v-bind 指令、v-on、指令缩写)
Argonaut_的博客
02-20 5691
相信模板语法大家多少都有所接触，例如百度模板引擎、ejs 等等。同样 Vue.js 也使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析，通俗的讲 Vue 模板语法就是在使用 Vue.js 开发时，你可以写在 HTML 元素上的操作语法，让你开发更高效，例如：绑定样式，循环出元素列表等。
分享58个Vue模板源码总有一个是你想要的
最新发布
zy19830907的博客
08-20 1894
基于 vue3 + vite + pinia + vue-router + element-plus 开发的管理系统模板，使用了最新的 setup 语法。基于vue3+elementPlus+vuex+vue-router，vue3版本的vue-element-admin管理平台模板，简洁，拿来即用。此项目是集成vue3 + vite + Element-Plus + Pinia + vue-router的后台管理系统的模板工程。qiankun + vue + react + angular 模板；
『VUE』03. 模板语法 使用js与插入html（详细图文注释）
MZH
03-28 2689
『VUE』03. 模板语法 使用js与插入html（详细图文注释）
Vue 基础模板语法
ITmanba的博客
08-10 829
模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上
Vue.js 模板使用方法
weixin_38234923的博客
04-22 1098
Vue.js 模板使用方法主要内容 1. 全局模板 和 局部模版 2. 组件传入自定义数据props 3. 父组件向子组件传数据 4. 子组件向父组件传数据 5. 自定义事件形式HTML部分<div id="app"> <h3>自定义的下拉框</h3> <!-- 查询框使用list1的数据 --> <custom-select
vue脚手架及vue-router基本使用
08-27
本文将详细介绍如何使用 Vue CLI 和 Vue Router 进行基本操作。 首先，确保已安装 Vue CLI。在安装好 Vue CLI 并执行 `cnpm install`（推荐使用 cnpm，因为它比 npm 更快，且更少出现安装问题）之后，你可以开始...
Vue中使用Sortable的示例代码
08-27
Sortable库是一个开源的JavaScript库，提供了拖拽排序的功能，可以与Vue结合使用来实现复杂的拖拽排序功能。 knowledge point 1:Sortable库的基本使用 Sortable库提供了基本的拖拽排序功能，可以直接在Vue组件中...
vue基本使用–refs获取组件或元素的实例
01-19
使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods 添加ref属性 这是H1 <hello ref=ho></hello> <...
在vue中使用setInterval的方法示例
10-17
知识点一：setInterval的基本使用 setInterval函数是JavaScript提供的一个全局函数，它可以用来设置一个定时器，按照指定的时间（以毫秒为单位）周期性地执行某些代码。在Vue项目中，setInterval可以用来实现定时...
Vue基础之模板语法介绍
m0_73647713的博客
09-18 1054
上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。
关于使用vue.js的模板渲染时出现一瞬间的设置的模板的解决方案
lsh499742959的专栏
04-26 3150
本人在使用vue的时候，偶然发现多次刷新或者网络加载缓慢的时候，会一瞬间出现设置的模板。本人有点强迫症，就想把这问题解决了，试了隐藏掉模板代码。           说干就干，我就讲模板那块给用css隐藏了，可是结果悲剧了，直接读取不到模板了。这个方法看来是行不通了，我也不知道该咋弄了，暂时就先放下了。           之后，在做另外一个项目的时候，又遇见这个问题了，这下我就去网上查，查来
推荐6个实用的Vue模板
热门推荐
m0_45407251的博客
07-27 1万+
推荐6个实用的Vue模板
什么是Vue模板？如何使用Vue模板？
wzxue1984的博客
07-25 1374
Vue模板语法简单易懂，允许您在模板中使用Vue指令和表达式来实现动态数据渲染和交互。使用Vue模板，您可以将数据和行为与界面进行关联，实现灵活且动态的用户界面。计算属性和方法：除了简单的数据绑定外，可以在模板中使用计算属性和方法。计算属性是基于Vue实例的响应式数据进行计算得出的属性，方法则是在Vue实例中定义的函数。插值用于将数据动态地展示在模板中，双向数据绑定用于将表单元素的值与Vue实例的数据进行双向绑定。使用指令：Vue提供了一系列指令，用于在模板中实现各种功能。定义模板：在Vue实例中，使用。
2024，排名前 15 的 Vue 后台管理模板，太厉害了
m0_59117112的博客
03-20 3863
主要特点：基于Bootstrap 4160 多个自定义元素响应式设计高度可定制的侧边栏菜单。
收集22种开源Vue模板和主题框架「干货」
weixin_52546522的博客
03-19 2630
在Internet上搜索模板和主题时，很难找到免费的Vue资源。 即使您不在乎质量，它们似乎也很难被发现，并出于好奇而感动，我花了数小时在Google和Github上四处挖掘，结果得到了收集22种开源Vue模板和主题框架集合。我不会对此打赌，但是它们也是高质量的资源。 Bootstrap Vue 现场演示： https://bootstrap-vue.org/ github**：**https://github.com/bootstrap-vue/bootstrap-vue BootstrapVue&nb
Vue 模板
qq030128的博客
04-01 630
Vue模板语法
手把手教程-使用idea创建vue项目
Wang_ning__的博客
10-24 1万+
小编在第一次通过IDEA使用Vue创建脚手架时，对于网上那么多方法真实头大，在经过多次的测试后，终于有一种简单直接的方法，费话不多说，上操作方法和相应的截图。
Vue基本使用
05-30
以下是 Vue 的基本使用方法： 1. 引入 Vue.js 库 ```html <script src="https://cdn.jsdelivr.net/npm/vue"> ``` 2. 创建 Vue 实例 ```javascript var app = new Vue({ // options }) ``` 在实例化 Vue 时，你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

艺术留白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值