前端第22天

最新推荐文章于 2024-07-04 16:37:43 发布

来地球玩啊

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量238

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/l_11789/article/details/130586513

版权

vue的基本用法

使用步骤

导入vue.jsscript脚本文件

在页面中声明一个将要被vue所控制的DOM区域

创建一个vm实例对象（vue实例对象）

<!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>1体验vue.js的基本用法</title>
</head>
<body>
  <!-- 2 声明要被vue说空着的DOM区域 -->
  <div id="app">
    {
  { username }}
  </div>
  <!-- 1 导入vue的脚本文件 -->
  <script src="lib/vue-2.6.12.js"></script>

  <!-- 3创建vue的实例对象 -->
  <script>
    const vm = new Vue({
     
      // 使用el属性指定要控制的区域
      el: '#app',
      // data指定要渲染的数据
      data: {
     
        username: 'ZS'
      }
    })
  </script>
</body>
</html>

vue的指令

指令的概念

指令是vue为开发者提供的模板语法，用于父主开发者渲染页面的基本结构

指令的六大分类

内容渲染指令

v-text：会覆盖元素默认文本内容的值

{ {}}：插值表达式，会保留文本默认内容，不会被覆盖。更常用

v-html：把带有htm标签的渲染成真正的html标签

<!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>内容渲染指令</title>
</head>
<body>
  <div id="app">
    <p>名字：{
  { username }}</p>
    <!-- 性别文字会被覆盖掉 -->
    <p v-text="gender">性别</p> 
    <hr>
    <p v-text="desc"></p>
    <p>{
  { desc }}</p>
    <p v-html="desc"></p>
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    const vm = new Vue({
     
      el: '#app',
      data: {
     
        username: '张三',
        gender: '男',
        desc: '<i style="color: blue;">abc</i>'
      }
    })
  </script>
</body>
</html>

属性绑定指令

v-bind：如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令

可以简写为英文的 :

<!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>属性绑定指令</title>
</head>
<body>
  <div id="app">
    <input type="text" v-bind:placeholder="inputValue">
    <hr>
    <img v-bind:src="imgSrc" alt="">
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    const vm = new Vue({
     
      el: '#app',
      data: {
     
        inputValue: '请输入内容',
        imgSrc: 'https://www.apple.com.cn/v/iphone-14/e/images/key-features/features/size/size_yellow__dnv9794q7loy_large.jpg'
      }
    })
  </script>
</body>
</html>

使用javascript表达式

在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算

<!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></title>
</head>
<body>
  <div id="app">
    <p>{
  { number + 1 }}</p>
    <p>{
  { ok ? 'TRUE' : 'FALSE' }}</p>
    <p>{
  { message.split('').reverse().join('') }}</p>
    <p :id="'list-' + id">xxx</p>
    <p>{
  { user.name }}</p>
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    new Vue({
     
      el: '#app',
      data: {
     
        number: 9,
        ok: '',
        message: 'ABC',
        id: 3,
        user: {
     
          name: 'ZS'
        }
      }
    })
  </script>
</body>
</html>

事件绑定指令

v-on：用来为DOM元素绑定事件监听，可以简写为@符号

事件对象 event

在原生DOM事件绑定中，可以在事件处理函数的形参处、接收事件独显evevt。通过，在v-on指令受绑定的事件处理函数，同样可以接受到事件对象event

绑定事件并传参

使用v-on指令绑定事件时，可以使用（参数, $e v e n t ）进行传参，$ event为事件对象占位符只能那么写

事件修饰符

事件修饰符	说明
.prevent	阻止默认行为(阻止a链接的跳转，阻止表单的提交)
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只能触发一次
.self	只有event.target是当前元素自身时触发事件处理函数

案件修饰符

监听键盘事件，.enter 和.esc 监听回车按键和监听esc按键。只能配合键盘进行操作

<!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>事件绑定指令</title>
</head>
<body>
  <div id="app">
    <h3>count值为：{
  { count }}</h3>
    
    <button v-on:click="add">+1</button>
    <!-- 绑定事件传参 必须是$event -->
    <!-- .prevent阻止默认行为 -->
    <button v-on:click.prevent="addCount(2, $event)">+2</button>
    <hr>
    <input type="text" @keyup.enter="submit" @keyup.esc="clearInput">
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    new Vue({
     
      el: '#app',
      data: {
     
        //计数器的数
        count: 0
      },
      methods: {
     
        add(e){
     
          let newBgColor = e.target.style.backgroundColor
          e.target.style.backgroundColor = newBgColor === 'red' ? '' : 'red'
          this.count++
        },
        //绑定事件传参 
        addCount(step, e) {
     
          let newBgColor = e.target.style.backgroundColor
          e.target.style.backgroundColor = newBgColor === 'blue' ? '' : 'blue'
          this.count += step
        },
        //获取文本框的最新值
        submit(e) {
     
          console.log('按下了enter键最新的值是：'+ e.target.value);
        },
        //清空文本框的内容
        clearInput(e) {
     
          console.log(e);
          e.target.value = ''
        }
      },
    })
  </script>
</body>
</html>

双向绑定指令

v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单数据

只能和表单数据一起使用！！！

v-model指令的修饰符

修饰符	作用
.number	自动键用户的输入值转换为数值类型
.trim	自动过滤用户输入的首位字符串，去除两端的空格
.lazy	在输入的时候不更新在提交的时候更新，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="

最低0.47元/天解锁文章

来地球玩啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端第22天

vue的基本用法使用步骤导入vue.jsscript脚本文件在页面中声明一个将要被vue所控制的DOM区域创建一个vm实例对象（vue实例对象）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c
复制链接

扫一扫