Vue第三天

最新推荐文章于 2024-10-02 05:39:15 发布

APinBom

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量405

点赞数

分类专栏： Vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_51649346/article/details/121498397

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2021.11.23

一、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>Document</title>
    <script src='vue.js' type="text/javascript"></script>
</head>
<body>
    <span v-once>{{msg}}</span><!--v-once，msg的值第一次被渲染改变后将不会在被改变-->
    <p>USing mustaches:{{rawHtml}}</p><!--这里显示的是rawHtml全部内容-->
    <P>Using v-html:<span v-html='rawHtml'></span></P><!--这里显示的是真正的html代码，此处显示的是红色字体的This-->
    <!--例如我在rawHtml写的是<span style="color:red">This</span>-->
    <!--v-blind的意义是动态绑定
    v-if的意义与if一样，会根据表达式的值来判断真假<p v-if='seen'>A</p>值为seen即为真也就是true
    v-on监听事件，<button v-on:click="XXX"></button>
    修饰符:
    都是以.修饰符的形式,例如<a v-on.once:click="XXX"></a>
    once只执行一次
    prevent防止程序自己提交,不会执行默认方法
    stop阻止函数传递
    passive的作用于prevent相反，主要用于移动端，当我们手触屏的时候，要等待浏览器去查询preventDefault有没有阻止事件，然后在给予你反馈，这样就会造成延迟，用户体验变差
    所以在加上passive=true后当你触碰时，浏览器不会查询，不会阻止默认事件,直接给予你响应，多用于移动端
    capture和self主要是函数顺序问题，capture先执行父级的函数，self只执行子级的函数，栗子:
    <div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-color: black;">
			<div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
				123
			</div>
		</div>
先执行div1在执行div2

<div v-on:click.self='alert("1")' style="width: 100%;height: 45px;background-color: black;">
			<div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
				123
			</div>
		</div>
只执行div2

v-bind的缩写为:----v-bind:href===:href
v-on的缩写为@---v-on:href===@href
    -->


 <script type="text/javascript">
var vm=new Vue({
    
})

 </script>   
</body>
</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>Document</title>
    <script src='vue.js' type="text/javascript"></script>
</head>
<body>
    <div id="example">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
      </div>
<script type='text/javascript'>
      var vm = new Vue({
        el: '#example',
        data: {
          message: 'Hello'
        },
        computed: {/*computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
    computed比较适合对多个变量或者对象进行处理后返回一个结果值，
    也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，
    只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
    与watch的区别在于，watch写在data里，并且只能监控一个变量或者对象*/
          // 计算属性的 getter
          reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
          }
        }
      })
    </script>
</body>
</html>

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，
也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，
只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch的区别在于，watch写在data里，并且只能监控一个变量或者对象