Vue学习第二天

Vue学习第二天

v-on的参数传递问题。

1 在v-on中,如果我们不需要传递参数,那么绑定的方法就可以不需要()
2 在v-on中,如果我们需要传递的参数不是我们定义好的变量。那么就需要加上单引号, 不加引号代表的是变量。
3 在v-on中,如果我们需要传递绑定事件,那么写法就必须是 $event 而不能是 ‘event’。单引号代表的是传递字符串。

Vue学习第二天_第1张图片

Vue学习第二天_第2张图片



<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<script src="../js/vue.js">script>
<body>
<div id="app">
  <button @click="btn1click('ddddd',$event)">
    点我
  button>
div>

body>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你在看什么呢!'
    },
    methods:{
      getFullname(){
        return this.firstname+ ' ' + this.lastname
      },
      btn1click(abc,event){
        console.log('+++++++++++++++++',abc, event);
      }
    }
  })
script>
html>

on的一些修饰符

Vue学习第二天_第3张图片

VUE中v-if的使用


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<script src="../js/vue.js">script>
<body>
<div id="app">
  <span v-if="isUsername">
    <label  for="username">请输入用户名label>
    <input type="text" id="username" placeholder="请输入用户名">
  span>
  <span v-else>
    <label for="email">请输入邮箱label>
    <input type="text" id="email" placeholder="请输入邮箱">
  span>

  <button @click="isUsername=!isUsername">点我button>
div>

body>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你在看什么呢!',
      isUsername:true
    }
  })
script>
html>

实现的效果是

Vue学习第二天_第4张图片

那么问题就来了,我不想让点击切换的时候,数据(111)还在,怎么办,就需要使用key标签。

Vue学习第二天_第5张图片
这两个key不一致,那么就不会读取dom中的缓存。

v-show 与v-if差不多

Vue学习第二天_第6张图片

v-if否的时候 标签 根本都不显示

vi-for的使用 需要注意的点:

遍历循环数组跟对象的时候是不一样的


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<script src="../js/vue.js">script>
<body>
<div id="app">
  <ul>
    <li v-for="(item,index) of message">{{item}}-----------{{index}}li>
  ul>

  <ul>

    
    <li v-for="(item ,key) of info">{{item}}------------------{{key}}li>
  ul>

div>

body>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:['鲁宾所漂亮','你好郑州','你好北京','你好上海'
      ],
      info:{
        name:'张三',
        age:'27',
        height:'197'
      }
    }

  })
script>
html>

Vue学习第二天_第7张图片

数组的一些使用:

响应式的方法:
1 例如 数组为letters =======>>>>>> letters:[‘a’,‘b’,‘c’,‘d’,‘e’,‘g’,‘f’]’
letters.push 在数组的最后位置添加一个元素。
letters.pop 在数组的最后位置删除一个元素。
letters.shift 删除数组的第一个元素。
letters.unshift 在数组的最前边添加元素
letters.splice 可以进行多种运算
Vue学习第二天_第8张图片

你可能感兴趣的:(Vue学习第二天)