526互联

Vue-基本语法及事件绑定

发布时间 2023-09-20 21:13:24作者: ~java小白~

一.基本语法

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中计算属性在一次运行后它的特点无限趋近于属性，只要没有响应式依赖更新，它就可以一直当一个属性使用。

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

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