前端开发之Vue框架

一、JS循环的几种方式

1、v-for可循环的变量

循环数组：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-for循环</title>

    <script src="../js/vue.js"></script>

</head>

<body>

<div id="app01">

    <h1>循环数组</h1>

    <div v-for="(item,index) in  dataList">

        <p>列表索引第：{{index}} 位，值：{{item}}</p>

    </div>

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app01',

        data: {

            // 数组

            dataList: ['1', '2', '3', '4', '5']

        }

    })

</script>

</html>

循环对象：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-for循环</title>

    <script src="../js/vue.js"></script>

</head>

<body>

<div id="app01">

    <h1>循环对象</h1>

    <div v-for="(value,key) in dataObj">

        <p>值：{{value}}，键：{{key}}</p>

    </div>

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app01',

        data: {

            // 对象

            dataObj: {

                name: 'kang',

                age: 18,

                gender: 'male'

            }

        }

    })

</script>

</html>

循环字符：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-for循环</title>

    <script src="../js/vue.js"></script>

</head>

<body>

<div id="app01">

    <h1>循环字符</h1>

    <div v-for="(item,index) in dataStr">

        <p>值：{{item}}，对应索引位置：{{index}}</p>

    </div>

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app01',

        data: {

            // 字符

            dataStr: 'Happy every day'

        }

    })

</script>

</html>

循环数字：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-for循环</title>

    <script src="../js/vue.js"></script>

</head>

<body>

<div id="app01">

    <h1>循环数字</h1>

    <div v-for="(item,index) in 10">

        <p>值：{{item}}，对应索引位置：{{index}}</p>

    </div>

</div>

</body>

</html>

2、js的循环方式

基于索引的循环：自定义数字或根据数组内数据的个数循环

<script>

    // 方式一：自定义循环

    for (i = 0; i < 10; i++) {

        console.log(i)

    }

   	// 方式二：基于索引循环

    var a = [1,2,3,4,5]

    for (i = 0; i < a.length; i++) {

        console.log(i)

    }

</script>

js的in循环：获取到的是索引位置

<script>

    var a = [1, 2, 3, 4, 5]

    for (i in a) {

        console.log(i,a[i])  // i:索引的位置，a[i]：值

    }

</script>

js的of循环：根据数组内数据的个数循环，获取到的是值（循环对象会报错）

<script>

    var a = [100, 2,99, 4, 2]

    for (i of a) {

        console.log(i)

    }

</script>

js的forEach循环：

<script>

    var b = [1212,223,344,45,624]

    b.forEach(function (item,index){

        console.log(item,index)

    })

</script>

jq的Each循环：需要引入jqery的cdn

<script>

	// 循环对象

    var a = {

        'name': 'kangkang',

        'age': '18',

        'gender': 'male'

    }

    $.each(a,function(key,value){

        console.log(key,value)

    } )

   // 循环数组

	var b = [1212, 223, 344, 45, 624]

    $.each(b, function (index, item) {

        console.log(index, item)

    })

</script>

二、Key值的解释

​ 在使用Vue的v-for循环时，其底层原理是将被循环的数据依次添加到页面中，若已被循环的数据局部发生改变时，按常规的理解，其底层还要重新进行一次循环，更新数据，但在Vue中可以在被循环的标签上指定一个key属性，指定该属性的值为当前被循环的值的索引位置，这样当数据只是发送局部改变时，其底层就只会将局部的数据根据索引位置添加到页面中，这样做的效果是可以提高虚拟dom操作的效率，从而提高循环效率，注意：key值必须为唯一值

 <div v-for="item in 10" :key="item">{{item}}</div>

三、数组、对象的检测与更新

​ 在已经被循环渲染的页面上，将数据中新增一个键值对，发现数据并没有被同步渲染出来，这是因为Vue中存在一个小的BUG，只需要用Vue.set(this.info, 'hobby', '篮球') 设置一下即可

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-for循环</title>

    <script src="../js/vue.js"></script>

</head>

<body>

<div id="app01">

    <div v-for="(key,value) in dataObj">

        <p>值：{{key}}，键：{{value}}</p>

    </div>

    <button @click="handleClick">点我添加数据</button>

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app01',

        data: {

            // 对象

            dataObj: {

                name: 'kang',

                age: 18,

                gender: 'male'

            },

        }

        ,

        methods: {

            handleClick() {

                this.dataObj['hobby'] = 'read'

                // Vue.set(this.dataObj, 'hobby', 'read')

            }

        }

    })

</script>

</html>

四、input事件

常用的input事件

方法 描述
click 单击时触发
input 当输入框进行输入的时候，触发的事件
change 当元素的值发生改变时，触发的事件
blur 当输入框失去焦点的时候，触发的事件
focus 当获得焦点，触发事件

代码用法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-for循环</title>

    <script src="../js/vue.js"></script>

</head>

<body>

<div id="app01">

    <h1>点击事件 --- click</h1>

    <input type="text" @click="handleClick">

    <h1>输入事件 --- input</h1>

    <input type="text" @input="handleInput">

    <h1>输入框发文本生改变触发 --- change</h1>

    <input type="text" @change="handleChange">

    <h1>输入框失去焦点触发 --- blur</h1>

    <input type="text" @blur="handleBlur">

    <h1>输入框获得焦点触发 --- focus</h1>

    <input type="text" @focus="handleFocus">

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app01',

        data: {},

        methods: {

            handleClick() {

                alert('触发了click事件')

            },

            handleInput() {

                alert('触发了input事件')

            },

            handleChange() {

                alert('触发了change事件')

            },

            handleBlur() {

                alert('触发了blur事件')

            },

            handleFocus(){

                alert('触发了focus事件')

            }

        }

    })

</script>

</html>

五、v-model双向数据绑定

简介：

​ 在input框中输入数值时，输入后就会被js变量拿到，如果使用的是：value="变量"，的方式，页面中输入框变化，变量不会变，只有使用v-model才能够做到数据双向绑定

代码用法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-model双向数据绑定</title>

    <script src="../js/vue.js"></script>

</head>

<body>

<div id="app01">

    <h1>常规数据绑定</h1>

    <input type="text" :value="data_str">------>{{data_str}}

    <h1>v-model 双向数据绑定</h1>

    <input type="text" v-model="model_str">------>{{model_str}}

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app01',

        data: {

            data_str: '',

            model_str: '',

        }

    })

</script>

</html>

六、过滤案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/vue.js"></script>

</head>

<body>

<div>

    <div class="app">

        <p>请输入要搜索的内容：<input type="text" v-model="myText" @input="handleInput"></p>

        <ul>

            <li v-for="item in newDataList">{{item}}</li>

        </ul>

    </div>

</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() {

                this.newDataList = this.dataList.filter(

                    item => item.indexOf(this.myText) >= 0

                )

            }

        }

    })

</script>

</html>

七、事件修饰符（了解）

修饰符 描述
.stop 自己的事件结束后不会父标签冒泡（阻止事件冒泡）
.self 只处理自己的事件，子标签冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）

代码用法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-for循环</title>

    <script src="../js/vue.js"></script>

</head>

<body>

<div id="app01">

        <h1>stop事件修饰</h1>

        <div @click="handleDiv">

            <p><span @click.stop="handleSpan">我是div的子标签span1</span></p>

            <p><span>我是div的子标签span2</span></p>

        </div>

        <h1>self事件修饰</h1>

        <div @click.self="handleDiv">

            <p><span @click="handleSpan">我是div的子标签span1</span></p>

            <p><span>我是div的子标签span2</span></p>

        </div>

        <h1>prevent阻止a标签跳转</h1>

        <p><a href="https://www.baidu.com" @click.prevent="handleA">点我进入百度搜索</a></p>

    <h1>once事件只会触发一次</h1>

    <span @click.once="handleA">点我触发事件</span>

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app01',

        data: {} ,

        methods: {

            handleDiv() {

                alert('触发了div标签事件')

            },

            handleSpan() {

                alert('触发了span1标签事件')

            },

            handleA() {

                alert('a标签被点击了')

            }

        }

    })

</script>

</html>

八、按键修饰符

简介：

​ 指，只要按下键盘上的某一个案件就会触发函数执行

代码介绍：

@keyup="handleKeyUp"  # 只要按下某个键就会触发函数

@keyup.enter  # enter为指定的案件，只有按下enter才会触发函数

@keyup.13  # 13是与键盘上某个按键的参照数，指只有按下对应的按键才会触发函数

代码用法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-for循环</title>

    <script src="../js/vue.js"></script>

</head>

<body>

<div id="app01">

    <input type="text" @keyup.x="handleKeyup">

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app01',

        data: {},

        methods: {

            handleKeyup(data) {

                console.log(data)

            }

        }

    })

</script>

</html>

九、表单控制

简介：

​ 表单控制指，可以监听并input标签type属性的，实时完成数据双向绑定

  • text类型：

    • 字符，绑定字符类型变量
  • radio：
    • 单选，绑定字符类型变量
  • ckeckbox：
    • 多选，绑定数组类型变量
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单控制</title>

    <script src="../js/vue.js"></script>

</head>

<body>

<div id="app01">

    <p>用户名：</p>

    <p><input type="text" v-model="username"></p>

    <p>性别：</p>

    <p>

        男：<input type="radio" v-model="gender" value="男">

        女：<input type="radio" v-model="gender" value="女">

    </p>

    <p>爱好：</p>

    <p>

        阅读：<input type="checkbox" v-model="hobby" value="read">

        编程：<input type="checkbox" v-model="hobby" value="python">

        运动：<input type="checkbox" v-model="hobby" value="sports">

    </p>

    <br>

    <hr>

    <span>用户输入：

        <p>{{username}}</p>

        <p>{{gender}}</p>

        <p>{{hobby}}</p>

    </span>

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app01',

        data: {

            username: '',

            gender: '',

            hobby: []

        },

    })

</script>

</html>

十、补充

1、数字过滤方法

// 补充1 ：数组的过滤方法

    // var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']

    // var newDataList = dataList.filter(function (item) {

    //     return false  // return true表示这个值保留,false 表示这个值不要

    // })

    // console.log(newDataList)

2、字符串indexof方法

判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回0以下数字

    // var s = 'lqz is handsome'

    // var s1 = 'qqq'

    // var i = s.indexOf(s1)

    // console.log(i)

3、箭头函数

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

1、 无参数，无返回值箭头函数

    var f = () => {

        console.log('函数')

    }

2、有一个参数，没有返回值的箭头函数  括号可以去掉,可以加

    var f = item => {

        console.log(item)

    }

3、有多个参数，没有返回值的箭头函数  括号不能去掉

    var f = (item, key) => {

        console.log(item)

    }

4、有一个参数，一个返回值

    var f =  (item)=> {

        return item + 'lqz'

    }

    var f = item => {

        return item + 'lqz'

    }

Vue框架-03：JS的几种循环方式，Key值的解释，数组/对象的检测与更新，input事件，v-model数据双向绑定，过滤案例，事件修饰符，按键修饰符，表单控制的更多相关文章

  1. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  2. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

  3. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. java框架之Hibernate(4)-几种检索方式

    准备 模型及映射文件 package com.zze.bean; import java.util.HashSet; import java.util.Set; public class Class ...

  5. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  6. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  7. js的三种继承方式及其优缺点

    [转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...

  8. js的6种继承方式

    重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...

  9. 细说 js 的7种继承方式

    在这之前,先搞清楚下面这个问题: function Father(){} Father.prototype.name = 'father'; Father.prototype.children = [ ...

  10. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

随机推荐

  1. 4.mysql-进阶

    1.事务 将多个操作步骤变成一个事务,任何一个步骤失败,则回滚到事务的所有步骤之前状态,大白话:要成功都成功:要失败都失败. 如转账操作,A扣钱.B收钱,必须两个步骤都成功,才认为转账成功 innod ...

  2. 详解Native Memory Tracking之追踪区域分析

    摘要:本篇图文将介绍追踪区域的内存类型以及 NMT 无法追踪的内存. 本文分享自华为云社区<[技术剖析]17. Native Memory Tracking 详解(3)追踪区域分析(二)> ...

  3. wiki搭建详细过程及步骤

    wiki搭建详细过程及步骤 1.查看yum库中jdk的版本 2.选择java-1.8.0安装 3.配置环境变量 4.环境变量生效 5.查看jdk是否安装成功 6.启动mysql服务 7.下载confl ...

  4. 【Java并发002】使用级别：线程同步与线程通信

    一.前言 本文介绍Java多线程技术,分为五个部分:多线程的两种实现方式--继承Thread类和实现Runnable接口:线程同步应用:三人吃苹果:线程同步+线程通信应用之一:生产者-消费者问题:线程 ...

  5. 记录一次从linux移动一个项目到windows遇到的问题

    前言 这几天在linux平台写了一个垃圾软件,浪费了我10多天的时间,感觉很垃圾,然后我想在windows平台打包这个软件,然后出现了一个项目中有相同文件名的问题,导致一些文件相互覆盖 问题描述 我把 ...

  6. Hadoop安装-分布式-Fully

    Hadoop安装-分布式-Fully 〇.所需资料 一.配置 1.基础配置 (1)系统安装 (2)hostname主机名配置 (3)ip地址.dns.hosts映射文件配置 (4)关闭防火墙与seli ...

  7. 【软考-中级-其他】03、NoSQL和云计算

    其他 NoSQL概述 分类 文档存储数据库:MongoDB 采用BSON格式完成存储数据和网络数据交换 BSON格式:JSON的二进制编码格式 逻辑结构包括:数据库.集合(相当于关系数据库的表).文档 ...

  8. 【Java SE进阶】Day09 字节流、字符流、I/O操作、属性集

    一.I/O概述 1.输入输出 输入:硬盘-->内存 输出:内存-->内存 2.流 字节流:一个字节等于8位 字符流:一个字符=2个字节 二.字节流 1.概述 以字节的方式读取/传输 可以读 ...

  9. 日爬百万数据的域名限制、url的清洗和管理

    一.域名去重1.检测开头:link.startswith('http') txt = "Hello, welcome to my world." x = txt.startswit ...

  10. 手摸手，使用Dart语言开发后端应用，来吧！

    前言 这几天连续发了几篇关于 Dart 开发后端应用的文章,主要是介绍了 Dart 的一些优点,比如异步任务,并发处理,编译部署等等. 俗话说,光说不练假把式,今天我们来真正开始一个 Dart 后端应 ...