vue框架3

js的几种循环方式

1.v-for可以循环的变量

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="app">

    <h2>1.循环数组</h2>

    <span v-for="item in l">{{item}}</span>

    <h2>2.循环数组带索引</h2>

    <div v-for="(item,index) in l">第{{index+1}}个值，值是{{item}}</div>

    <h2>3.循环对象，默认value</h2>

    <div v-for="item in info">{{item}}</div>

    <h2>4.循环对象，带key和value</h2>

    <div v-for="(item,index) in info">{{index}}:{{item}}</div>

    <h2>5.循环字符串</h2>

    <div v-for="item in T">{{item}}</div>

    <h2>6.循环字符串，带索引</h2>

    <div v-for="(item,index) in T">第{{index+1}}个字母{{item}}</div>

    <h2>7.循环字符串，带索引，空格也算占位</h2>

    <div v-for="(item,index) in T"><p v-if="item!=' '">第{{index+1}}个字符{{item}}</p><br v-else></div>

    <h2>8.循环数字</h2>

    <div v-for="item in 6">{{item}}</div>

    <h2>9.循环数字带索引</h2>

    <div v-for="(item,index) in 6">第{{index+1}}个数是{{item}}</div>

</div>

</body>

<script>

    new Vue({

        el:'.app',

        data:{

            l:[1,2,3],

            info:{name:'han',age:23},

            T:'hello world!',

        }

    })

</script>

</html>

2.js的循环方式

# 1.js循环都是基于索引的循环

"""

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

"""

<script>

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

        console.log(i)

    }     // 0，1，2，3，4，5，6，7，8，9

    var a = [4,5,6,7]

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

        console.log(a[i])

    }    // 4，5，6，7 （基于索引的循环）

</script>

# 2.js的in循环，拿到的是索引

<script>

    // 基于迭代的循环

    var a= [4,5,6,7]

    for (item in a){

        console.log(item)

    }  // 0,1,2,3 原生js拿到的是索引

    var a = [4,5,6,7]

    for (i in a) {

        console.log(a[i])

    }  // 4,5,6,7 拿到的是a里面的值

</script>

# 3.es6语法，of循环

<script>

    var a = [4,5,6,7]

    for (item of a) {

        console.log(item)

    }  // 4,5,6,7

</script>

# 4.数组的方法，forEach可以循环

<script>

    var a = [4,5,6,7]

    a.forEach( function (item){

        console.log(item)

    })   // 4,5,6,7  a如果是对象就无法点出forEach

</script>

# 5.jquery的循环，循环数组，对象

// 需要引入jquery的cdn

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

// 代码：

<script>

    var a = [4,5,6,7]

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

        console.log(index)  // 0,1,2,3 索引

        console.log(item)   // 4,5,6,7 数值

    }) // 0，4，1，5，2，6，3，7

</script>

key值的解释

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

     1. vue的v-for写在标签上，

     2. 在标签上加一个key(key属性是vue提供的)，

     3. 用属性指令()绑定一个变量

     4. key(每次循环key值是唯一的)的值每次都不相同

     5. 这样可以加速虚拟dom的替换，从而提升循环效率

数组，对象的检测与更新

# 对象：

    - 新增一个key-value，发现页面没有变化，以后用:

           Vue.set(this.info, 'hobby','篮球'）

    - 设置一下即可

# 代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="app">

    <h1>循环对象</h1>

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

        <h2>key值为:{{key}}</h2>

        <h3>value值为:{{value}}</h3>

        <br>

    </div>

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

</div>

</body>

<script>

    new Vue({

        el:'.app',

        data:{

            info:{name:'han',age:23},

        },

        methods:{

            handleAdd(){

                // 页面会变化

                this.info['name'] = '彭于晏'

                // 页面不会变,

                Vue.set(this.info,'hobby','篮球')

            }

        }

    })

</script>

</html>

input事件

# input的事件：

click       点击事件

input      当输入框进行输入的时候触发的事件

chango   当元素的值发生改变时，触发的事件

blur        当输入框失去焦点的时候，触发的事件

focus      当获得焦点触发事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="app">

    <h1>1.点击事件</h1>

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

    <h1>2.失去焦点</h1>

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

    <h1>3.输入事件input</h1>

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

    <h1>4.change事件</h1>

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

    <h1>5.focus事件</h1>

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

</div>

</body>

<script>

    new Vue({

        el:'.app',

        data:{

        },

        methods:{

            handleClick() {

                alert('点击了事件')

            },

            handleBlur(){

                console.log('失去了焦点')

            },

            handleInput(){

                console.log('输入了东西')

            },

            handleChange(){

                console.log('内容发生改变')

            },

            handleFocus(){

                console.log('获得了焦点')

            }

    }

    })

</script>

</html>

v-model双向数据绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="app">

    <h1>1.单向数据绑定</h1>  <!--改变变量vm对应的数据，才会发生改变-->

    <input type="text" :value="name">{{name}}

    <h1>2.双向数据绑定</h1>  <!--改变变量vm对应数据或前端输入框任意一个，另一个也会改变-->

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

</div>

</body>

<script>

    var vm = new Vue({

        el:'.app',

        data:{

            name:'han',

            age:23

        },

    })

</script>

</html>

过滤案例

箭头函数

<script>

// 补充

    // 1.数组的过滤方法

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

    dataList.filter(function (item){

        return true  // 表示这个值保留,false表示这个值舍弃

    })

    // 2.字符串indexOf方法

    // 判断子字符串是否在当前字符串中，在返回其索引，不再返回-1

    var s = 'han is handsome'

    var s1 = 'hhh'

    var s2 = s.indexOf(s1)

    console.log(i)

    // 3.es6的箭头函数写法

    // 函数中套函数，this指向有问题，有了箭头函数,用的都是上一级的this，因为箭头函数没有自己的this

    // >-1. 无参数，无返回值箭头函数

    var f = () => {

        console.log('函数')

    }

    // >-2.有一个参数，没有返回值的箭头函数,括号可留可去

    var f = item => {  // var f = (item) => {

        console.log(item)

    }

    // >-3.有多个参数，没有返回值的箭头函数,括号不可去

    var f = (item, key) => {

        console.log(item)

    }

    // >-4.有一个参数，一个返回值

    // 方式一:

    var f =  (item)=> {

        return item + 'han'

    }

    // 方式二:

    var f = item => {

        return item + 'han'

    }

    // 方式三:

    var f = item => item + 'han'

    var res = f('han')

    console.log(res)

</script>

过滤

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="./js/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 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() {

                // 简化前

                // this.newDataList = this.dataList.filter(item => {

                //     // 判断item在不在myText中

                //     // 1.this指向问题

                //     // if (_this.myText.indexOf(item) >= 0) {

                //     // 2.判断输入的值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>

事件修饰符

# 事件的修饰符

.stop          只处理自己的事件，子控件冒泡的事件不处理（组织事件冒泡）

.self           只处理自己的事件，子控件冒泡的事不处理

.prevent     阻止a链接的跳转

.once         事件只会触发一次（适用于抽奖）

# 代码示例：（在console中查看效果）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="./js/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.cnblog.com" @click.prevent="handleA">点击进入博客园</a>

    <h1>once 只响应一次</h1>

    <button @click.once="handleClick">点击抽奖</button>

</div>

</body>

<script>

    var vm = new Vue({

        el:'.app',

        data:{},

        methods: {

            handleLi() {

                console.log('li被点击了')

            },

            handleUl() {

                console.log('ul被点击了')

            },

            handleA(){

                console.log('a标签被点击了')

                // 阻止a的跳转，自己决定要不要跳

                // 手动指定跳

                location.href = 'http://www.baidu.com'

            },

            handleClick() {

                console.log('点击事件')

            }

        }

    })

</script>

</html>

按键修饰符

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

@keyup="handleKeyUp"

# 键盘事件

keydown：按下键盘键

keypress：紧接着keydown事件触发（只有按下字符键时触发）

keyup：释放键盘键

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

@keyup.enter

@keyup.13

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="app">

    <!--    1.按键检测-->

    <!--    <input type="text" v-model="text" @keyup="handleKeyUp">{{text}}-->

    <!--    2.只能检测特定的按键，以回车键为例-->

    <!--    <input type="text" v-model="text" @keyup="handleKeyUp1">{{text}}-->

    <!--    3.监测回车键,传入两个参数，a对应的是1，event对应2-->

    <!--    <input type="text" v-model="text" @keyup.13="handleKeyUp2(1,2)">{{text}}-->

    <!--    4.监测回车键,传入$event,监测event的值-->

    <!--    <input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">{{text}}-->

</div>

</body>

<script>

    var vm = new Vue({

        el:'.app',

        data:{

            text:''

        },

        methods: {

            // 1.按键监测

            handleKeyUp(event) {

                console.log('按键被按下了',event.key,event.keyCode) // keyCode会显示检测按键对应的数字关系

            },

            // 2.监测回车

            handleKeyUp1(event){

                if (event.keyCode == 13) {

                    console.log('开始跟后端交换搜索了，只有回车按键会触发执行')

                }

            },

            handleKeyUp2(a,event) {

                console.log(event)

                console.log(a)

                console.log('enter被按了')

            },

            handleKeyUp3(a, event) {

                console.log(event)

                console.log('enter被按了')

            }

        }

    })

</script>

</html>

表单控制

#本质：input框>>>>变量类型是什么？

   text         类型

   radio       单选

   checkbox 单选和多选

# 代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="./js/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>

vue框架3的更多相关文章

Vue框架Element的事件传递broadcast和dispatch方法分析
前言最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
使用vue框架运行npm run dev 时报错解决
使用使用vue框架运行npm run dev 时报错如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现我们可以动态修改地址解决: 进入项目文件的config文 ...
Vue框架下的node.js安装教程
Vue框架下的node.js安装教程 python服务器.php ->aphche.java ->tomcat. iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...
Vue框架axios请求（类似于ajax请求）
Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...
Vue框架之双向绑定事件
Vue框架之双向绑定事件首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
Vue框架
Vue框架环境: windows python3.6.2 Vue的cdn: <script src="https://cdn.jsdelivr.net/npm/vue"&g ...
vue框架入门和ES6介绍
vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...
基于VUE框架与其他框架间的基本对比
基于VUE框架的基本描述与其他框架间的基本对比 2018-11-03 11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...
VUE框架的初识
VUE框架的初识初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...
vue框架中的日期组件转换为yyy-mm-dd格式
最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式

随机推荐

05.深入理解JMM和Happens-Before
大家好,我是王有志. JMM都问啥? 最近沉迷P5R,所以写作的进度很不理想,但不得不说高卷杏YYDS.话不多说,开始今天的主题,JMM和Happens-Before. 关于它们的问题并不多,基本上只 ...
基于docker容器的MySQL主从设置及efcore读写分离
1.基于docker部署MySQL,设置主从本操作基于已经拉取的镜像(docker pull mysql) 创建一主一从两个数据库容器 docker run -d -p 3307:3306 -e M ...
迁移学习（IIMT）——《Improve Unsupervised Domain Adaptation with Mixup Training》
论文信息论文标题:Improve Unsupervised Domain Adaptation with Mixup Training论文作者:Shen Yan, Huan Song, Nanxia ...
[Unity]Unity更改黑色主题（个人版）
前言首先需要一款软件:Winhex,由于现在已经是2018年,大部分百度的软件都已经失效或者出现一堆bug,我费了九牛二虎之力才找到这个可用的,下面是下载地址: 链接:https://pan.bai ...
使用IDEA搭建SSM项目
使用IDEA搭建SSM项目摘要:前几天学习了SSM项目的搭建,但是因为配置过程中出现了问题因此没有搭起来,我最讨厌不确定的事情,因此自己花费了点时间钻研搭建SSM项目的方法,终于习得了SSM项目 ...
数论专项复习（一）扩展欧几里得算法(exgcd)
简介扩展欧几里得算法(简称扩欧,exgcd),用来求下列方程的一组解: \[ax+by=(a,b) \] 算法介绍 1. 裴蜀定理裴蜀定理(Bézout's lemma):若 \(a\in \ma ...
BUG日记---运行Tomcat报406错误：根据请求中接收到的主动协商头字段，目标资源没有用户代理可以接受的当前表示，而且服务器不愿意提供缺省表示。
网页报错内容 HTTP Status 406 – 不可接收 Type Status Report 描述根据请求中接收到的主动协商头字段,目标资源没有用户代理可以接受的当前表示,而且服务器不愿意提供缺 ...
读Java8函数式编程笔记01_Lambda表达式
1. Java 8函数式编程 1.1. 没有单子 1.2. 没有语言层面的惰性求值 1.3. 没有为不可变性提供额外支持 1.4. 集合类可以拥有一些额外的方法:default方法 2. 现实世界中, ...
阿里百秀后台管理项目笔记 ---- Day03
来吧展示: step1:所有文章数据展示引入 functions.php 文件执行数据库查询以及判断用户登录状态 require_once '../functions.php'; get_useri ...
二、typora软件的安装与markdown语法
目录一.typora软件的安装与使用 1.软件的安装 2.破解使用的方法 3.功能描述(markdown语法讲解) 标题小标题语言环境表格表情图片查看源代码数学公式流程图高亮文本 ...

vue框架3

js的几种循环方式

1.v-for可以循环的变量

2.js的循环方式

key值的解释

数组，对象的检测与更新

input事件

v-model双向数据绑定

过滤案例

箭头函数

过滤

事件修饰符

按键修饰符

表单控制

vue框架3的更多相关文章

随机推荐

热门专题