vue-day03

昨日回顾
今日内容

昨日回顾

 # 1 mvvm 演示
# 2 插值语法 {{}}
 	-三目运算符    条件?'':''
    
   
# 3 文本指令
	-v-xx  vue的指令, 放在标签上
  	-v-text='变量'
    -v-html=
    -v-show    style
    -v-if   	标签整个删除和插入
    
   
# 4 事件指令
	v-on:事件名='函数'  简写   @事件=''
 
# 5 属性指令
	v-blind:属性='变量'	 简写成 :属性='值'
            
# 6 style class
	-字符串，数组，对象
# 7 v-if v-else-if v-else
 
# 8 v-for='item in 数组,对象. 字符串,数字'

今日内容

一. js的几种循环方式

1.1 v-for可以循环的变量

 v-for 可以循环数组，数字，字符串，对象
 
v-for = "key in obj"
 
-如果是数组: key就是数组的一个个元素
-如果是数字: key就是从1开始的一个个数字
-如果是字符串: key就是一个个字符串
-如果是对象: key就是一个个value的值
    
   
v-for="(key,value) in obj"
-如果是数组:key就是数组的一个个元素，value就是索引
-如果是数字: key就是从1开始的一个个数字,value就是索引
-如果是字符串: key就是一个个字符串，value就是索引
-如果是对象: key就是一个个value的值，value就是一个个key

 <!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">
 
        <h1>v-for可以循环什么？</h1>
        <h2>循环数组</h2>
        <span v-for="item in l">{{item}}</span>
        <h2>循环数组带索引</h2>
        <div v-for="(item,index) in l">第 {{index + 1}}个，值是：{{item}}</div>
 
        <h2>循环对象,默认是value</h2>
        <div v-for="item in info">{{item}}</div>
        <h2>循环对象,带key和value</h2>
        <div v-for="(item,key) in info">key值是：{{key}}-----{{item}}</div>
 
        <h2>循环字符串</h2>
        <div v-for="item in s">
            <p v-if="item!=' '">{{item}}</p>
            <br v-else>
        </div>
        <h2>循环字符串-带索引</h2>
        <div v-for="(item,index) in s">
 
            <p v-if="item!=' '">{{item}}---->索引是：{{index}}</p>
            <br v-else>
        </div>
 
 
        <h2>循环数字</h2>
        <div v-for="item in 8">{{item}}</div>
        <h2>循环数字-带索引</h2>
        <div v-for="(item,index) in 8">{{item}}----索引是：{{index}}</div>
 
 
    </div>
 
</div>
</body>
<script>
    var l1 = [4, 5, 6,]
    new Vue({
        el: '.app',
        data: {
            l: [1, 2, 3],
            info: {name: 'lqz', age: 19, l1},
            s: 'hello               world'
        },
        methods: {},
    })
</script>
</html>

1.2 js的循环方式

 // js 的循环 基于索引的循环  python 没有基于索引的循环, python都是基于迭代的循环
   // var a = [4, 5, 6, 7]
    // for(i=0;i<10;i++){
    // for (i = 0; i < a.length; i++) {
    //     // console.log(i)
    //     console.log(a[i])
    // }
       
    //  2 js 的in 循环 拿到是索引   跟vue的v-for区别
       
     var a = [4,5,6,7]
     for (i in a ) {
         // console.log(i)
         console.log(a[i])
     }
        
     // 3 es 6语法   of  循环
     var a = [4, 5, 6, 7]
    	for (item of a) {
       		console.log(item)
     }
      
     //4 数组的方法, forEach可以循环
        var a = [4,5,6,7]
        a.forEach(function(item){
            console.log('----',item)
        })
	
        
    // 5 jq 的循环  循环数组 对象
    var a = [4,5,6,7]
        $.each(a, function (index, item) {
        console.log(index)
        console.log(item)

二、key值得解释

 # vue的v-for写在标签上，在标签上加一个key，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟dom的替换，从而提高循环效率，key值必须唯一
<div v-for="item in 8"  :key="item">{{item}}</div>
    
    
# 尽量写上

每次循环的标签上，一般都会带一个属性：

 :key='值必须唯一'

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

当我们在对象中新增一个key-value，发现页面没有变化

举例:

当我们在js代码或是浏览器的控制台中，对某个对象添加一对原本没有的键值对，我们会发现这个新增的内容并没有被渲染到网页上

 this.info['name'] = '彭于晏'
这里我们可以在对象中设置name键值对，然后修改，去网页看是否变化
然后不要定义hobby键值对，然后后手添加，我们会发现网页没有变化但是数据添加进去了
this.info['hobby'] = '篮球'

以后我们想添加数据并且能被vue自动识别添加到网页上需要用下方的方式添加数据

 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>
    <div class="app">
 
        <h1>循环对象</h1>
        <div v-for="(value,key) in info">
            <h3>key值是：{{key}}</h3>
            <h2>value是：{{value}}</h2>
            <hr>
        </div>
        <button @click="handleAdd">点我，加数据</button>
 
 
    </div>
 
</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            info: {name: 'lqz', age: 19},
        },
        methods: {
            handleAdd() {
                // 页面会变化
                // this.info['name'] = '彭于晏'
                // 页面不会变，单是值有了
                // this.info['hobby'] = '篮球'
 
                // 遇到数据变了，页面没变的情况，都是用
                Vue.set(this.info, 'hobby', '篮球')
 
            }
        },
    })
</script>
</html>

四、input事件

 # input 的事件：
 click
 input			当输入框进行输入的时候 触发的事件
 change			当元素的值发生改变时 触发的事件
 blur			当输入框失去焦点的时候 触发的事件
 foucs			当获得焦点 触发的事件

 <!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">
        <h1>点击事件click</h1>
        <input type="text" @click="handleClick">
 
        <h1>失去焦点</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>
 
</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {},
        methods: {
            handleClick() {
                alert('点了')
            },
            handleBlur() {
                console.log('失去了')
            },
            handleInput() {
                console.log('输入了东西')
            },
            handleChange() {
                console.log('我变了')
            },
            handleFocus() {
                console.log('我获得了')
            }
        }
 
    })
</script>
</html>

五、v-model双向数据绑定

 input 可以输入值，输入后 就被js变量拿到， 如果使用:value='变量' 这种形式, 页面中输入框变化，变量的值不会变，
    需要使用v-model做双向数据绑定，这样变量的值才能被修改

 <!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">
        <h1>单向数据绑定</h1>
        <input type="text" :value="name">---->{{name}}--->单向数据绑定
        <h1>双向数据绑定</h1>
        <input type="text" v-model="age">---->{{age}}--->双向数据绑定
 
    </div>
 
</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            name: 'lqz',
            age:10
        },
 
    })
</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">
        <h1>过滤案例</h1>
        <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() {
                                // // 简化版本一
                // var _this = this
                // this.newDataList = this.dataList.filter(item => {
                //     // 判断item在不在myText中
                //
                //     // this 指向问题
                //     // if (_this.myText.indexOf(item) >= 0) {    // 判断输入的值myText是否在item中
                //     if (item.indexOf(_this.myText) >= 0) {
                //         return true
                //     } else {
                //         return false
                //     }
 
                // // 简化版本二
                // this.newDataList = this.dataList.filter(item => {
                //     // 判断item在不在myText中
                //
                //     // this 指向问题
                //     // if (_this.myText.indexOf(item) >= 0) {    // 判断输入的值myText是否在item中
                //     // if (item.indexOf(_this.myText) >= 0) {
                //     //     return true
                //     // } else {
                //     //     return false
                //     // }
                //
                //     //上面5行，简写成
                //     return item.indexOf(this.myText) >= 0
                //
                //
                // })
 
                // 简化版本三
                this.newDataList = this.dataList.filter(
                    item => item.indexOf(this.myText) >= 0
 
                )
            },
        }
 
    })
 
 
    // 补充1 ：数组的过滤方法
    // var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    // var newDataList = dataList.filter(function (item) {
    //     return false  // return true表示这个值保留,false 表示这个值不要
    // })
    // console.log(newDataList)
	'过滤的工作流程就是获取数组中的值进行判断，返回true就保留这个值，返回false就不要这个值'
 
    // 补充2 ：字符串的indexOf方法，判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回-1
    // 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'
    // }
 
    var f = item => item + 'lqz'
 
    var res = f('lqz')
    console.log(res)
 
 
 
</script>
</html>

ps:在编写这个实时过滤功能的时候，关键问题就是用于展示的数组，在使用filter过滤的时候内容会被替换，因此我们需要一个新的数组来接收过滤出来的内容

七、事件修饰符（了解）

事件修饰符	释义
.stop	只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡）
.self	只处理自己的事件，子控件冒泡的事件不处理
.prevent	阻止a链接的跳转
.once	事件只会触发一次（适用于抽奖页面）

 学过事件: click.change input..
    
 
我们学习这些修饰符主要是修饰click事件
这里的stop等于是子控件不影响父空间，self等于是父控件让自己不受子控件的影响

 <!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">
      	<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>
    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.cnblogs.com'
 
            },
            handleClick() {
                console.log('我被点了')
            }
        }
 
    })
</script>
</html>

八、按键修饰符

按键事件

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

 @keyup
'按键按下去之后，在松开的时候会触发'
@keypress
'按键按下去再松开触发（完成一次按压）'
@keydown
'按键按下去的时候触发'
 
@keyup="handleKeyUp"

按键修饰符

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

 @keyup.enter
@keyup.13
 
 
    <div class="app">
        <input type="text" v-model="text" @keyup.enter="handleKeyUp($event)">--->{{text}}
    </div>
    <script>
    var vm = new Vue({
        el: '.app',
        data: {
            text: ''
        },
        methods: {
            handleKeyUp(event) {
                // console.log('按键被按下了')
                // keyCode 对照表https://blog.csdn.net/zqian1994/article/details/109486445
                // console.log('按钮被按下了：', event.key, event.keyCode)
                if (event.keyCode == 13) {
                    console.log('开始跟后端交换搜索了')
                }
            },
        }
 
    })

我们在handleKeyUp这个方法的形参中定义一个参数，这时候如果点击键盘触发按键事件，就会把键盘上点击的按键绑定给这个形参，这时候我们打印这个参数，可以发现他是一个对象

通过浏览器的控制台我们可以点开查看他内部的键值对，key这个键对应的是我们输入的a，因此我们可以通过key来获取键盘输入的字符同时我们也会看到一个键值对叫keyCode，他返回的是一些数字，我们也可以通过keyCode的值来判断某个按键是否被点击了

补充知识

九、表单控制

 # input标签中可以通过type属性控制变量类型  ----》变量类型是什么？ 
type属性
	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>
    <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>
 
</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>

posted @ 2023-02-15 21:50 性格如此w 阅读(17) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue-day02插值语法、文本指令、属性指令、事件指令、class和style、条件渲染、列表渲染

· vue day06

· vueday3

· vue_day03

· vue---day03（js的几种循环方式,key值的解释,数组与对象的检测与更新，input事件，过滤案例，v-model双向数据绑定，事件修饰符，按键修饰符，表单控制）

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构

公告

昵称：性格如此w
园龄： 2年5个月
粉丝： 9
关注： 6

+加关注

2025年3月

日

一

二

三

四

五

六

	# input 的事件：
	click
	input 当输入框进行输入的时候触发的事件
	change 当元素的值发生改变时触发的事件
	blur 当输入框失去焦点的时候触发的事件
	foucs 当获得焦点触发的事件

weiyejing

vue-day03

昨日回顾

今日内容

一. js的几种循环方式

1.1 v-for可以循环的变量

1.2 js的循环方式

二、key值得解释

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

四、input事件

五、v-model双向数据绑定

六、过滤案例

七、事件修饰符（了解）

八、按键修饰符

按键事件

按键修饰符

九、表单控制

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

	# 1 mvvm 演示
	# 2 插值语法 {{}}
	-三目运算符条件?'':''


	# 3 文本指令
	-v-xx vue的指令, 放在标签上
	-v-text='变量'
	-v-html=
	-v-show style
	-v-if 标签整个删除和插入


	# 4 事件指令
	v-on:事件名='函数' 简写 @事件=''

	# 5 属性指令
	v-blind:属性='变量' 简写成 :属性='值'

	# 6 style class
	-字符串，数组，对象
	# 7 v-if v-else-if v-else

	# 8 v-for='item in 数组,对象. 字符串,数字'

	v-for 可以循环数组，数字，字符串，对象

	v-for = "key in obj"

	-如果是数组: key就是数组的一个个元素
	-如果是数字: key就是从1开始的一个个数字
	-如果是字符串: key就是一个个字符串
	-如果是对象: key就是一个个value的值


	v-for="(key,value) in obj"
	-如果是数组:key就是数组的一个个元素，value就是索引
	-如果是数字: key就是从1开始的一个个数字,value就是索引
	-如果是字符串: key就是一个个字符串，value就是索引
	-如果是对象: key就是一个个value的值，value就是一个个key

	<!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">

	<h1>v-for可以循环什么？</h1>
	<h2>循环数组</h2>
	<span v-for="item in l">{{item}}</span>
	<h2>循环数组带索引</h2>
	<div v-for="(item,index) in l">第 {{index + 1}}个，值是：{{item}}</div>

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

	<h2>循环字符串</h2>
	<div v-for="item in s">
	<p v-if="item!=' '">{{item}}</p>
	<br v-else>
	</div>
	<h2>循环字符串-带索引</h2>
	<div v-for="(item,index) in s">

	<p v-if="item!=' '">{{item}}---->索引是：{{index}}</p>
	<br v-else>
	</div>


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


	</div>

	</div>
	</body>
	<script>
	var l1 = [4, 5, 6,]
	new Vue({
	el: '.app',
	data: {
	l: [1, 2, 3],
	info: {name: 'lqz', age: 19, l1},
	s: 'hello world'
	},
	methods: {},
	})
	</script>
	</html>

	// js 的循环基于索引的循环 python 没有基于索引的循环, python都是基于迭代的循环
	// var a = [4, 5, 6, 7]
	// for(i=0;i<10;i++){
	// for (i = 0; i < a.length; i++) {
	// // console.log(i)
	// console.log(a[i])
	// }

	// 2 js 的in 循环拿到是索引跟vue的v-for区别

	var a = [4,5,6,7]
	for (i in a ) {
	// console.log(i)
	console.log(a[i])
	}

	// 3 es 6语法 of 循环
	var a = [4, 5, 6, 7]
	for (item of a) {
	console.log(item)
	}

	//4 数组的方法, forEach可以循环
	var a = [4,5,6,7]
	a.forEach(function(item){
	console.log('----',item)
	})


	// 5 jq 的循环循环数组对象
	var a = [4,5,6,7]
	$.each(a, function (index, item) {
	console.log(index)
	console.log(item)

	# vue的v-for写在标签上，在标签上加一个key，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟dom的替换，从而提高循环效率，key值必须唯一
	<div v-for="item in 8" :key="item">{{item}}</div>


	# 尽量写上

	this.info['name'] = '彭于晏'
	这里我们可以在对象中设置name键值对，然后修改，去网页看是否变化
	然后不要定义hobby键值对，然后后手添加，我们会发现网页没有变化但是数据添加进去了
	this.info['hobby'] = '篮球'

	input 可以输入值，输入后就被js变量拿到，如果使用:value='变量' 这种形式, 页面中输入框变化，变量的值不会变，
	需要使用v-model做双向数据绑定，这样变量的值才能被修改

	学过事件: click.change input..


	我们学习这些修饰符主要是修饰click事件
	这里的stop等于是子控件不影响父空间，self等于是父控件让自己不受子控件的影响

	@keyup
	'按键按下去之后，在松开的时候会触发'
	@keypress
	'按键按下去再松开触发（完成一次按压）'
	@keydown
	'按键按下去的时候触发'

	@keyup="handleKeyUp"

	@keyup.enter
	@keyup.13


	<div class="app">
	<input type="text" v-model="text" @keyup.enter="handleKeyUp($event)">--->{{text}}
	</div>
	<script>
	var vm = new Vue({
	el: '.app',
	data: {
	text: ''
	},
	methods: {
	handleKeyUp(event) {
	// console.log('按键被按下了')
	// keyCode 对照表https://blog.csdn.net/zqian1994/article/details/109486445
	// console.log('按钮被按下了：', event.key, event.keyCode)
	if (event.keyCode == 13) {
	console.log('开始跟后端交换搜索了')
	}
	},
	}

	})

	# input标签中可以通过type属性控制变量类型 ----》变量类型是什么？
	type属性
	text 类型
	radio：单选
	checkbox：单选和多选

weiyejing

vue-day03

昨日回顾

今日内容

一. js的几种循环方式

1.1 v-for可以循环的变量

1.2 js的循环方式

二、key值得解释

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

四、input事件

五、v-model双向数据绑定

六、过滤案例

七、事件修饰符（了解）

八、按键修饰符

按键事件

按键修饰符

九、表单控制

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

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