1 vue插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
我的名字是：{{name}}
<br>
我的年龄:{{age}}
<br>
{{list1[0]}}
<br>
{{obj1.name}}---->{{obj1['age']}}
<br>
{{link1}} 处理了xss攻击
<br>
运算(简单的js语法)：{{10+20+30+40}}
<br>
三目运算符：{{10 < 20?'是':'否'}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'lqz',
age: 19,
list1: [1, 2, 3, 4], // 数组
obj1: {name: 'Darker', age: 19}, // 对象
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
}
})
</script>
</html>
2 vue指令之文本指令
# 指令就是写在标签上以 v-xx 开头的都是vue的指令，有特殊含义，做一些处理
v-html 让HTML渲染成标签
v-text 标签内容显示js变量对应的值 （很像插值）
v-show 放1个布尔值：为真 标签就显示；为假 标签就不显示 只是隐藏
v-if 放1个布尔值：为真 标签就显示；为假 标签就不显示 dom中直接移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
{{link1}}
<hr>
文本指令之 v-html：
<div v-html="link1"></div>
<hr>
文本指令之 v-text：
<div v-text="msg"></div>
<hr>
文本指令之 v-show：
<div v-show="b"> 我是div</div>
<hr>
文本指令之 v-if：
<div v-if="b"> 我是div</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
link1: '<a class="btn btn-danger" href="https://www.baidu.com">百度一下 你就知道</a>',
msg: 'lqz is handsome',
b: true
}
})
</script>
</html>
4 vue指令之事件指令
# 事件指令的语法
-v-on:click='' # 老语法
-@click='' # 新语法，简写成@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!--<button class="btn btn-success" v-on:click="handleClick"> 点我弹窗 </button>-->
<!-- <button class="btn btn-success" @click="handleClick"> 点我弹窗</button>-->
<button class="btn btn-success" @click="handleClick"> 点我显示不显示</button>
<div v-show="show">
我是div
</div>
<!-- <button class="btn btn-success" @click="handleClick1(1,2)"> 传递参数</button>-->
<button class="btn btn-success" @click="handleClick1(show,'true')"> 传递参数</button>
<button class="btn btn-success" @click="handleClick2($event)"> 传递事件</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick() {
//alert('我先弹')
// 只需要把show变量改成false，div就隐藏了
this.show = !this.show
},
handleClick1(a, b) {
console.log(a, b)
},
handleClick2(event) {
console.log(event)
},
}
})
</script>
</html>
5 vue指令之属性指令
v-bind 直接写js的变量或语法（不推荐）
: 直接写js的变量或语法（推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.red {
background: red;
}
.green {
background: green;
}
</style>
</head>
<body>
<div id="app">
<!-- <div class="form-control">-->
<!-- <div v-bind:class="name">-->
<button @click="handleClick">点我变色</button>
<div :class="name" :age="age">
我是div
</div>
<hr>
<img :src="src" alt="">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'red',
age:19,
src:'https://tva1.sinaimg.cn/large/008i3skNgy1gpsvuoolf9g30tm0qqn6k.gif'
},
methods: {
handleClick(){
if(this.name=='green'){
this.name='red'
}else {
this.name='green'
}
}
}
})
</script>
</html>
6 style和class
:class='字符串、js数组、对象'
class：三目运算符、数组、对象{red: true}
:style=’js变量、字符串、js数组’
style：三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.red {
color: rgba(255, 104, 104, 0.7);
}
.font_20 {
font-size: 20px;
}
.be_bold {
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<div :class="class_obj">
<!-- <div :class="10>20?'red':'be_bold'">-->
我是div
</div>
<hr>
<button @click="handleClick">点我变色</button>
<!-- <div style="font-size: 30px;background: red">-->
<div :style="style_class">
我是style的div
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// class_obj:'red' // 字符串形式
// class_obj:['red',] // 数组形式,使用push追加，多个样式同时作用 (推荐)
// class_obj:{red:true,'be_bold':false} // 对象（字典）形式,
// style_class:'background:red' //字符串
// style_class: [{background: 'red'}, {fontSize: '30px'}] //数组形式
style_class: { background: 'green',fontSize: '30px'} //对象形式（推荐） xx-xx形式转成驼峰
},
methods: {
handleClick(){
this.style_class.background='red'
this.style_class.fontSize='20px'
}
}
})
</script>
</html>
7 条件渲染
v-if 相当于： if
v-else 相当于：else
v-else-if 相当于：else if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<h1 v-if="score>90">优秀</h1>
<h1 v-else-if="score>80 && score <=90">良好</h1>
<h1 v-else-if="score>=60 && score <=80">及格</h1>
<h1 v-else>不及格</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
score: '88'
},
methods: {}
})
</script>
</html>
8 列表渲染
v-for：循环显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<button @click="refresh">点我刷新购物车</button>
<button @click="add">点我加入购物车</button>
<button @click="delete_good">点我删除一个</button>
<div v-if="show">
购物车空空如也
</div>
<table v-else>
<tr>
<td>商品名称</td>
<td>价格</td>
</tr>
<tr v-for="good in goods">
<td>{{good.name}}</td>
<td>{{good.price}}</td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true,
goods: [{name: '特斯拉', price: 1999999}, {name: '鸡蛋', price: 2}, {name: '钢笔', price: 5}]
},
methods: {
refresh() {
this.show = false
},
add() {
this.goods.push({name: '苹果', price: 55})
},
delete_good(){
this.goods.pop()
}
}
})
</script>
</html>
0 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">
<h1>循环数字</h1>
<p v-for="i in 4">数字为：{{i}}</p>
<hr>
<h1>循环数组</h1>
<p v-for="(item,i) in l">人名为：{{item}},索引为：{{i}}</p>
<hr>
<h1>循环对象</h1>
<p v-for="(value,key) in obj" :key="value">key值是：{{key}}，value值是：{{value}}</p>
<hr>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
l: ['egon', 'lqz', '鸡哥'],
obj: {name: 'lqz', age: 19, hobby: '篮球'}
},
methods: {}
})
</script>
</html>
# vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
# 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
# 页面更新之后，会加速DOM的替换（渲染）
# :key="变量"
1 事件处理
<!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>v-model的使用</h1>
<!-- <input type="text" v-model="msg" @blur="handleBlur" @change="handleChange">-->
<input type="text" v-model="msg" @input="handleInput">
<br>
{{msg}}
<hr>
<h1></h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
handleBlur() {
console.log("blur",this.msg)
},
handleChange() {
console.log("change",this.msg)
},
handleInput(){
console.log('input',this.msg)
}
}
})
</script>
</html>
2 数据双向绑定
# v-model的使用
3 过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="mytext" @input="handleInput">
<li v-for="item in newDataList">{{item}}</li>
</div>
</body>
<script>
// 数组的过滤方法
// var l=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// var new_l=l.filter(function (item) {
// // 写逻辑
// var res=item.indexOf('at') // indexOf检测某个 字符串在另一个字符串的位置，如果不在字符串中就返回-1，如果在就返回位置
// console.log(res)
// if (res>-1){
// return true
// }else {
// return false
// }
//
// })
// console.log(new_l)
// es6语法，箭头函数,替换原来匿名函数，箭头函数内的this和外部的是一个this，普通匿名函数内部的this和外部的this不是一个
// var new_l=l.filter( (item) => {
// // 写逻辑
// var res=item.indexOf('at') // indexOf检测某个 字符串在另一个字符串的位置，如果不在字符串中就返回-1，如果在就返回位置
// console.log(res)
// if (res>-1){
// return true
// }else {
// return false
// }
//
// })
new Vue({
el: '#app',
data: {
mytext: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
handleInput() {
// console.log(this)
// var _this=this
// this.newDataList = this.dataList.filter(function (item) {
// var res = item.indexOf(_this.mytext)
// if (res > -1) {
// return true
// } else {
// return false
// }
//
// })
this.newDataList = this.dataList.filter((item) => item.indexOf(this.mytext)>-1
)
}
}
})
</script>
</html>
4 事件修饰符
.stop 只处理自己的事件，阻止事件冒泡,写在子控件中.self 只处理自己的事件，子控件冒泡的事件不处理，写在父控件中.prevent 阻止a链接的跳转.once 事件只会触发一次（适用于抽奖页面）
5 按键修饰符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script></head><body><div id="app"><!-- 当敲回车，弹出输入的内容--> <input type="text" v-model="msg" @keyup.enter="handleUp($event)"> <input type="text" v-model="msg" @keyup.esc="handleUp($event)"></div></body><script> new Vue({ el: '#app', data: { msg:'' }, methods: { handleUp(event){ console.log(event.code) } } })</script></html>
1 购物车案例
1.1 基本购物车
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> table, td { border: 1px solid black; text-align: center; } </style></head><body><div id="app"> <h1>购物车</h1> <table> <tr> <td>商品名称</td> <td>价格</td> <td>数量</td> <td>选择</td> </tr> <tr v-for="item in dataList"> <td>{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.number}}</td> <td><input type="checkbox" v-model="choice" :value="item"></td> </tr> </table> 选中的商品是：{{choice}} <br> 商品价格：{{getPrice()}}</div></body><script> let vm = new Vue({ el: '#app', data: { dataList: [ {name: '今瓶没', price: 99, number: 2}, {name: '西柚记', price: 59, number: 1}, {name: '水壶转', price: 89, number: 5}, ], choice: [] }, methods: { getPrice() { let total = 0 // for (let i = 0; i < this.choice.length; i++) { // total = total + this.choice[i].price * this.choice[i].number // } // return total // for (i in this.choice) { // 这里的 i 是索引 // total += this.choice[i]['number'] * this.choice[i]['price'] // } // es6的循环方式 // for (v of this.choice) { // 这里的 v 是数组中每一个对象 // total += v.price*v.number // } // 对象的迭代方法 this.choice.forEach((value, index) => { total += value.price * value.number }) return total } }, })</script></html>
1.2 全选全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
table, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h1>购物车</h1>
<table>
<tr>
<td>商品名称</td>
<td>价格</td>
<td>数量</td>
<td>选择 <input type="checkbox" v-model="checkAll" @change="handleAll"></td>
</tr>
<tr v-for="item in dataList">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.number}}</td>
<td><input type="checkbox" v-model="choice" :value="item" @change="checkOne"></td>
</tr>
</table>
选中的商品是：{{choice}}
<br>
商品价格：{{getPrice()}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
dataList: [
{name: '今瓶没', price: 99, number: 2},
{name: '西柚记', price: 59, number: 1},
{name: '水壶转', price: 89, number: 5},
],
choice: [],
checkAll: false
},
methods: {
getPrice() {
let total = 0
for (v of this.choice) { // 这里的 v 是数组中每一个对象
total += v.price * v.number
}
return total
},
handleAll() {
if (this.checkAll) {
this.choice = this.dataList
} else {
this.choice = []
}
},
checkOne() {
if (this.choice.length == this.dataList.length) {
this.checkAll = true
} else {
this.checkAll = false
}
}
},
})
</script>
</html>
1.3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
table, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h1>购物车</h1>
<table>
<tr>
<td>商品名称</td>
<td>价格</td>
<td>数量</td>
<td>选择 <input type="checkbox" v-model="checkAll" @change="handleAll"></td>
</tr>
<tr v-for="item in dataList">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><button @click="handleJ(item)">-</button>{{item.number}}<button @click="item.number++">+</button></td>
<td><input type="checkbox" v-model="choice" :value="item" @change="checkOne"></td>
</tr>
</table>
选中的商品是：{{choice}}
<br>
商品价格：{{getPrice()}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
dataList: [
{name: '今瓶没', price: 99, number: 2},
{name: '西柚记', price: 59, number: 1},
{name: '水壶转', price: 89, number: 5},
],
choice: [],
checkAll: false
},
methods: {
getPrice() {
let total = 0
for (v of this.choice) { // 这里的 v 是数组中每一个对象
total += v.price * v.number
}
return total
},
handleAll() {
if (this.checkAll) {
this.choice = this.dataList
} else {
this.choice = []
}
},
checkOne() {
if (this.choice.length == this.dataList.length) {
this.checkAll = true
} else {
this.checkAll = false
}
},
handleJ(item){
if(item.number<=1){
alert('受不了了，不能再少了')
}else {
item.number--
}
}
},
})
</script>
</html>
2 v-model进阶
lazy：等待input框的数据绑定时区焦点之后再变化number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留trim：去除首位的空格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script></head><body><div id="app"><!-- lazy的使用：<input type="text" v-model.lazy="msg"> {{msg}}--><!-- number的使用：<input type="text" v-model.number="msg"> {{msg}}--> trim的使用：<input type="text" v-model.number="msg"> {{msg}}</div></body><script> let vm = new Vue({ el: '#app', data: { msg:'' }, methods: { }, })</script></html>
3 生命周期钩子
beforeCreate 创建Vue实例之前调用created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据）beforeMount 渲染DOM之前调用mounted 渲染DOM之后调用beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）updated 重新渲染完成之后调用beforeDestroy 销毁之前调用destroyed 销毁之后调用#重点：1 created：在这个里面向后端发送请求，获取数据2 mounted：4 定时任务 每隔3s执行一次 this.t = setInterval(function () { console.log('daada') }, 3000)5 关掉定时器 （destroyed） clearInterval(this.t)6 延迟任务setTimeout( ()=> { console.log('3s后执行') # 3s后执行这个代码 }, 3000)
4 发送ajax请求
# axios:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跟后端交互</title> <script src="./js/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><div id="box"><button @click="handleClick">点我看美女</button> <br> 我的名字是：{{name}} <br> 我的年龄是：{{age}}</div></body><script> let vm = new Vue({ el: '#box', data: { name:'', age:0 }, methods:{ handleClick(){ // 会出跨域问题 axios.get('http://127.0.0.1:5000/').then(res=>{ console.log(res.data) this.name=res.data.name this.age=res.data.age }) // } } })</script></html>
4.2 加载电影
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跟后端交互</title> <script src="./js/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><div id="box"> <ul> <li v-for="item in dataList"> <p>电影标题：{{item.name}}</p> <p>电影主演：{{item.director}}</p> <img :src="item.poster" alt=""> </li> </ul></div></body><script> let vm = new Vue({ el: '#box', data: { dataList:[] }, created(){ axios.get('http://127.0.0.1:5000/').then(res=>{ console.log(res.data) this.dataList=res.data.data.films }) } })</script></html>
5 计算属性
5.1 基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跟后端交互</title> <script src="./js/vue.js"></script></head><body><div id="box"> <input type="text" v-model="msg"> <br> 直接在插值中写代码: {{msg.substring(0,1).toUpperCase()+msg.substring(1)}} <br> 写成一个函数: {{getMsg()}} {{getMsg()}} <br>使用计算属性 {{getCMsg}} {{getCMsg}} {{getCMsg}} {{getCMsg}} {{getCMsg}} {{getCMsg}} {{getCMsg}} {{getCMsg}} {{getCMsg}}</div></body><script> let vm = new Vue({ el: '#box', data: { msg:'' }, methods:{ getMsg(){ // console.log('我执行了') return this.msg.substring(0,1).toUpperCase()+this.msg.substring(1) } }, computed:{ getCMsg(){ console.log('我执行了') return this.msg.substring(0,1).toUpperCase()+this.msg.substring(1) } } })</script></html>
5.2 重写过滤案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跟后端交互</title> <script src="./js/vue.js"></script></head><body><div id="box"> <input type="text" v-model="msg"> <li v-for="item in new_data_list">{{item}}</li></div></body><script> let vm = new Vue({ el: '#box', data: { msg: '', datalist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'], }, computed: { new_data_list() { return this.datalist.filter(item =>item.indexOf(this.msg) > -1) } } })</script></html>
6 组件化开发
1 自定义组件需要有一个root element，一般包裹在一个div中2 父子组件的data是无法共享3 组件可以有data，methods,computed....,但是data 必须是一个函数
6.1 全局组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件化开发</title> <script src="./js/vue.js"></script></head><body><div id="box"> <child></child> <hr> <child></child></div></body><script> // 定义一个全局组件 Vue.component('child', { template: ` <div> <h1>我是子组件</h1> <br> <button @click="handleClick">点我看美女--{{name}}</button> </div> `, data() { return { name: 'lqz' } }, methods: { handleClick() { alert('美女，致命诱惑') } }, }) let vm = new Vue({ el: '#box', data: {}, })</script></html>
6.2 局部组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件化开发</title> <script src="./js/vue.js"></script></head><body><div id="box"> <child></child> <hr></div></body><script> // 定义一个全局组件，在全局组件中定义一个局部组件 Vue.component('child', { template: ` <div> <h1>我是子组件</h1> <br> <button @click="handleClick">点我看美女--{{name}}</button> <hr> <Header1></Header1> </div> `, data() { return { name: 'lqz' } }, methods: { handleClick() { alert('美女，致命诱惑') } }, components:{ 'Header1':{ template:`<h2>我是局部组件---{{msg}}</h2>`, data(){ return { msg:'SB' } }, methods:{}, } } }) let vm = new Vue({ el: '#box', data: {}, })</script></html>
7 组件通信
7.1 组件通信之父传子（通过自定义属性）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件化开发</title> <script src="./js/vue.js"></script></head><body><div id="box"> 在组件上自定义属性，属性指定绑定好变量 <br> <child :mymsg="msg" :age="age"></child> <hr></div></body><script> // 定义一个全局组件，在全局组件中定义一个局部组件 Vue.component('child', { template: ` <div> <h1>我是子组件---从父组件传值过来--{{mymsg}}---{{age}}</h1> <br> <button @click="handleClick">点我看美女--{{name}}</button> <hr> </div> `, data() { return { name: 'lqz' } }, methods: { handleClick() { alert('美女，致命诱惑') } }, props:['mymsg','age'] // 写属性名字 }) let vm = new Vue({ el: '#box', data: { msg:'我是父组件的数据', age:999 }, })</script></html>
7.2 父子通信之子传父(通过自定义事件)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件化开发</title> <script src="./js/vue.js"></script></head><body><div id="box"> <br><!-- 通过自定义事件,绑定方法--> <child v-if="isShow" @myevent="handleShow"></child> <hr></div></body><script> // 定义一个全局组件，在全局组件中定义一个局部组件 Vue.component('child', { template: ` <div> <h1>我是子组件</h1> <br> <button @click="handleClick">点我消失和显示</button> <hr> </div> `, data() { return { b: false } }, methods: { handleClick() { //触发myevent的执行,把子组件中的变量b，传入到事件对应的方法上 this.$emit('myevent',this.b) } }, }) let vm = new Vue({ el: '#box', data: { isShow: true, }, methods:{ handleShow(b){ this.isShow=b } } })</script></html>
7.3 ref属性
# 在Vue中通过 this.$refs.属性值 拿到的是 -如果放在普通标签上，拿到的就是普通标签本身 -如果放在子组件是，拿到的就是子组件对象 -通过组件对象，直接获取，修改属性， -直接执行方法，传值，返回值
8 vue脚手架
# node的安装，官方下载，一路下一步
-node：python
-npm命令：pip
# 使用npm安装第三方模块，速度慢一些，换成淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后用cmpm代替npm的使用
# 安装脚手架：cnpm install -g @vue/cli
# 创建vue项目
vue create 项目名
# OR
vue ui # 图形化界面的创建
1 vue-cli项目目录介绍
mysecondvue # 项目名
-node_modules # 项目的依赖包 （类似于venv文件夹），可以删掉，给别人发一定要删除
-public # 文件夹
-favicon.ico # 网站小图标
-index.html # 整个网站的index页面，单页面开发
-src # 文件夹
-assets # 网站的静态文件和资源
-components # 一堆组件，小组件
-HelloWorld.vue # 自定义的组件
-router # vue-router相关
-index.js # js文件
-store # vuex相关，不用管了
-views # 一堆组件，页面组件
-Home.vue # 页面组件
-App.vue # 根组件
-main.js # 整个项目的入口，（对比settings.py）
-.gitignore # git相关，目前无用
-babel.config.js # 不用管
-package.json # 项目的依赖的包，类似于 requirments.txt
# 后期node_modules删除了，依赖于这个文件安装模块 npm install
-README.md # 关于项目的介绍
# 以后写代码，都在src写，其它地方一般不动
2 新建组件，使用组件
# 以后写vue的项目，就是创建组件，编写
-每个组件都有三部分
<template>写html内容，原来组件的template</template>
<script> js,data,methods,created,</script>
<style>样式</style>
# 页面组件的使用步骤
-新建一个 xx.vue,默认生成了三部分
-在<template>写html，学的vue的插值，指令，事件。。。
-在<script>写js，学的data，methods，。。。。
-在<style>中写样式，之前学的css
-想访问某个路径，就能够显示这个页面组件
-router--->index.js--->在const routes = []数组中加对象
-{
path: '/', # 访问的路径
name: 'Home',# 名字
component: Home # 组件对象，导入的
}
-import 起个名字 from '../views/UserDetail.vue'
# 小组件的使用步骤
-新建一个 xx.vue,默认生成了三部分
-在<template>写html，学的vue的插值，指令，事件。。。
-在<script>写js，学的data，methods，。。。。
-在<style>中写样式，之前学的css
-想在页面组件中使用
-导入：import HelloWorld from "../components/HelloWorld";
-在页面组件中注册：
components:{ //自定义了一个局部组件
'HelloWorld':HelloWorld
}
-在<template>中使用这个小组件，自定义属性。。。
3 vue-router的使用
# 以后只需要在router---index.js中复制粘贴
-在这个常量中const routes，写对象
{
path: '/',
name: 'Home',
component: Home
}
4 导入导出语法（es6）
# 导出，新建一个js，定义变量，方法，
-使用export default 对象
# 导入，在任意js中，根据路径导入
-import utils from '../utils' //utils就是刚刚导出的对象
-使用：utils.add(2,3)
// 导出
const name = 'lqz'
let age = 10
function add(a, b) {
console.log(age)
return a + b
}
export default {
'name': name,
'add': add
}
// 导入
import utils from '../utils' //utils就是刚刚导出的对象
let res=utils.add(1,2,)
5bootstrap& jquery的使用
#1 执行两条命令，安装
cnpm install jquery -S
cnpm install bootstrap@3 -S
#2 使用，在main.js中写代码
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
# 3 以后在 template中写bootstrap的样式即可
# 4 在项目根路径新建
# vue.config.js
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
# 5 以后在js中使用
$.ajax({
url: 'http://127.0.0.1:5000/',
type: 'get',
success:(res)=> {
console.log(res)
}
}
)
6 elementui的使用
# web端（pc端）：elementui，iview# 小程序，安卓：uni-app, vant:ui库
7 axios的使用
1 cnpm install axios -S2 直接使用import http from 'axios'http.get().then(res=>{})
浙公网安备 33010602011771号