首页 > 其他分享 >Vue的基础操作

Vue的基础操作

时间：2023-02-15 20:22:47浏览次数：60  
标签：Vue console log 基础 item 循环 事件 var 操作

目录

Vue的基础操作

vue的样式----element

js的几种循环方式

v-for可以循环的变量

js可以循环数组、对象、字符串、数字。

循环对象 例子
数组：l:[11,22,33,44,55] <span v-for="item in l"> {{item}}</span>
数组带索引 <p v-for="(item,index) in l"> 第{{index+1}}个的值是：{{item}}</p>
对象:info:{name:'kiki',age:19} <p v-for="item in info"> {{item}}</p>
对象带索引 <p v-for="(item,index) in info"> key:{{index}}---->value:{{item}}</p>
字符串:string:'hi,my good friend' <span v-for="item in string"> {{item}}</span>
索引带索引 <span v-for="(item,index) in string> {{item}}</span>
数字 8 <span v-for="item in 8">{{item}}</span>
数字带索引 <p v-for="(item,index) in 8">{{item}}--->索引{{index}}</p> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div class="app">
        <h2>v-for循环数组</h2>
        <span v-for="item in l"> {{item}}</span>

        <h2>v-for循环数组带索引</h2>
        <p v-for="(item,index) in l"> 第{{index+1}}个的值是：{{item}}</p>

        <h2>v-for循环对象，默认是value值</h2>
        <p v-for="item in info"> {{item}}</p>
        <h2>v-for循环对象，带key和value</h2>
        <p v-for="(item,index) in info"> key:{{index}}---->value:{{item}}</p>

         <h2>v-for循环字符串</h2>
        <span v-for="item in string"> {{item}}</span>
        <div v-for="item in string"> <!--空格也要循环出来--加if判断-->
            <span v-if="item!=' '">{{item}}</span>
            <br v-else>
        </div>
        <h2>v-for循环字符串带索引</h2>
        <div v-for="(item,index) in string">
            <span v-if="item!=' '">{{item}}--->索引{{index}}</span>
            <br v-else>
        </div>

        <h2>循环数字</h2>
        <span v-for="item in 8">{{item}}</span>

        <h2>循环数字带索引</h2>
        <p v-for="(item,index) in 8">{{item}}--->索引{{index}}</p>
        
    </div>

</body>
    <script>
        new Vue({
            el:".app",
            data:{
                l:[11,22,33,44,55],
                info:{name:'kiki',age:19},  //想要循坏数组，数组要提前定义，不能使用data里面的数组
                string:'hi,my good friend'
            },
            methods:{},
        })
    </script>
</html>

js的循环方式

python 没有基于索引的循环，python都是基于迭代的循环

基于索引的循环

    var a= [12,13,14,15,16]
    for(i=0;i<2;i++){
      for(i=0;i<a.length;i++){
        // console.log(i)  <!--0 1 2 3 4 -->
          console.log(a[i]) <!--12 13 14 15 16 -->
      }

基于in的循环

in拿到的是索引 ，vue的v-for拿到的是值

    var a= [12,13,14,15,16]
    for(i in a){
        // console.log(i) // 0 1 2 3 4
        console.log(a[i])  <!--12 13 14 15 16 -->
    }

es6 语法 of 循环

    var a= [12,13,14,15,16]
    for(item of a){
        console.log(item) <!--12 13 14 15 16 -->
    }

数组循环---forEach

    var a= [12,13,14,15,16]
	<!--每循环一个值交给item，再交给函数执行 -->
    a.forEach(function (item){
        console.log(item) <!--12 13 14 15 16 -->
    })

juery循环---数组和对象

    var a= [12,13,14,15,16]
    <!--每循环a一个值交给匿名函数执行 -->
    $.each(a,function (index,item){
        console.log(index) //  0 1 2 3 4
        console.log(item) // 12 13 14 15 16
    })

key值的解释

v-for放在标签上，其实标签上还可以放key，但是key值必须是唯一，不然就程序报错，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟DOM的替换从而提高循环效率，想要专业一些那就尽量写这个方式。

 <div v-for="item in 8" :key="item">{{item}}</div>
// 尽量要写key值，这样虚拟dom每次操作的根据变动的key值做监听

数组，对象的检测与更新

对象，新增一个键值对(key-value)，发现页面没有变化，可以使用Vue.set(this.info)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div class="app">
      <h1>循环对象</h1>
      <div v-for="(value,key) in info">
        <p>key的值：{{key}}</p>
        <p>value的值：{{value}}</p>
      </div>
      <hr>
      <button @click="handleAdd">添加数据</button>

    </div>

</body>
<script>
          new Vue({
            el:".app",
            data:{
                info:{name:'kiki',age:19},
            },
            methods:{
              handleAdd(){
                //页面会变化-----改变原有的值
                // this.info['name']='kimi'
                //页面不会变----添加新的值，值有了，但页面不会变
                // this.info['hobby']='篮球'

                //遇到数据变了，页面没变的情况，都是用
                Vue.set(this.info,'hobby','篮球')
              }
            },
        })
</script>

</html>

image

input事件

通过对input框的属性进行绑定事件，但对input进行操作时会触发相应的事件。

事件 释义
click 点击事件 <input type="text" @click="handleClick">
input 当输入框进行输入的时候 触发的事件 <input type="text" @input="handleInput">
blur 当输入框失去焦点的时候 触发的事件 <input type="text" @blur="handleBlur">
change 当元素的值发生改变时 触发的事件 <input type="text" @change="handleChange">
focus 当获得焦点，触发事件 <input type="text" @focus="handleFocus"> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div class="app">

    <h1>点击事件click</h1>
    <input type="text" @click="handleClick">

    <h1>失去焦点事件blur</h1>
    <input type="text" @blur="handleBlur">

    <h1>input事件，只要输入，就会触发</h1>
    <input type="text" @input="handleInput">

    <h1>change事件</h1>
    <input type="text" @change="handleChange">

    <h1>focus事件</h1>
    <input type="text" @focus="handleFocus">
  </div>
</body>
<script>
   var vm = new Vue({
     el:'.app',
     data:{},
     methods:{
       handleClick(){
         alert('点击事件')
       },
       handleBlur(){
         console.log('失去焦点了')
       },
       handleInput(){
         console.log('input输入框被点')
       },
       handleChange(){
         console.log('chang事件--我改变了')
       },
       handleFocus(){
         console.log('获得了焦点')
       }
     }
   })
</script>
</html>

v-model双向数据绑定

单向数据绑定 :value='变量' <input type="text" :value="name">
双向数据绑定 v-model='变量' <input type="text" v-model="age">---{{age}}

input框的vulue 值是单向数据绑定，输入框输入值后，值就会被js变量拿到。input框使用:value='变量'这种形式，页面输入框变化，变量不会变，但使用v-model` 做双向数据绑定，输入框输入数据，变量也会跟着变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
  <div class="app">
    <h1>单向数据绑定</h1>
    <input type="text" :value="name">---{{name}}--->单向数据绑定

    <h1>双向数据绑定</h1>
    <input type="text" v-model="age">---{{age}}--->单向数据绑定
  </div>

</body>
<script>
  var vm = new Vue({
    el:'.app',
    data:{
      name:'kiki',
      age:18
    }
  })
</script>
</html>

过滤事件

只有数组有过滤器，根据输入框输入的内容对目标数组进行条件过滤，只显示想要的数组内容。代码如下

每次循环一次给函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div class="app">
    <h1>过滤案件</h1>
    <p>请输入要搜索的内容：<input type="text" v-model="myText" @input="handleInput"></p>

    <ul>
<!--      <li v-for="item in dataList"> {{item}}</li> //由于dataList做了筛选，每次的值都会变，导致输入框回退时数组里面的信息已经被筛选了-->
      <li v-for="item in newDataList"> {{item}}</li>
    </ul>
  </div>
</body>
<script>
  var vm = new Vue({
    el:'.app',
    data:{
      myText:'',
      dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
      newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],

    },
    methods:{
      handleInput(){
        // var _this = this
        // console.log(this.myText)  // 打印myIext的值
        // this.newDataList=this.dataList.filter(item =>{
          // 判断item在不在myText
          //this指向问题
          // 判断输入的值myText是否在item中

          // if (item.indexOf(_this.myText) >=0){
          //   return true
          // }else{
          //   return false
          // }
          //简写
          // return item.indexOf(this.myText)>=0

        // })

        this.newDataList=this.dataList.filter(
                item=> item.indexOf(this.myText)>=0
        )
      }
    }
  })
  </script>
</html>

补充知识

  //补充1： 数组的过滤方法
  // var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
  // var newDataList=dataList.filter(function (item){
  //   return true  // return true表示这个值保留 ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
  //   return false // return true表示这个值不要 []
  // })
  // console.log(newDataList)


    //补充1： 字符串的indexOf方法，判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回-1
  // var s = 'English language or literature as a subject of study'
  // var s1='language'
  // var s2='kiki'
  // var i = s.indexOf(s1)
  // var k =s.indexOf(s2)
  // console.log(i)  //索引8
  // console.log(k)  //-1

   // 补充3 ：es6 的箭头函数写法---》函数中套函数，this指向有问题，有了箭头函数，箭头函数没有自己的this，用的都是上一级的this

  //1.无参函数，无返回值箭头函数
  // var f = () =>{
  //   console.log('函数')
  // }
  // f('123')  // 函数

    // 2. 有一个参数，没有返回值的箭头函数，括号可以去掉，也可加()
  //   var f = item =>{
  //   console.log(item)
  // }
  //   f('123')  //123

  // 3. 有多个参数，没有返回值的箭头函数  括号不能去掉
  //   var f = (item,value) =>{
  //   console.log(item)
  // }
  //   f('123')  // 123

    // 4. 有一个参数，一个返回值
  //   var f = (item) =>{
  //   return item+'kiki'
  // }
  //   f('123')  // 123

  //   var f = (item) =>{
  //   return item+'kiki'
  // }
  //   f('123')  // 123

  // 简写
  var f = item =>item + 'kiki'
  var res = f('kimi')
  console.log(res)

事件修饰符(了解)

就是对事件的修饰，针对父标签和子标签里面的事件，当子标签里面的点击事件被点击了，同时会传给父标签的点击事件，引发点击事件的触发，称为冒泡事件。

事件修饰符 释义
.stop 只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面） 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue.js"></script>
</head>
<body>
<div class="app">
        <h1>事件修饰符stop，子控件不再冒泡给父控件</h1>
        <ul @click='handleUl'>
            <li @click.stop="handleLi">第一</li>
            <li>第二</li>
        </ul>

      <h1>事件修饰符self:只处理自己的事件，子控件的冒泡，不处理父标签的</h1>
        <ul @click.self='handleUl'>
            <li @click="handleLi">第一</li>
            <li>第二</li>
        </ul>
          <h1>prevent阻止a的跳转</h1>
        <a href="http://www.baidu.com" @click.prevent="handleA">百度</a>

        <h1>once 只响应一次</h1>
        <button @click.once="handleClick">点我抽奖</button>
    </div>
</div>

</body>
<script>
   new Vue({
     el:'.app',
     data:{},
     methods:{
      handleLi(){
        console.log('li被点击了')
      },
       handleUl(){
        console.log('ul被点击了')
      },
       handleA(){
        console.log('a标签被点了')
         // 阻止a的跳转，自己决定要不要跳prevent
         //手动指定跳转
         location.href = 'http://www.cnblogs.com'

       },
       handleClick(){
        console.log('我被点了')
       }
     }
   })
</script>

</html>

按键修饰符

按键事件：按了键盘某个键，就会触发函数的执行

@keyup="handleKeyUp"

按键修饰符：只有某个按键被按下才触发

@keyup.enter
@keyup.13     
# keyCode 对照表

keyCode对照表

handleKeyUp2(1,$event)是可以带参数传的，但是一定要一一对应的。image-20230215194106679

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
    <div class="app">
      <input type="text" v-model="text" @keyup="handleKeyUp">--{{text}}
      <input type="text" v-model="text" @keyup.13="handleKeyUp">--{{text}}
      <input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">--{{text}}
    </div>

</body>
<script>
  var vm = new Vue({
    el:'.app',
    data:{
      text:''
    },
    methods:{
      handleKeyUp(event){
        // console.log('按键被按下了')
        // console.log('按键被按下了',event.key,event.keyCode)
        if(event.keyCode==13){
          console.log('开始和后端交换搜索了')
        }},

        handleKeyUp2(a,event){
          console.log(a,event)
          console.log('event被按了')
      }
    }
  })
</script>
</html>

image

单表控制

input的变量类型有text、radio(单选)、checkbox(单选和多选)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="vue.js"></script>

</head>
<body>
  <div class="app">
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <p>性别：
      男：<input type="radio" v-model="gender" value="1">
      女：<input type="radio" v-model="gender" value="2"></p>
      <p>记住密码：
          <input type="checkbox" v-model="remember">
      </p>

      <p>爱好：
        旅游：<input type="checkbox" v-model="hobby" value="篮球">
        美食：<input type="checkbox" v-model="hobby" value="美食">
        运动：<input type="checkbox" v-model="hobby" value="运动">
      </p>
      <button @click="handleClick">登录</button>

  </div>

</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            username:'',
            password:'',
            gender:'',// radio单选，多个radio绑定同一个变量，选中某个，就对应value值
            remember:false,// checkbox 单选是true或false
            hobby:[],// checkbox 多选是数组类型，必须一开始定义就是数组，多个checkbox绑定一个变量

        },
        methods:{
            handleClick(){
                console.log(this.username,this.password,this.gender,this.remember,this.hobby)
            }
        }
    })

</script>
</html>

image

python的海象运算符

海象运算符可以比较两个对象的大小，并返回一个布尔值（true或false),还可以比较数字、字符串、列表和字典等对象的大小。

形式：$$a \oplus b$$

其中$a$和$b$分别表示两个对象，$\oplus$表示海象运算符。

  • $a$大于$b$,则返回True,否则返回False

    注意：数字、字符串、列表和字典和上述同理

标签：Vue,console,log,基础,item,循环,事件,var,操作
From： https://www.cnblogs.com/zhanglanhua/p/17124509.html

相关文章

  • Java常用类的一些基础API的使用
    数字相关类、日期时间API、系统相关类、数组工具类及自然排序和定制排序的介绍Author:MsuenbDate:2023-02-15数字相关类Math类java.lang.Math类包含用于执行基......
  • vue
    今日内容1.js的几种循环方式2.key值的解释3.数组、对象的检测与更新4.input事件5.v-model双向数据绑定6.过滤案例7.事件修饰符(了解)8.按键修饰符9.表单控制1.js......
  • Linux基础——文件权限、搜索查找、解压压缩、磁盘管理、进程管理、软件包管理
    一、文件权限Linux系统是一种典型的多用户系统，不同的用户处于不同的地位，拥有不同的权限。为了保护系统的安全性，Linux系统对不同的用户访问同一文件（包括目录文件）的权限......
  • vue二
    目录一，js循环方式测试1.循环数组2.循环数组带索引3.循环对象默认取value4.循环对象带key和value5.循环字符串6.循环数字循环方式1.js的循环2.js的in循环3.es6语法4.数组循......
  • VUE初识
    目录插值语法文本指令属性指令事件指令class和style条件渲染列表渲染v-for可以循环的变量js的循环方式key值的解释数字,对象的检测与更新input事件v-model双向数据绑定过滤......
  • vue3数据类型ref,Reactive,shallowRef,shallowReactive基本用法
    1.ref用于创建基础类型的响应式，也可以创建引用类型的响应式.2.ref对于引用类型，底层也是转换为reactive来进行响应式处理3.ref创建的响应式数据在脚本中需要通过.......
  • python70 前端框架之vue js的集中循环方式、key值的解释、input事件、v-model双向数
    js的几种循环方式v-for可以循环的变量可以循环的：数组、数组带索引对象、对象带key、value字符串字符串带索引数字、数字带索引<!DOCTYPEhtml......
  • vue2组件懒加载（Vue Lazy Component ）
    1.介绍：是vue组件懒加载的预估插件组件。支持组件组件延时加载，加载真实组件前展示骨架组件，提高用户体验，真实组件代码分包异步加载//安装npminstall@xunlei/vue-laz......
  • 【算法训练营day44】完全背包基础 LeetCode518. 零钱兑换II LeetCode377. 组合总和IV
    LeetCode518.零钱兑换II题目链接：518.零钱兑换II独上高楼，望尽天涯路组合问题和完全背包的混合应用，感觉脑中模拟的不是很清晰，但是靠着背包问题的代码技巧和模板就能比较......
  • vue 数组对象深拷贝 并根据某项属性排序
    vue数组对象深拷贝并根据某项属性  serialNumber  排序原始数据navListData:[{name:'企业速览',isHot:false,is......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99