Vue的数据绑定 事件 键盘 ,以及创建项目改端口号

这篇具有很好参考价值的文章主要介绍了Vue的数据绑定 事件 键盘 ,以及创建项目改端口号。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、Vue的数据绑定

1、单向数据绑定:将Model绑定到View上,当通过JavaScript代码改变了Model时,View就会自动刷新。不需要进行额外的DOM

操作就可以实现视图和模型的联动

​ a、数据只保存一份

​ b、data—->DOM

​ (1)插值表达式:{{ 表达式 }},将表达式的值在View中显示出来

​ (2)v-bind:将标签的属性绑定到指定的变量上。简写方式: :属性名=’变量名’

2、双向数据绑定:是Vue的核心特征之一。将Model绑定到View上,同时将View和Model进行绑定。即当Model的数据发生改变时

View会自动更新;当View的数据发生改变时Model的数据也会更新。

强调:在Vue中只有表单元素才能实现双向绑定(input、textarea、select),实现指令是v-model

​ (1)文本框(‘text’)的绑定:和普通的变量进行绑定

​ (2)复选框(checkbox)的绑定:绑定的变量必须是数组

​ (3)单选框(radio)的绑定:绑定普通的变量

​ (4)下拉列表(select)的绑定:当下拉列表为单选时,绑定的变量为普通变量;当下拉列表为多选时,绑定的变量自动转换为数组

3、值绑定的时机(数据同步的时机):v-model指令可以实现Model和View的数据同步

​ (1).lazy(懒加载):在input失去焦点或按下回车键时才进行更新

vue 绑定按键,vue.js,javascript,前端

​ (2).number:将输入的数据转换成Number类型。在input中输入的虽然是数字,但实际是string,为了将字符串转换为数字,加

​ 上该修饰符实现自动转换

vue 绑定按键,vue.js,javascript,前端

​ 

vue 绑定按键,vue.js,javascript,前端

​ (3).trim:会自动过滤掉输入的首尾空格

vue 绑定按键,vue.js,javascript,前端

二、Vue的事件绑定:通过v-on指令绑定,v-on:原生的事件名(@原生事件名)

1、方法处理器方式:v-on:原生事件名 = 函数名

vue 绑定按键,vue.js,javascript,前端

2、内联语句处理器方式:本质是内联了javascript语句

vue 绑定按键,vue.js,javascript,前端

3、在内联语句中访问原生的DOM事件:

vue 绑定按键,vue.js,javascript,前端

4、事件绑定中的修饰符

Vue中的事件修饰符:
1.prevent: 阻止默认事件 (常用) ;
2.stop:阻止事件冒泡(常用) ;
3.once: 事件只他发一次(常用);
4.capture:使用事件的捕获模式;
5.self: 只有event.target是当前操作的元素是才触发事件;6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕:

​ (1).prevent :调用preventDefault()。阻止链接打开URL

vue 绑定按键,vue.js,javascript,前端

​ (2).stop :调用stopPropagation()。阻止事件传播(阻止事件冒泡)

​ (3)键值修饰符:在监听键盘事件时,需要知道键的keyCode,记忆不方便,可以通过修饰符来记录键值

​ enter、tab、delete、esc、space、up、down、left、right

vue 绑定按键,vue.js,javascript,前端

三、Class和Style的绑定

1、对象语法:给v-bind:class传递一个对象,来动态的改变class属性值

vue 绑定按键,vue.js,javascript,前端

2、数组语法:可以把一个数组传给v-bind:class,以应用一个class列表

vue 绑定按键,vue.js,javascript,前端

3、内联样式绑定:直接绑定style(v-bind:style)

​ (1)对象表示法:

vue 绑定按键,vue.js,javascript,前端

​ (2)数组表示法:

vue 绑定按键,vue.js,javascript,前端

四、Vue的过滤器:主要用于文本的格式化,或者数组数据的过滤与排序等

1、使用的位置:

​ (1)插值表达式中( 使用管道符‘|’ ):{{ message | filter }}

​ (2)在v-bind的绑定中( 使用管道符‘|’ ):

<div v-bind:title=" message| filter "></div>

2、定义的方式:

​ (1)全局过滤器:

​ Vue.filter(‘过滤器的唯一标识’,函数(value){

​ 过滤的代码

​ })

vue 绑定按键,vue.js,javascript,前端

​ (2)局部过滤器:在Vue实例内部通过filter属性定义的过滤器

vue 绑定按键,vue.js,javascript,前端

1.Vue中常用的按键别名:
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case (短横线命名)
3.系统修饰键(用法特殊) : ctrl、alt、shift、meta

(1).配合keyup使用: 按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发

(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键 (不推荐)
5.Vue,config.keyCodes.白定义键多- 键码,可以大定制按键别多

五、Vue脚手架的使用

一、环境安装

1、安装vue

      npm install vue

    2、安装Webpack:

             npm install webpack -g

关于Webpack:是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。要使用Webpack 前须先安装Node.js。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。

1、Vue脚手架:vue-cli的使用

​ (1)安装:npm i -g @vue/cli-init

​ (2)创建Vue项目(Vue2.0项目):

​ A、创建文件夹:vue2-demo

​ B、进入文件夹:cd vue2-demo

​ C、创建项目:vue init webpack 项目名

vue 绑定按键,vue.js,javascript,前端

2、创建项目的方式:

​ (1)使用vscode对项目进行编辑:

vue 绑定按键,vue.js,javascript,前端

 vue 绑定按键,vue.js,javascript,前端

启动服务器↑

更改端口号↓

 vue 绑定按键,vue.js,javascript,前端

更改后记得重启服务器!才能有用 

​ (2)使用Webstorm创建项目:

vue 绑定按键,vue.js,javascript,前端

vue 绑定按键,vue.js,javascript,前端

 如果打钩了就会有严格的代码规范,用起来很难受,建议不打钩↑

vue 绑定按键,vue.js,javascript,前端

修改默认的端口号 (这样写代码↓)

 vue 绑定按键,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-522337.html

到了这里,关于Vue的数据绑定 事件 键盘 ,以及创建项目改端口号的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue 项目中使用键盘回车按键触发事件

    我最近项目要求按下enter键就登录或者注册之类的触发,我不知道为什么用vue的 @click.enter这样的不管用,到现在都没整明白为啥,希望知道的给讲解一下. 我看了半天人家是给页面加了一个监听 然后在methods里面加上一个方法,监听这个方法,e.keyCode 是每个按键的编码,13是回车键

    2024年02月11日
    浏览(41)
  • vue 项目中使用键盘回车或空格按键触发事件

    话不多说上代码!!! 一开始以为很复杂,经过一番摸索和查找,发现也没有那么难,具体如下: 1、先在 created 里边开启键盘按键的监听事件,如下: 2、在 methods 里边添加按键之后需要执行的方法即可,具体如下: 解析:e.keyCode 是每个按键的编码,13是回车键,32是空格

    2024年02月11日
    浏览(44)
  • div绑定键盘点击事件

    为箭头绑定绑定键盘方向键 键盘上各按键对应的英文名

    2024年02月07日
    浏览(47)
  • canvas绑定键盘事件不会生效 + 解决办法

    目录 canvas绑定键盘事件不会生效 解决办法 1.如果canvas元素和windows长宽基本一致,可以通过在windows对象上绑定键盘事件来代替对canvas元素的监听与处理。 2.让canvas元素处于聚焦状态,并给它绑定键盘事件。 写贪吃蛇游戏时遇到一个问题:想的是给canvas绑定键盘事件,从而操

    2024年02月09日
    浏览(65)
  • tkinter如何绑定鼠标和键盘等事件

    Tkinter系列: GUI初步💎布局💎绑定变量💎绑定事件💎消息框 扫雷小游戏💎强行表白神器 控件和人通过事件来交互, Tkinter 中则通过 Bind 来绑定事件。例如 效果如下 其中, bind 用于绑定事件,第一个参数 Button-1 在鼠标左键点击时触发,后面的 lambda 表达式为触发后的函数

    2024年02月11日
    浏览(45)
  • 微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染

    关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有想学习的可以按照以下顺序查看 1.微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类) 2.微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染 3.微信小程序wxss相关介绍、全局配置和tabbar知识

    2024年02月10日
    浏览(58)
  • Vue.js核心概念简介:组件、数据绑定、指令和事件处理

    本文介绍了Vue.js的四个核心概念:组件、数据绑定、指令和事件处理。每个概念都通过一个简单的示例进行了详细的解释。通过学习这些概念,您将能够充分利用Vue.js的强大功能,构建高效、灵活的Web应用程序。 1 组件 组件是Vue.js的核心概念之一,它允许您将UI分解为相互作

    2024年02月04日
    浏览(56)
  • WPF中TextBox使用KeyBinding绑定命令,键盘事件

        最近在做一个扫码枪识别条形码的功能,TextBox文本按回车键或者是扫码枪识别条形码自动触发查询功能,由于架构采用的是MVVM的开发模式,所以,刚开始采用KeyBinding的方式绑定命令,然后实现该功能;代码如下: 对应的ViewModel中绑定命令事件,代码如下所示     初步

    2024年02月14日
    浏览(48)
  • Vue cli创建项目时键盘操作无效;vue3.0项目搭建自定义配置

    在创建vue3.0项目时,在建好的文件夹,鼠标右键 git bash 使用 vue create my-vue3.0创建新项目时,键盘方向键失效,无法选中对应的选项(交互提示符不工作) 方案一 使用电脑自带的 cmd 运行 vue create my-vue3.0。 方案一 在 git bash 窗口中用 winpty vue.cmd create demo 命令创建项目。只是换

    2024年04月09日
    浏览(43)
  • 【vue】笔记三:Vue基础语法以及数据绑定

    1. 插值 Vue中最常用的语法之一就是插值(interpolation),可用于显示文本、HTML等。在Vue中,插值的语法是使用双大括号和v-bind指令进行插值。 插值语法: 以上示例中的 message 可以是一个变量,也可以是一个表达式,都可通过Vue的数据绑定机制进行绑定。 2. v-bind指令 v-bind指令

    2024年02月06日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包