<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script></head><body><divid="app"><ul><liv-for="item in names">{{item}}</li></ul><hr><pv-for="item in names">名字：{{item}}</p><hr><ahref=""v-for="name in names">{{name}}</a><hr><divv-for="name in names"><ahref="">{{name}}</a></div></div></body><script>var vm =newVue({el:'#app',data:{names:['张三','彭于晏','迪丽热巴','lqz']},})// es6 对象写法// 1 基础写法// var userinfo={'name':'lqz','age':19}// console.log(userinfo)// 2 省略key的引号 key 值不能出 - js 变量名中不能出现 -// var userinfo = {name: 'lqz', age: 19}// console.log(userinfo)// 3 对象中直接放变量// var name = 'lqz'// var age = 19// var userinfo = {name, age} // {name: 'lqz', age: 19}// console.log(userinfo)// 4 对象中 方法// var name = 'lqz'// var age = 19// var userinfo = {// name, age, 'showName': function () {// console.log('名字是：'+name)// console.log(this) // python 对象中 有self， 这个this就是当前 实例对象// console.log('另一个取名字的方式：'+this.name) // python 对象中 有self， 这个this就是当前 实例对// }// }// userinfo.showName()// 5 方法简写// 如果不在 实例对象内部 this代指window对象，就是bom对象，this可以不写// 后期会遇到this指向的问题// var showName = function () {// // console.log(this.location) // 代指当前window对象 浏览器，bom对象// // console.log(location) // 代指当前window对象 浏览器，bom对象,不写this// console.log('另一个取名字的方式：' + this.name)// }// var name = 'lqz'// var age = 19// var userinfo = {// name, age, showName// }// userinfo.showName()// 6 最终// var name = 'lqz'// var age = 19// var userinfo = {// name, age, showName() {// console.log('另一个取名字的方式：' + this.name)// }// }/*showName(){console.log('另一个取名字的方式：' + this.name)}showName:function(){console.log('另一个取名字的方式：' + this.name)}*/</script></html>
1.2 显示购物车案例
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"crossorigin="anonymous"><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"crossorigin="anonymous"></script></head><body><divid="app"><divclass="container"><divclass="row"><divclass="col-md-6 offset-3"><h1class="text-center">购物车</h1><divv-if="goodsList.length==0">购物车空空如也</div><tableclass="table"v-else><thead><tr><thscope="col">商品id</th><thscope="col">商品名字</th><thscope="col">商品数量</th><thscope="col">商品价格</th><thscope="col">商品图片</th></tr></thead><tbody><trclass="table-danger"v-for="good in goodsList"><thscope="row">{{good.id}}</th><td>{{good.name}}</td><td>{{good.count}}</td><td>{{good.price}}</td><td><img:src="good.img"alt=""width="50px"height="50px"></td></tr></tbody></table><buttonclass="btn btn-danger"@click="loadData">加载购物车</button></div></div></div></div></body><script>var vm =newVue({el:'#app',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>
1.3 v-for可以循环的类型
## 跟js的in 是反的
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script><scriptsrc="./js/jq.js"></script></head><body><divid="app"><h1>循环数组</h1><ul><liv-for="(item,index) in names">{{item}}--->{{index}}</li></ul><hr><h1>循环对象</h1><ul><liv-for="(value,key) in userinfo">key是:{{key}}----value是：{{value}}</li></ul><hr><h1>循环字符串</h1><ul><liv-for="(value,index) in s">{{value}}---{{index}}</li></ul><hr><h1>循环数字</h1><ul><liv-for="(item,index) in 10">{{item}}--->{{index}}</li></ul><hr></div></body><script>var vm =newVue({el:'#app',data:{names:['张三','彭于晏','迪丽热巴','lqz'],userinfo:{name:'lqz',age:19,hobby:'篮球'},s:'lqz is handsome'},})// 补充：js的循环方式// 1 基于索引的循环---》最基本的// for (var i = 0; i < 10; i++) {// console.log(i)// }// 2 in 循环// var names = ['lqz', '小红', '小吕'] // 数组// for (item in names) { // 循环索引// // console.log(item)// console.log(names[item])// }// var userinfo = {'name': 'lqz', 'age': 19} // 对象// for (item in userinfo) { // 循环的是key// console.log(userinfo[item])// }// var s = 'lqz' // 字符串// for (item in s) { //索引// console.log(s[item])// }// 3 of 循环// var names = ['lqz', '小红', '小吕'] // 数组// for (item of names) { // 循环 具体值// console.log(item)// }// var userinfo = {'name': 'lqz', 'age': 19} // 对象 不能用of循环// for (item of userinfo) { // 循环的是value// console.log(item)// }// var s = 'lqz' // 字符串// for (item of s) { // 循环 value// console.log(item)// }// for (item of 10) { // 不能循环数字// console.log(item)// }// 4 数组的方法，实现循环// var names = ['lqz', '小红', '小吕']// names.forEach(function (value,index) {// console.log(index)// console.log(value)// })// var userinfo = {'name': 'lqz', 'age': 19} // 没有循环方法// 5 jq 的each循环// var names = ['lqz', '小红', '小吕']// $.each(names, function (index, value) {// console.log(index)// console.log(value)// })var userinfo ={'name':'lqz','age':19}$.each(userinfo,function(key, value){console.log(key)console.log(value)})</script></html>
1.4 js中循环方式
// 补充：js的循环方式// 1 基于索引的循环---》最基本的// for (var i = 0; i < 10; i++) {// console.log(i)// }// 2 in 循环// var names = ['lqz', '小红', '小吕'] // 数组// for (item in names) { // 循环索引// // console.log(item)// console.log(names[item])// }// var userinfo = {'name': 'lqz', 'age': 19} // 对象// for (item in userinfo) { // 循环的是key// console.log(userinfo[item])// }// var s = 'lqz' // 字符串// for (item in s) { //索引// console.log(s[item])// }// 3 of 循环// var names = ['lqz', '小红', '小吕'] // 数组// for (item of names) { // 循环 具体值// console.log(item)// }// var userinfo = {'name': 'lqz', 'age': 19} // 对象 不能用of循环// for (item of userinfo) { // 循环的是value// console.log(item)// }// var s = 'lqz' // 字符串// for (item of s) { // 循环 value// console.log(item)// }// for (item of 10) { // 不能循环数字// console.log(item)// }// 4 数组的方法，实现循环// var names = ['lqz', '小红', '小吕']// names.forEach(function (value,index) {// console.log(index)// console.log(value)// })// var userinfo = {'name': 'lqz', 'age': 19} // 没有循环方法// 5 jq 的each循环// var names = ['lqz', '小红', '小吕']// $.each(names, function (index, value) {// console.log(index)// console.log(value)// })var userinfo ={'name':'lqz','age':19}$.each(userinfo,function(key, value){console.log(key)console.log(value)})
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script></head><body><divid="app"><h1>v-mode指令</h1>用户名：<inputtype="text"v-model="name">--》{{name}}<h2>blur</h2><inputtype="text"v-model="data01"@blur="haneldBlur">--》{{data01}}<h2>focus</h2><inputtype="text"v-model="data02"@focus="haneldFocus">--》{{data02}}<h2>change</h2><inputtype="text"v-model="data03"@change="haneldChange">--》{{data03}}<h2>input</h2><inputtype="text"v-model="data04"@input="haneldInput">--》{{data04}}
</div></body><script>var vm =newVue({el:'#app',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>
2.2 过滤案例
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script></head><body><divid="app"><h1>过滤案例</h1><inputtype="text"v-model="search"@input="handleSearch"><ul><liv-for="item in newDataList">{{item}}</li></ul></div></body><script>var vm =newVue({el:'#app',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() {// console.log(this) // this 是vue实例// var _this = this// // 过滤dataList 中每一个是否包含用户输入的 this.search// this.newDataList = this.dataList.filter(function (item) {// console.log(_this) // this 是window对象// if (item.indexOf(_this.search) >= 0) {// return true// } else {// return false// }// })// // 存在俩问题// // 1 this指向问题 在外部，定义一个_this，内部用_this// // 2 改数据是在dataList上改的// }// 2 使用箭头函数// handleSearch() {// this.newDataList = this.dataList.filter(item => {// if (item.indexOf(this.search) >= 0) {// return true// } else {// return false// }// })// },// 3 终极方案handleSearch(){this.newDataList =this.dataList.filter(item=> item.indexOf(this.search)>=0)}}})// 11111 补充1：数组的过滤var dataList =['a','at','atom','be','beyond','bee','c','cs','csrf']//1 过滤掉所有// var newDataList = dataList.filter(function (item) {// // return false// return true// })// 2 只保留长度大于2的// var newDataList = dataList.filter(function (item) {// if (item.length > 2) {// return true// } else {// return false// }// })//3 只保留包含at的// var search = 'at'// var newDataList = dataList.filter(function (item) {// if (item.indexOf(search) >= 0) {// return true// } else {// return false// }//// })// console.log(newDataList)// 222222补充2， 判断子字符串是否在字符串中// var search = 'at'// var s = 'lqzattr'// var res = s.indexOf(search) // 子字符串在字符串的哪个位置// console.log(res)// 3333 箭头函数// 3.1 正常匿名函数写法---我们都会了// var f =function (){// console.log('ffff')// }// f()// 3.2 箭头函数写法 把function去掉，在形参括号和函数体大括号之间加个 =>// var f = () => {// console.log('ffff')// }// f()// 3.3 箭头函数有参数// var f = (name) =>{// console.log(name)// }// f('lqz')// 3.4 如果只有一个参数，可以简写成 有多个参数必须加在括号中// var f = name => {// console.log(name)// }// f('lqz')// 3.5 箭头函数有返回值// var f = name => {// return name + 'nb'// }// var res=f('lqz')// console.log(res)// 3.6 箭头函数有返回值,没有其他代码，可以简写// var f = name => name + 'nnb'//// var res = f('lqz')// console.log(res)// 3.7 其他案例 add// var f1 = function (a, b) {// return a + b// }// var f1 = (a, b) => a + b// var f1 = a => a + 100// 3.8 箭头函数没有自己的this，箭头函数中使用的this，是它上一层的this</script></html>
