Vue.js04

最新推荐文章于 2024-07-22 15:13:59 发布

Dreamer635

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量449

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_59142649/article/details/121550549

版权

一、const的使用

1.const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改.

2.当我们修饰的标识符不会被再次赋值时，可以使用const来保证数据的安全性

3.在ES6开发中优先使用const，只用需要改变某一个标识符的时候使用let

4.注意一：一旦给const修饰的标识符被赋值之后，不能被修改

const name = 'Judy' //const赋值

name = 'Lily' //name的值将不会被修改

5.注意二：在使用const定义标识符时必须进行赋值

const name; //错误写法

6.注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性

const person ={

name: 'Lisa',

age: 24,

height: 1.70

}

person.name = 'Lusi'; //内部属性可修改

person.age = 40;

person.height = 1.72;

二、ES6对象字面量增强写法

（一）什么是字面量

1.字面量表示如何表达这个值，一般除去表达式，给变量赋值时，等号右边都可以认为是字

面量

2.字面量分为字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object

literal)，另外还有函数字面量(function literal)。

示例： var test="hello world!"; "hello world!"就是字符串字面量，test是变量名

const obj = { }; { } 里面的的内容为对象字面量

（二）对象字面量的增强写法

const name = 'Lucy';
const age = 18;
const height = 1.76;
const person = {
    name,
    age,
    height,
}

（三）函数的增强写法

const obj = {
    run(){
    
    },
    eat(){

    }
}

三、事件监听----v-on指令的使用

作用：绑定事件监听器
缩写：@(语法糖)
预期：Function || Inline Statement || Object
参数：event

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>
</div>
 
<script>
const app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods:{
      increment(){
        this.counter++
      }

      decrement(){
        this.counter--
      }
  },
})
</script>

v-on语法糖

<button @click="increment">+</button> //用@符号替换v-on
<button @click="decrement">-</button>

四、v-on参数问题

当通过methods中定义方法，以提供@click调用时，需要注意参数问题

如果该方法本身中有一个参数，那么方法后的()可以不添加，但是如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去

如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

<body>
    <div id="app">
        <!--1.事件调用的方法没有参数-->
        <button v-on:click="btn1click()">按钮1</button>
        <button v-on:click="btn1click">按钮1</button>
        <!--2.在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这时Vue会默认将浏览器生成的event事件对象作为参数传入到方法-->
        <button v-on:click="btn2click">按钮2</button>
        <!--3.如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件-->
        <button v-on:click="btn3click(123,$event)">按钮3</button>
      </div>
       
      <script>
      const app = new Vue({
        el: '#app',
        data: {
          message:'hello',
        },
        methods:{
            btn1click(){
                console.log("btn1click");
            },
            btn2click(event){
                console.log('----------',abc);
            },
            btn3click(abc,event){
                console.log('++++++++++',abc,event);
            }
        },
      })
      </script>
</body>

五、v-on的修饰符使用

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle- 中间滚轮事件
.{keyCode | keyAlias}-只当事件是从特定键触发时才触发回调
.native-监听组件根元素的原生事件

<div id="app">
        <!--.stop修饰符--> 
        <div @click.stop="divClick">//阻止冒泡
            <button v-on:click="btnClick">按钮</button>
        </div>
        <!--.prevent修饰符-->
        <br>
        <form action="baidu">
            <input type="submit" value="提交" @click.prevent="submitClick">//阻止默认事件
        </form>
        <!--.监听某个键盘的键帽-->
        <input type="text" @keyup.enter='keyUp'> //只当事件是从特定键触发时才触发回调
        <!--.once修饰符-->
        <button @click.once="btn2Click">按钮2</button>//只触发一次回调
    </div>
      <script>
      const app = new Vue({
        el: '#app',
        data: {
          message:'hello',
        },
        methods:{
            btnClick(){
                console.log("btnClick");
            },
            divClick(){
                console.log("divClick");
            },
            submitClick(){
                console.log("submitClick");
            },
            keyUp(){
                console.log("keyUp");
            },
            btn2Click(){
                console.log("btn2Click");
            }
        },
      })
      </script>

Dreamer635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js04

一、const的使用1.const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改.2.当我们修饰的标识符不会被再次赋值时，可以使用const来保证数据的安全性3.在ES6开发中优先使用const，只用需要改变某一个标识符的时候使用let 4.注意一：一旦给const修饰的标识符被赋值之后，不能被修改const name = 'Judy' //const赋值name = 'Lily' ...
复制链接

扫一扫