es6对象语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body></body>
<script>// es6对象写法// 1.基础写法var userinfo={'username':'lyz','age':18}console.log(userinfo)// 2.省略key的引号var userinfo={'username':'lyz','age':18}console.log(userinfo)// 3.对象中直接放变量var name='lyz'var age=18var userinfo={name,age}console.log(userinfo)// 4.对象中方法var name='lyz'var age=18var userinfo={name,age,'showName':function () {console.log(name)console.log(this) // this 相当于当前实例对象console.log(this.name)}}userinfo.showName()// 5. 方法简写var showName=function () {console.log(this) // 如果不在实例对象内部，this就代指window对象，就是bom对象console.log('另一个取名字的方式：' + this.name)}showName()var name='lyz'var age=18var userinfo={name,age,showName}userinfo.showName()// 6.最终var name = 'lyz'var age = 18var userinfo={name,age,showName(){console.log(name)}}userinfo.showName()
</script>
</html>列表渲染-v-for指令
v-for基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><p v-for="item in names">{{item}}</p>
</div></body>
<script>var vm = new Vue({el: '#app',data: {names: ['老刘', '点多', '各个']},})
</script>
</html>显示购物车案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>购物车</h1><div v-if="goodsList.length==0">购物车什么都木有</div><table v-else><thead><tr><th>商品id</th><th>商品名字</th><th>商品数量</th><th>商品价格</th><th>商品图片</th></tr></thead><tbody><tr v-for="item in goodsList"><th>{{item.id}}</th><td>{{item.name}}</td><td>{{item.count}}</td><td>{{item.price}}</td><td><img :src="item.img" alt="" width="50px" height="50px"></td></tr></tbody></table><button @click="loadData">加载购物车</button>
</div>
</body>
<script>var vm = new Vue({el: '#d1',data: {goodsList: []},methods: {loadData() {this.goodsList = [{id: 1, name: '短裙', count: 2, price: 99, img: './img/1.png'},{id: 2, name: '短裤', count: 6, price: 88, img: './img/1.png'},{id: 3, name: '短袖', count: 3, price: 109, img: './img/1.png'},{id: 4, name: '卫衣', count: 1, price: 55, img: './img/1.png'},{id: 5, name: '黑丝', count: 200, price: 9.9, img: './img/1.png'},]}}})
</script>
</html>v-for可以循环的类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>循环数组</h1><ul><!-- vue循环数组值在前，索引在后--><li v-for="(item,index) in names">{{item}}---{{index}}</li></ul><h1>循环对象</h1><ul><!-- vue循环对象值在前，关键字在后--><li v-for="(value,key) in userinfo">{{value}}---{{key}}</li></ul><h1>循环字符串</h1><ul><!-- vue循环字符串值在前，索引在后--><li v-for="(value,index) in s">{{value}}---{{index}}</li></ul><h1>循环数字</h1><ul><!-- vue循环数字值在前，索引在后--><li v-for="(item,index) in 10">{{item}}--->{{index}}</li></ul>
</div>
</body>
<script>var vm = new Vue({el: '#d1',data: {names: ['张三', '彭于晏', '迪丽热巴', 'lyz'],userinfo: {name: 'lyz', age: 18, hobby: '足球'},s: '学技术 养活自己',}})
</script>
</html>js的循环方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="./js/jq.js"></script>
</head>
<body>
</body>
<script>// js的循环方式// 1. 基于索引的循环for (var i=0;i<10;i++){console.log(i)}// 2. in 循环// 2.1 循环数组var names=['lyz', '小红', '小黄']for (item in names){console.log(item) //循环出的是索引console.log(names[item]) //取值}// 2.2 循环对象var userinfo={name:'lyz',age:18}for (item in userinfo){console.log(item) //循环出的是keyconsole.log(userinfo[item]) //取值}// 2.3 循环字符串var s='学技术 养活自己'for (item in s){console.log(item) //循环出的是索引console.log(s[item])}// 3. of 循环// 3.1 循环数组var names=['lyz', '小红', '小黄']for (item of names){console.log(item) //循环出的是值}// 3.2 循环对象// 对象 不能用of循环// 3.3 循环字符串var s='学技术 养活自己'for (item of s){console.log(item) //循环出的是值}// 3.3 循环数字// 数字 不能用of循环// 4 数组的方法，实现循环var names=['lyz', '小红', '小黄']names.forEach(function (value,index) {console.log(index)console.log(value)})var userinfo = {'name': 'lyz', 'age': 18} // 没有循环方法// 5 jq 的each循环var names = ['lyz', '小红', '小黄']$.each(names, function (index, value) {console.log(index)console.log(value)})var userinfo = {'name': 'lyz', 'age': 18}$.each(userinfo, function (key, value) {console.log(key)console.log(value)})
</script>
</html>事件处理
input 表示的事件
-blur ：失去焦点
-focus：得到焦点
-change ：内容发生变化
-input： 只要输入内容就触发
基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>v-mode指令</h1>用户名：<input type="text" v-model="name"> --- {{name}}<h1>blur：失去焦点</h1><input type="text" v-model="data01" @blur="haneldBlur"> --- {{data01}}<h1>focus：得到焦点</h1><input type="text" v-model="data02" @blur="haneldFocus"> --- {{data02}}<h1>change：内容发生变化</h1><input type="text" v-model="data03" @blur="haneldChange"> --- {{data03}}<h1>input：只要输入内容就触发</h1><input type="text" v-model="data04" @blur="haneldInput"> --- {{data04}}
</div>
</body>
<script>var vm = new Vue({el: '#d1',data: {name: '',data01: '',data02: '',data03: '',data04: '',},methods: {haneldBlur() {alert(this.data01)},haneldFocus() {console.log('学技术，养活自己')},haneldChange() {console.log(this.data03)},haneldInput() {console.log(this.data04)}}})
</script>
</html>过滤案例
补充1 数组的过滤
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
</body>
<script>var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf']// var newDataList = dataList.filter(function (item) {// // return true //过滤完所有的都要// return false // 过滤完所有的都不要// })// console.log(newDataList)var newDataList =dataList.filter(function (item) {if (item.length>2){return true // 过滤出长度大于2的}else {return false}})console.log(newDataList)
</script>
</html>补充2 判断子字符串是否在字符串中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>var i='a'var j='abc'var res=j.indexOf(i) // 结果是索引0，子字符串在字符串的哪个位置console.log(res)
</script>
</html>补充3 箭头函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>// 1 正常匿名函数写法var f = function () {console.log('fff')}f()// 2 箭头函数写法var f = () => {console.log('fff')}f()// 3 箭头函数有参数var f = (name) => {console.log(name)}f('lyz')// 4 如果只有一个参数，可以简写，有多个参数必须加在括号中var f = name => {console.log(name)}f('lyz')// 5 箭头函数有返回值,没有其他代码，可以简写var f = name => name + '好好学技术'var res = f('lyz')console.log(res)// 6 其他案例var f = function (a, b) {return a + b}var f = (a, b) => a + b// 7 箭头函数没有自己的this，箭头函数中使用的this，是它上一层的this
</script>
</html>过滤案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>过滤案例</h1><input type="text" v-model="search" @input="handleSearch"><ul><li v-for="item in newDataList">{{item}}</li></ul>
</div>
</body>
<script>var vm = new Vue({el: '#d1',data: {search: '',dataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],},methods: {// 1 写法一// handleSearch() {// var _this = this// this.newDataList = this.dataList.filter(function (item) {// if(item.indexOf(_this.search) >= 0) {// return true// } else {// return false// }// })// }// 2 写法2 使用箭头函数// handleSearch() {// var _this = this// this.newDataList = this.dataList.filter (item=>{// if (item.indexOf(_this.search) >= 0) {// return true// } else {// return false// }// })// }// 3 最终写法handleSearch() {var _this = thisthis.newDataList = this.dataList.filter(item => item.indexOf(_this.search) >= 0)}}})
</script>
</html>事件修饰符
修饰点击事件的 修饰符
once：只点击一次
prevent：阻止a的跳转
self：父签上用 ，只处理自己的事件，子控件冒泡的事件不处理
stop：子标签上用只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>事件修饰符</h1><h2>once 只点击一次</h2><button @click.once="haneldClick">点我弹窗<</button><h2>prevent 阻止a的跳转</h2><a href="http://www.baidu.com" @click.prevent="haneldA">点我看美女</a><h3>stop，子标签上用只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）</h3><ul @click="handlelul"><li @click.stop="handleli">li001--不让事件往上冒泡了</li><li>li002</li></ul><h3>self，父签上用 ，只处理自己的事件，子控件冒泡的事件不处理</h3><ul @click.self="handlelul"><li @click="handleli">li001</li><li>li002</li></ul>
</div>
</body>
<script>var vm = new Vue({el: '#d1',data: {},methods: {haneldClick() {alert('点了')},haneldA() {console.log('点了')},handleli() {console.log('li被点击了')},handlelul() {console.log('ul被点击了')}}})
</script>
</html>按键修饰符
按键是个事件--》keyup keydown
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>按键事件</h1><input type="text" @keyup="handleUp"><h2>按键修饰符</h2><input type="text" @keyup.enter="handleUp02"><input type="text" @keyup.13="handleUp03">
</div>
</body>
<script>var vm = new Vue({el: '#d1',data: {},methods: {handleUp(event) {console.log(event.key)},handleUp02() { //只有按了回车，再触发函数执行console.log('回车被敲了')},handleUp03() {console.log('13对应的按键被按下了')}}})
</script>
</html>数据双向绑定
# v-model 指令，只针对于input标签
# 使用v-model绑定后，只要变量发生变化，页面就变化，只要页面变化，变量就变化
表单控制
checkbox选中，单选，多选,radio
input 标签，使用 v-model 双向绑定
text
password
checkbox
file
radio
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script></head>
<body>
<div id="app"><h1>checkbox</h1><h2>用户登录示例</h2><p>用户名：<input type="text" v-model="username"></p><p>密码：<input type="password" v-model="pwd"></p><p>记住密码：<input type="checkbox" v-model="rem"></p><p>爱好：<br><input type="checkbox" v-model="hobbys" value="篮球">篮球</p><input type="checkbox" v-model="hobbys" value="足球">足球</p><input type="checkbox" v-model="hobbys" value="乒乓球">乒乓球</p><br><input type="radio" v-model="radio" value="男">男<input type="radio" v-model="radio" value="女">女<input type="radio" v-model="radio" value="保密">保密<button @click="handleSubmit">登录</button></div>
</body><script>var vm = new Vue({el: '#app',data: {username: '',pwd: '',rem: '', // 只做选中不选中判断 使用布尔hobbys: [], // 放多个元素用数组radio: ''},methods: {handleSubmit() {console.log(this.username, this.pwd, this.rem, this.hobbys,this.radio)}}})</script>
</html>
![[Vulnhub靶机] DriftingBlues: 5](http://pic.xiahunao.cn/[Vulnhub靶机] DriftingBlues: 5)
)
