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=18
var userinfo={name,age}
console.log(userinfo)
// 4.对象中方法
var name='lyz'
var age=18
var 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=18
var userinfo={
name,age,showName
}
userinfo.showName()
// 6.最终
var name = 'lyz'
var age = 18
var 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) //循环出的是key
console.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 = this
this.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>
