vue修炼之道——vue指令(本地应用)

最新推荐文章于 2024-02-04 23:46:58 发布

吾本樵夫

最新推荐文章于 2024-02-04 23:46:58 发布

阅读量169

点赞数

分类专栏： vue指令 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43317510/article/details/105425930

版权

vue指令同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

开发常见的网页效果

vue指令

1 .内容绑定，事件绑定

v-text:设置标签的文本值(textContext)
如果进行部分替换，使用{{}}方式。因为使用v-text会替换掉标签内部的所有数据。其次v-text里面拼接字符串的时候只能用单引号。而在插值表达式中的但双引号是都可以使用的。
v-html：设置标签的innerHTML
内容中有html结构会被解析为标签
v-text指令内容无论为什么，只会解析为文本
v-on：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法写在methods属性中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on指令基础</title>
</head>
<body>
<!--2. html结构-->
<div id="app">
  <!--单击事件-->
  <input type="button" value="v-on指令" v-on:click="devJava">
  <input type="button" value="v-on简写" @click="devGo">
  <!--双击事件-->
  <input type="button" value="双击事件" @dblclick="devvue">
  <h2 @click="changeFood">{{food}}</h2>
</div>
<!-- 1. 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
<script>
  // 3.创建vue实例
  var app = new Vue({
    el: "#app",
    data: {
      food: "西虹市炒蛋"
    },
    methods: {
      changeFood: function () {
        alert(this.food)
        console.log(this.food)
      },
      devJava: function () {
        alert("Java开发");
      },
      devGo: function () {
        alert("go开发")
      },
      devvue: function () {
        alert("vue开发")
      }
    }
  })
</script>
</html>

计数器实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计数器</title>
</head>
<body>
<!--html布局-->
<div id="app">
  <!--计数器功能区域-->
  <div class="input-num">
    <button type="button" value="-" @click="reduce">
      -
    </button>
    <span>{{num}}</span>
    <button type="button" value="+" @click="plus">
      +
    </button>
  </div>
</div>
<!-- 1. 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
  //实例化vue
  var app = new Vue({
    //通过el函数挂载到id为app的div标签上
    el: "#app",
    data: {
      num: 1
    },
    methods: {
      //增加
      plus: function () {
        if (this.num < 10) {
          this.num++;
        } else {
          alert("不要再点了，已经最大了。")
        }
      },
      //减少
      reduce: function () {
        if (this.num > 0) {
          this.num--;
        } else {
          alert("已经最小了")
        }
      }

    }
  })

</script>
</body>
</html>

在这里插入图片描述

总结

创建vue实例时：el(挂载点)、data(数据)、methods(方法)
v-on指令的作用时绑定事件，可以简写为@
方法中通过this关键字获取data中的数据
v-text指令的作用是设置元素的文本值，简写为{{}}
v-html指令的作用是设置元素的innerHTML

2.显示切换、属性绑定

v-show指令

根据表达式值的真假，切换元素的显示和隐藏
原理是修改元素的display。实现显示隐藏
元素后面的内容，最终都会解析为布尔值
值为true显示元素，值为false隐藏图片

v-if

根据表达值的真假，切换元素的的显示和隐藏（操作dom）
本质是通过操作dom元素来切换显示状态
表达式的值为true时，元素存在于dom树中，为false时，从dom树中移除

v-bind

为元素绑定属性（比如title，src，class）
完整写法 v-bind:属性名
简写的话可以直接省略：v-bind,只保留 :属性名

图片切换

列表数据使用数组保存
v-bind指令可以设置元素的属性，比如src
v-if和v-show都可以切换元素的显示状态，频繁切换用v-show

3.列表循环，表单元素绑定

v-for

v-for指令的作用是根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
item和index可以结合其他指令一起使用
数组长度更新会同步到页面上的，是响应式的。

v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数
自定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车

v-model

v-model的指令的作用就是便捷的设置和获取表单元素的值
获取和设置表单元素的值（双向数据绑定）
绑定的数据会和表单元素的值相关联
绑定的数据<——>表单元素的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model</title>
</head>
<body>

<!--html结构-->
<div ID="app">

  <button type="button" value="改变message的值" @click="changeMessage">修改message</button>
  <input type="text" v-model="message" @keyup.enter="getMessage">
  <h1>{{message}}</h1>

</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "长安马自达"
    },
    methods: {
      getMessage: function () {
        alert(this.message)
      },
      changeMessage:function () {
        this.message="后台开发正在学习vue前端开发"
      }
    }
  })

</script>
</body>
</html>

吾本樵夫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue修炼之道——vue指令(本地应用)

开发常见的网页效果vue指令1 .内容绑定，事件绑定v-text:设置标签的文本值(textContext)如果进行部分替换，使用{{}}方式。因为使用v-text会替换掉标签内部的所有数据。其次v-text里面拼接字符串的时候只能用单引号。而在插值表达式中的但双引号是都可以使用的。v-html：设置标签的innerHTML内容中有html结构会被解析为标签v-text指令内容无...
复制链接

扫一扫