Vue的基本使用（一）

最新推荐文章于 2024-04-11 03:26:48 发布

艺术留白

最新推荐文章于 2024-04-11 03:26:48 发布

阅读量260

点赞数 1

文章标签： vue.js javascript 前端

本文链接： 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事件参数的注意点：

当方法的参数只有event一个事件参数的时候，调用的时候可以省略这个参数。
当方法参数除了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>

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

prevent: 阻止默认事件

stop：阻止事件冒泡

once：事件只触发一次

capture：使用事件的捕获模式

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

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