慕容的工作随笔


分享技术经验、创业副业经验、AI教程、精品素材等

【转载】Vue 基础

2022年10月16日 0条评论 722次阅读 0人点赞 慕容

转自：https://blog.csdn.net/qq_23079469/article/details/112461253

Vue 常用属性

创建 Vue

var vm = new Vue({})

el

唯一根标签

  <div id="app">
    <p>{{name}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: '定义初始数据'
      }
    })
  </script>

data 初始数据

  <div id="app">
    <p>{{name}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: '定义初始数据'
      }
    })
  console.log(vm.$data.name)
  console.log(vm.name)
  </script>
  • 在 Vue 中想要定义变量就可以定义到 data 中
  • 访问数据可以通过 vm.$data.name 这样来访问数据，
  • 另外其实 Vue 的实例也代理了 data 对应，所以也可以console.log(vm.name)直接访问。
  • 如果想在页面上显示 data 里的数据， 最简单的就是用 “{{ }}” 绑定到页面。

methods 定义方法

 <div id="app">
    <!-- 为button按钮绑定click事件 -->
    <button @click="showInfo">请单击</button>
    <p>{{msg}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      methods: {
          // 定义事件处理方法showInfo
        showInfo () {
          this.msg = '触发单击事件'
        }
      }
    })
  </script>
  • 如果要定义方法就把方法放到methods里。
  • 这里在页面通过 @click=“showInfo” 让按钮的点击绑定了showInfo事件。
  • 当data数据改变时， 页面上所绑定的数据页面也会实时的进行改变。

computed 计算属性

当需要一些数据随着其他数据的改变而改变时就需要使用到 computed。

 <div id="app">
    <p>总价格：{{totalPrice}}</p>
    <p>单价：{{price}}</p>
    <p>数量：{{num}}</p>
    <div>
      <button @click="num == 0 ? 0 : num--">减少数量</button>
      <button @click="num++">增加数量</button>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        price: 20,
        num: 0
      },
      computed: {
        // 总价格totalPrice
        totalPrice () {
          return this.price * this.num
        }
      }
    })
  </script>

watch 计算属性

当数据发生变化时，触发事件使用 watch。

  <div id="app">
    <!-- input中的v-model用于在表单控件元素上创建双向数据绑定 -->
    <input type="text" v-model="cityName">
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        cityName: 'shanghai'
      },
      // 使用watch监听cityName变化
      watch: {
        cityName (newName, oldName) {
          console.log(newName, oldName)
        }
      }
    })
  </script>

computed 和 watch 区别

  • computed 是计算属性；watch 是监听一个值的变化执行对应的回调
  • computed 函数所依赖的属性不变的时候会调用缓存；watch 每次监听的值发生变化时候都会调用回调
  • computed 必须有 return，watch 可以没有。
  • computed 当一个属性受多个属性影响的时候使用；例如购物车商品结算；watch 当一条数据影响多条数据时使用，例如搜索框。
  • computed 不支持异步，watch 支持。

filters 过滤器

有两种方式使用，第一种是在插值表达式中使用，另一种是 v-bind。

  <div id="app">
    <div>{{message | toUpcase}}</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'helloworld'
      },
      filters: {
        // 将 helloworld 转换为 HELLOWORLD
        toUpcase (value) {
          return value ? value.toUpperCase() : ''
        }
      }
    })
  </script>
  <div id="app">
    <div v-bind:id="dataId | formatId">helloworld</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        dataId: 'dff1'
      },
      filters: {
        formatId(value) {
          // 字符串处理
          return value ? value.charAt(1) + value.indexOf('d') : ''
        }
      }
    })
  </script>

Vue 数据绑定

绑定内链样式

通过 v-bind 将样式绑定给 DOM

<div v-bind:style="{backgroundColor:pink,width:width,height:height}">
  <!-- 绑定样式对象 -->
  <div v-bind:style="myDiv"></div>
</div>

绑定样式类

 <div id="app">
    <div v-bind:class="{box}">我是box
      <div v-bind:class="{inner}">我是inner1</div>
      <div v-bind:class="{inner}">我是inner2</div>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        box: 'box',
        inner: 'inner'
      }
    })
  </script>

Vue 内置指令

v-model

绑定的值任意一方改变，所有都改变。

  <div id="app">
    <input type="text"  v-model="msg">
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'v-model指令'
      }
    })
  </script>

v-text

在 DOM 原始内部插入文本内容时使用。

  <div id="app">
    <p v-text="msg"></p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是v-text'
      }
    })
  </script>

v-html

<div id="app">
    <div v-html="msg"></div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '<h2>我是v-html</h2>'
      }
    })
  </script>

v-bind

和 v-model 一样是用来绑定数据的，但是这个数据改变时，绑定的数据并不会一起改变， 两个数据是分离的对象。

<div id="app">
    <input v-bind:value="msg">
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是v-bind'
      }
    })
</script>

v-model 与 v-bind 区别

  • v-bind 是单向绑定，用来绑定数据和属性以及表达式，数据只能从 data 流向页面。
  • v-model 是双向绑定，数据能从 data 流向页面，也能从页面流向 data。
  • v-bind 可以给任何属性赋值，v-model 只能给表单类，也就是具有 value 属性的元素进行数据双向绑定，如 text、radio、checkbox、selected。
    这个原因也很好理解，从页面流向 data，v-model 是捕获用户的输入值，如果没有 value,捕获不了，所以这个流向没有意义，v-model 就是收集 value 值。

v-on

对各种事件进行绑定。

  <div id="app">
    <p>{{msg}}</p>
    <button v-on:click="showInfo">请单击</button>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {msg: '请单击按钮查看内容'},
      methods: {
        showInfo () {
          this.msg = '我是v-on指令'
        }
      }
    })
  </script>

v-for

常用于在页面上循环显示列表。

  <div id="app">
    <div v-for="(item,key) in list" data-id="key">
      索引是：{{key}}，元素内容是：{{item}}
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3]
      }
    })
  </script>

v-if 和 v-show

两个指令都是用于元素的动态显示或隐藏。
v-if 是直接对原始元素进行删除和重建；v-show 是使用 display 进行隐藏。所以性能上来说 v-show 的性能更好。

  <div id="app">
    <div v-if="isShow" style="background-color:#ccc;">我是v-if</div>
    <button @click="isShow=!isShow">显示/隐藏</button>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isShow: true
      }
    })
  </script>

Vue 事件

事件监听

在触发事件时执行 JavaScript 代码

v-on 可以直接执行 JavaScript 代码。

<div id="app">
    <button v-on:click="count+=Math.random()">随机数</button>
    <p>自动生成的随机数是{{count}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 0
      }
    })
  </script>

使用键盘修饰符监听按键

<div id="app">
    <input type="text" v-on:keyup.enter="submit">
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        submit () {
          console.log('表单提交')
        }
      }
    })
  </script>

事件修饰符

.stop 阻止事件冒泡

以下代码默认是会触发两个事件的。使用 .stop 可以阻止父级原始事件的触发。

  <div id="app">
    <div v-on:click="doParent">
      <button v-on:click="doThis">事件冒泡</button>
      <button v-on:click.stop="doThis">阻止事件冒泡</button>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: { 
        doParent () {
          console.log('我是父元素单击事件')
        },
        doThis () {
          console.log('我是被单击元素事件')
        }
      }
    })
  </script>

.prevent 阻止默认事件行为

有些 html 具有自身的特性，比如 a 标签，点击时会自动跳转，假如自动跳转与事件发生冲突，可以使用 .prevent 阻止 a 标签的默认行为。

  <div id="app">
    <a href="https://www.baidu.com" v-on:click.prevent>阻止默认行为</a>
    <a href="https://www.baidu.com">不阻止默认行为</a>
  </div>
  <script>
    var vm = new Vue({
      el: '#app'
    })
  </script>

.capture 事件捕获

默认的冒泡顺序是先执行内部事件再执行外部事件，而事件捕获是相反的。 假如想先执行外部事件，则可以加上 .capture，让其绑定的是事件捕获。

<div id="app">
    <div v-on:click.capture="doParent">
      <button v-on:click="doThis">事件捕获</button>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        doParent () {
          console.log('我是父元素的单击事件')
        },
        doThis () {
          console.log('我是当前元素的单击事件')
        }
      }
    })
  </script>

.self 自身触发

点击 b 区域，触发 doThis 事件方法执行，点击 d 区域时doThis 和 doParent 会以此执行。

<div id="app">
    <div class="Odiv1" v-on:click.self="doParent">a
      <div class="Odiv2" v-on:click="doThis">b</div>
    </div>
    <div class="Odiv1" v-on:click="doParent">c
      <div class="Odiv2" v-on:click.self="doThis">d</div>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: { 
        doParent () {
          console.log('我是父元素的单击事件')
        },
        doThis () {
          console.log('我是当前元素的单击事件')
        }
      }
    })
  </script>

转自：https://www.ddpool.cn/article/53287.html
.self 可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>self</title>
 <script src="vue.js"></script>
 <!--'''''''''''''''''''请自行引入vue.js-->
</head>
<style type="text/css">
 * {
  margin: 0 auto;
  text-align:center;
  line-height: 40px;
 }
 div {
  width: 100px;
 }
 #obj1 {
  background: deeppink;
 }
 #obj2 {
  background: pink;
 }
 #obj3 {
  background: hotpink;
 }
 #obj4 {
   background: #ff4225;
  }
</style>
<script src="vue.js"></script>
</head>
<body>
<!--点击obj4的时候会分别显示： obj4、 obj3、 obj1；
.self会监视事件是否是直接作用到obj2上，若不是，则冒泡跳过该元素，-->
<div id="content">
 <div id="obj1" v-on:click="doc">
  obj1
  <div id="obj2" v-on:click.self="doc">
   obj2
   <!--只有点击obj2才可以出发其点击事件。-->
   <div id="obj3" v-on:click="doc">
    obj3
    <div id="obj4" v-on:click="doc">
     obj4
    </div>
   </div>
  </div>
 </div>
</div>
<script type="text/javascript">
 var content = new Vue({
  el: "#content",
  data: {
   id: ''
  },
  methods: {
   doc: function () {
    this.id= event.currentTarget.id;
    alert(this.id)
   }
  }
 })
</script>
</body>
</html>

.once 只触发一次

当执行事件执行只一次时，使用 .once。

  <div id="app">
    <button v-on:click.once="doThis">只执行一次</button>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        doThis () {
          console.log('我是当前元素的单击事件且只执行一次')
        }
      }
    })
  </script>
点赞
No Tag
最后编辑：2022年10月16日

发表回复

电子邮件地址不会被公开。必填项已用 * 标注