首页 > 其他分享 >Vue-基本语法及事件绑定

Vue-基本语法及事件绑定

时间：2023-09-20 21:25:36浏览次数：54  
标签：vue 绑定 语法 Vue nbsp message data

一.基本语法

v-bind绑定：

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令

代码展示：

<div id="app">
  <span v-bind:title="message" v-html="tips">
  </span>
</div>
<script>
  let vue = new Vue({
    el: "#app",
    data: {
      message: "hello,world!",
      tips: "鼠标悬浮则有动态提示信息！"
    }
  });
</script>

 

v-bind:title = " " 绑定一个数据，使得在鼠标悬浮时，提示hello，world

v-html = " " 写入一个绑定的一个数据到当前的结点下

v-if判断

这里的if判断和Java中是差不多的，只是写法上有差异，并且它处于前端的位置，所以很特别

代码展示：

<div id="app">
<h2 v-if="flag">This&nbsp;&nbsp;&nbsp; is &nbsp;&nbsp;&nbsp;ok</h2>
  <h2 v-else>This&nbsp;&nbsp;&nbsp; is &nbsp;&nbsp;&nbsp;no</h2>
</div>
<script>
  let vue = new Vue({
    el: "#app",
    data: {
      flag: true
    }
  });
</script>

 

其中：

v-if = " "，在英文引号中要装的是布尔值，我们在js代码中给变量flag定义的就是一个布尔值

v-else，用来执行条件为假的代码块

v-else-if判断：

v-else-if 适用于多条件判断，也就是目标有多个条件分支时，可以穿插v-else-if来使得分支路径变多

代码展示：

<div id="app">
<h2 v-if="flag === 'A'">This&nbsp;&nbsp;&nbsp; is &nbsp;&nbsp;&nbsp;A</h2>
<h2 v-else-if="flag === 'B'">This&nbsp;&nbsp;&nbsp; is &nbsp;&nbsp;&nbsp;B</h2>
<h2 v-else>This&nbsp;&nbsp;&nbsp; is &nbsp;&nbsp;&nbsp;C</h2>
</div>
<script>
  let vue = new Vue({
    el: "#app",
    data: {
      flag: 'A'
    }
  });
</script>

 

如上：

v-if的英文引号中装的是表达式，虽然结果依旧是布尔值，但是写法不同

通过v-else-if不断增加，分路也会变多，同时它的引号内也需要一个布尔值或者表达式

v-for 循环：

vue的循环和Java中的forEach语法差不多

<div id="app">
<li v-for="entity in args">
    {{entity.message}}
</li>
</div>
<script>
  let vue = new Vue({
    el: "#app",
    data: {
     args: [
         {message: '原神'},
         {message: '启动'},
         {message: '原来，你也玩原神'}
     ]
    }
  });
</script>

 

在vue代码中，我们构造了一个args数组，它的内部存储了一堆对象，在model层存储的，需要在view拿取

首先，使用v-if指令，其中内容 entity in args ；args是modle层的数组，而entity是view层拿取的数组对象，后面通过 {{}}取值每个对象对应的值

其中，对象被拿取完，循环也就结束了

<li v-for="(entity,index) in args">
    {{entity.msg}}---{{index}}
</li>

 

如上

for循环顺便拿取对应对象的下标

二.事件绑定

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。

定义的函数只能位于vue对象的methods属性中，如果定义到其它地方就识别不到，这也是规范

代码展示：

<div id="app">
  <button v-on:click="alterTips">点击即弹窗</button>
</div>
<script>
  let vue = new Vue({
    el: "#app",
    data: {
      message: '发生点击事件'
    },
    methods: {
      alterTips: function () {
        alert(this.message);
      }
    }
  });

 

vue中的函数构成：函数名：function（）{  }

其中函数名用来唯一标识一个函数，function（）则是参数和函数体块

v-on：cilck，这里我绑定的是鼠标单击事件，其中js或浏览器的绝大部分事件都可以被绑定其中，都是在click改就行了

以下就是对应的事件，可以根据需求来绑定事件

  • click：用户单击主鼠标按钮（一般是左键）或者按下在聚焦时按下回车键时触发
  • dblclick：用户双击主鼠标按键触发（频率取决于系统配置）
  • mousedown：用户按下鼠标任意按键时触发
  • mouseup：用户抬起鼠标任意按键时触发
  • mousemove：鼠标在元素上移动时触发
  • mouseover：鼠标进入元素时触发
  • mouseout：鼠标离开元素时触发
  • mouseenter：鼠标进入元素时触发，该事件不会冒泡
  • mouseleave：鼠标离开元素时触发，该事件不会冒泡

三.数据的双向绑定

在表单输入元素或组件上创建双向绑定。

  • 期望的绑定值类型：根据表单输入元素或组件输出的值而变化

  • 仅限：

    • <input>
    • <select>
    • <textarea>

代码展示：

<div id="app">
<input type="text" v-model="message"/>
  <br/>
  复制输入框：{{message}}
</div>
<script>
  let vue = new Vue({
    el: "#app",
    data:{
      message: ''
    }
  });
</script>

 

数据的双向绑定使得不仅仅能在不刷新的情况下，model层变化改变view层，而且可以使得view层变化改变model层

但是局限在于只有 input，select，textarea等标签可以使用

代码展示：

使用单选框完成数据双向绑定

<div id="app">
    性别：
    <input type="radio" name="sex" value="男"  v-model="message" />
    <input type="radio" name="sex" value="女" v-model="message"/>{{message}}
</div>
<script>
  let vue = new Vue({
    el: "#app",
    data:{
      message: ''
    }
  });
</script>

代码展示：

<!-- 下拉菜单双向绑定方法一 -->
<div id="app">
<select v-model="message">
    <option>原</option>
    <option>神</option>
    <option>启</option>
    <option>动</option>
</select>
    <br/>
    你的选择：{{message}}
</div>
<script>
  let vue = new Vue({
    el: "#app",
    data:{
      message: ''
    }
  });
</script>
-----------------------------------------------------------
<!-- 下拉菜单双向绑定方法二 -->
<div id="app">
<select v-model="selected">
    <option>原</option>
    <option>神</option>
    <option>启</option>
    <option>动</option>
</select>
    <br/>
    你的选择：{{selected}}
</div>
<script>
  let vue = new Vue({
    el: "#app",
    data:{
      selected: '--请选择--'
    }
  });
</script>

 

下拉菜单的第一种方式是依靠于变量双向绑定数据，view层的选择会被绑定到这个v-model：message变量中，然后同时改变model层中的message对象，再去刷新view中{{message}}的数据

而第二种方式这是使用的下拉菜单自己的属性，selectd，在下拉菜单被选择后，selected会移位到被选择的option上，也就会更新一次selected的值，我们把这个值绑定到model层中，也会被更新，然后去刷新view层中的{{selected}}

注意：第二种方式变量名只能是selected，而第一种可以自定义

 Vue组件

Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。Vue 同样也能很好地配合原生 Web Component。如果你想知道 Vue 组件与原生 Web Components 之间的关系

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)

代码展示：

<div id="app">
<msf v-for="item in args" v-bind:realy="item"></msf>
</div>
<script>
    Vue.component("msf",{
        props:['realy'],
        template: '<li>{{realy}}</li>'
    });
    let vue = new Vue({
        el: "#app",
        data: {
        args: ['Java','mysql','spring','javaScript','vue']
        },
    });
</script>

 

这里我们通过new Vue（）实例化出来的对象绑定了div标签，在此个标签中，可以取到model层的args数组

我们自定义了一个msf标签，准确来说是自定义了一个组件，它是一个无序列表构成，但是需要model层传来参数

现在我们可以在此组件里通过v-for来遍历出args的值，但是无法立刻就在组件中使用，因为需要一个映射关系，我们知道遍历出来的每个值都在item中，所以需要把这个值传入到组件当中去

所以我们可以使用v-bind绑定，将组件需要的变量绑定到变量出现的位置，也就是将item绑定到组件中，由于组件中接收参数的属性叫props，所以就可以使用赋值语句进行绑定

其中realy = "item"就是它们的映射，当realy接收到参数后就会在template被取出来，然后连同模板一同打印到屏幕上。

四.Axios异步通信

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

由于Vue严格恪守关注点分离原则，使得Vue只做视图层而忽略了通信，很多人都想到了这个问题，所以后面的人都开始想怎么使用Vue通信，由于它本身不提供，所以很自然的想到了使用第三方库，我们熟知的jQuery中Ajax异步通信就是一个，

但是使用jQuery会有一个很大的问题，它和Vue的属性不和，Vue操作虚拟DOM，并且在内存中渲染，而jQuery是操作真实DOM，使得它们俩兼容性差，所以官方不推荐使用jQuery，而是使用Axios

使用Axios最重要的一点就是必须把JavaScript的标准改为ES6，Idea默认的ES5.1是不支持Axios的。

导入依赖（我使用的是在线CDN）：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

代码展示：

<div id="app">
{{info.name}}
  <br/>
<!--  在vue中，""双引号内需要的数据，我们使用{{}}是取不出来值的，需要使用到v-bind进行绑定，绑定变量使得view和model层有一个映射关系-->
  <a v-bind:href="info.url">点击跳转</a>
</div>

<script>
  let vue = new Vue({
    el: "#app",
    data(){
      return{
        // Axios请求返回的参数格式，必须和json字符串一样
        info: {
          name: null,
          url: null,
          page: null
        }
      }
    },
    mounted(){ //钩子函数，链式编程，ES6新特性
      axios.get('../static/JSON/data.json').then(response=>(this.info=response.data))
    }
  });
</script>

 

data（）：这里的data（）和前面存数据的data不一样，一个是装载Vue的返回值的域，一个是存储model层数据的域，这里使用了异步请求，不管是抓取静态资源文件还是请求到后端，都可能会有返回值被携带回来，所以这里的data（）方法是专门用来存储返回值的

mounted（）：它一个钩子函数，像这样的函数有很多，它们分布在Vue启动---构造结点----渲染---死亡等各个时期，这里的钩子函数是在Vue构造完结点并初始渲染的时候生效的，作用就是异步请求

Axios请求回来的数据就会被data（）函数接收，使用return{ }就可以直接将他以Json字符串的形式返回到view层，但是这里要注意，一次返回值可能是很多的json字符串，我们可以不用全部返回到view层，但是一定不能把需要的json字符串格式写错，

比如，请求回来的json字符串中 name：“nihao”，我们在定义格式时，必须时name：null；总之一句话key值一定不要写错，但你可以不接收

拓展：Vue生命周期图

 

五.计算属性

计算属性和方法的相同点很多，但是在程序运行后却是两个截然不同的东西

它们的写法不能说有所不同，只能说一摸一样，唯一不同的就是在不同的vue属性下，方法在methods中，而计算属性在computed中

光看这一点是看不出来什么的，我们先了解一下为什么vue会有计算属性这个东西，这与他在内存中操作是息息相关的，因为在内存中操作和渲染，所以不会过多压力浏览器，在这个优势下才能做计算属性

官网上有一段话：模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。如果在模板中需要不止一次这样的计算，我们可不想将这样的代码在模板里重复好多遍。所以计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。

这段话讲的是什么呢？简单来说就是计算属性在像函数或方法那样，第一次被调用后会像那些方法一样会被计算，但是它计算一次后，会将其结果缓存到内存中，因为本身Vue是在内存中计算的，所以下次有相同的计算在内存中发生时，会直接调用这个结果，不会再计算，这也是为了降低代码的臃肿。

代码展示：

<div id="app">
  <h2>方法函数：{{WhatTime1()}}</h2>
  <h2>计算属性：{{WhatTime2}}</h2>
</div>

<script>
  let vue = new Vue({
    el: "#app",
    data: {

    },
    methods:{
      WhatTime1: function () {
        return Date.now();
      }
    },
    computed:{
      WhatTime2: function () {
        return Date.now();
      }
    }
  });
</script>

 

注意点：方法在调用的时候需要方法（）才能使用，而计算属性，则不需要（）就可以调用，这是因为在Vue中计算属性在一次运行后它的特点无限趋近于属性，只要没有响应式依赖更新，它就可以一直当一个属性使用。

 如上图：方法函数在每次回车后都会重新计算，所以值会改变，而计算属性在一次计算后就缓存在内存中，每次回车都是直接在内存中拿取的，所以值不会改变

计算属性适合于计算次数少，但是需要频繁使用的代码块。

标签：vue,绑定,语法,Vue,nbsp,message,data
From： https://www.cnblogs.com/5ran2yl/p/17717935.html

相关文章

  • Python语法(3)
    Python语法(3)今天我们来学习列表列表是一种常见的变量类型，可以存储一列元素，在python中元素的类型可以是不同的，不过大多数情况下应该都是相同的。列表的初始化1.直接初始化a=[]#定义一个空列表b=[1,2]#定义一个含有两个整数的列表c=[1,"python",1.23]#定义一个含有......
  • vue样式穿透
    本文转载自https://www.jb51.net/article/253428.htm#_label0，转载仅供学习使用.scoped属性我们在vue组件写样式一般是在<style>标签里面，但是我们在这里的样式默认是全局样式，如果其它组件的class名取重复了则会导致样式污染。所以vue支持在<style>标签添加scoped属性，这样当前组......
  • 15-Vue核心-列表过滤和列表排序
    列表过滤 监视属性，实现列表过滤<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>基本列表</title><!--引入Vue--><scripttype="text/javascript......
  • vuejs+antv-g6绘制图表
    该内容包括antv-g6官网地址、antv-g6的基本使用(包括自定义节点、常用插件(右键菜单等)、基本事件、目前我所遇到的一些需求)。1、antv-g6的官网地址：https://g6.antv.antgroup.com/examples2、安装antv-g6组件npminstall@antv/g6 3、创建antvView.vue文件使用antv/g6......
  • Ant Design Vue 中的tab组件中，获取不到$ref
    问题：在tab的组件中引入了一个组件，在页面渲染时，需要用到子组件bpmnModeler里面的方法，调用this.$ref.bpm的时候报错了，找不到bpm<a-tab-panekey="3"tab="流程图"><divclass="search"><a-card><a-rowstyle="positi......
  • vue-day05
    补充1.图片在接口中返回一些数据和图片地址，而不是图片的二进制内容{code:100,msg:'成功',img:地址}2.md5不是加密，摘要算法动态组件<component:is="who"></component>component标签的is属性等于组件名字，这里就会显示这个组件HTML<!DOCTYPEhtml><html......
  • Vue-cli创建项目
    1.单页面应用：spa-以后Vue的项目就只有一个：XX.html页面-当定义了很多组件，不可能都写在：XX.html中吧2.单文件组件：xx.vue-https://v2.cn.vuejs.org/v2/guide/single-file-components.html-一个组件一个文件一个组件中有的东西-1.html内容：以后html都放在te......
  • Vue的DatePicker日期选择器
    picker-option属性官网描述是这样的 1.disabledDate一般我们使用picker-option都是通过disabledDate参数，来设置其日期选择区间，代码如下：<el-col:span="12"><el-form-itemlabel="开票日期起"prop="rqq"><el-date-pickert......
  • Java语言基本语法
    一、标识符和关键字标识符在java语言中，用来标志类名、对象名、变量名、方法名、类型名、数组名、包名的有效字符序列，称为“标识符”；标识符由字母、数字、下划线、美元符号组成，且第一个字符不能是数字；java语言区分大小写；标志符命名规则：类名首字母大写，变量名和方法名采用驼峰......
  • 我不知道的vue3
    代替Vue.delete  vue3中可以使用deleteobj.xxx 就可以实现去删除obj的xxx属性！！！    第二种：借助于del  import{del}from'vue'del(obj,propertyName) 也可删除属性！！！   每个vue页面因为scoped这个属性的原因，可以使得不同vue页面间的css......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99