vue.js 拷贝数组和对象_Vuejs基础语法(二)

点击上方蓝字，关注我们 前言

承接上篇笔记Vuejs基础语法(一)，接下去要记录的这些指令比较常用

0 1  v-bind 动态绑定属性

除了内容需要动态决定外，有些属性也是需要动态来绑定 比如：

• 动态的绑定a元素的href属性

• 动态的绑定img元素的scr属性

• 动态绑定class类、style样式等

所以需要用到v-bind指令：

作用：动态绑定属性

缩写：: (英文的冒号)

举个栗子：通过Vue实例中的data绑定元素的src和href属性

<div id="app">    <a v-bind:href="link">Vuejs官网a>    <img v-bind:src="logoURL" alt="">  div>  <script src="./vue.js">script>  <script>    const vue = new Vue({      el: '#app',      data: {        logoURL: 'https://cn.vuejs.org/images/logo.png',        link: 'https://cn.vuejs.org/index.html'      }    });script>

注意：上篇记录的Mustache{{}}语法只能用于内容 不能绑定属性

我们一般都使用语法糖形式，写起来更简便一些,把v-bind:简写为：它们的效果是一样的

<a :href="link">Vuejs官网a><img :src="logoURL" alt="">

动态的绑定类还有两种形式，一种是对象语法另一种是数组语法，先记录一下最常用的对象语法。

02 对象形式绑定类

对象的语法就是键值对形式的{key:value} key当做类名，值为布尔类型 true就添加类 false就不添加该类

  <div id="app">    <div :class="{'active': true, 'line': flase}">Hello worlddiv>  div>

可以写一个或多个，但这样写还是把值写死，不方便修改，我们可以把值替换成一个变量把它存储在data中，后期在需要决定是否添加类的时候只需要修改data中的这个变量就可以实现。

上图可以看出只有isActive值为true 所以在dom标签中只有active这个类

有些时候我们有一些类是固定要一直存在的 我就可以使用原始方法去写死这个类，后期该元素在动态绑定添加的类是会共存的 ，不会覆盖的

这样我们慢慢的会发现对象语法添加的类多的时候HTML标签会显得很臃肿 代码结构不清晰，所以我们可以把它写在methods中(上篇介绍过),或computed(可能大概也许下次在记录)中，下面用methods演示一下

03 数组形式绑定class

<div id="app">  // 数组方式第1个    <div :class="['active', 'line']">Hello Vuejsdiv>  //数组方式第2个    <div :class="[container, column]">Hello Vuejsdiv>  div>  <script src="./vue.js">script>  <script>    const vue = new Vue({      el: '#app',      data: {        container: 'header',        column: 'sidebar'       }

上面第一个方式比直接用原生方法还麻烦，第二个利用变量的方式 注意：第一个有加单引号直接解析为字符串当类名 而第二个没引号则当做是变量去解析。数组方式也可以跟和其他方式绑定的类共存 也可以写在方法中。04 v-bind动态绑定style

v-bind也可以动态的绑定style样式 在组件化开发中就比较常用到，跟Class一样也可以用对象语法 {属性：值}  注意 属性是多个单词要使用驼峰标识

<h4 :style="{fontSize: '40px', color: 'red'}">hello Vuejsh4><h4 :style="{fontSize: finalSize + 'px'}">hello Vuejsh4>data: {   finalSize: 30},

当然它也可以抽离到methods里面

方式二：数组语法

"[baseStyle, style2]"

>hello Vuejs data: { baseStyle: { fontSize: '30px' }, style2: { color: 'red' } },0 1 v-on

用于事件监听做交互效果的 比如点击、键盘事件等 跟原生js的addElementListener一样 简写方式为@符号

举个栗子：监听按钮点击

 <div id="app">    <div>{{count}}div>    <button v-on:click="count++">+button>    <button v-on:click="count--">-button>  div>  <script src="./vue.js">script>  <script>    const vue = new Vue({      el: '#app',      data: {        count: 0      }

我们也可以把事件指向定义在methods中定义的函数  顺便使用一下语法糖简写把v-on:click写成@click

<div id="app">    <div>{{count}}div>             <button @click="increment">+button>    <button @click="decrement">-button>  div>  <script src="./vue.js">script>  <script>    const vue = new Vue({      el: '#app',      data: {        count: 0      },      methods: {        increment() {          this.count++        },        decrement() {          this.count--        }      }    });

0 2 v-on参数问题

在methods里定义的方法需要注意参数的问题分为以下情况:

1. 事件调用的方法不需要传入参数的括号可以省略

2. 当方法本身要求一个参数，而我们没传入参数也没括号时会默认把原生事件event参数传入

3. 当我们需要默认的event对象又需要其他参数的时候  可以通过$event获取到浏览器事件对象

 // 第3种情况"btnClick('hello',$event)">点击  methods: {   btnClick(message, event) {     console.log(message, event);   } }

0 3 v-on修饰符

修饰符可以帮我们处理事件，比如.stop阻止冒泡 当父元素有点击事件子元素也有点击事件时他们就会冒泡相互影响等

<button @click.stop="doThis">button><button @click.prevent="doThis">button><form @submit.prevent>form><button @click.stop.prevent="doThis">button><input @keyup.enter="onEnter"><input @keyup.13="onEnter"><button v-on:click.once="doThis">button>

还有几个常用的指令就留在下一篇在记录吧！如果有什么问题欢迎留言或添加微信私聊 感谢！

微信号：LinSB0315 扫码关注最新动态