1 vue 主流是前后端分离多
-React，vue（国人）
-uni-app：使用vue的语法写，打包成移动端，微信小程序（原生）
-版本：2.x 3.x
-渐进式的js框架
-MVVM架构： m（js的变量，数据层） - vm（js对象） - v（view，页面html，css），实现数据的双向绑定
-单页面开发，组件化开发（某块可以复用的东西，制作成一个组件）
2 快速使用
-cdn引入
-直接导入
其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去
3 插值语法 {{ }}，数字，字符串，数组，对象
4 指令系统之文本指令---》都放在标签的属性上
-v-html：把字符串形式标签渲染成真正的标签
-v-text：把文本内容显示在标签中
-v-show：标签是否显示，放布尔值 （隐藏）
-v-if：标签是否显示，放布尔值 （真正删除）
5 事件指令---》标签的点击事件
v-on:click='事件名' ，当点击控件，就会触发函数的执行
@click='事件名' 简略写法
## 1 属性指令
```python
#只要是标签的属性，都可以使用属性指令动态绑定
# v-bind:属性名=属性值
# :属性名=属性值
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<div class="app">
<h1>只要是标签的属性，都可以使用属性指令动态绑定</h1>
<span id="id_span" v-bind:name="name">我是span</span>
<hr>
<span id="id_span2" :name="name">我是span222</span>
<hr>
<a :href="url">点我看美女</a>
<hr>
<img :src="src" alt="">
</div>
<script>
var vm=new Vue({
el:'.app',
data:{
name:'lqz',
url:'http://www.baidu.com',
src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2Ff8f343e8f16c55ee489da60bfca7cd0ceb01bfd0a98a-ixSNbV_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647048281&t=acb541b86473f0b910fae0ee787228f2'
}
})
</script>
2 style和class
style和class都能绑定字符串，数组，对象
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
.size{
font-size: 60px;
}
</style>
<div class="app">
<!-- <button @click="handleClick">点我变色</button>-->
<!-- <button @click="handleClick2">点我字体变大</button>-->
<button @click="handleClick3">点我字体变大2</button>
<div :class="divClass">
<p>我是div</p>
</div>
</div>
<script>
var vm = new Vue({
el: '.app',
data: {
// class 属性，绑定字符串
// divClass:'red'
//class 属性，绑定数组----这个用的多
// divClass:['red',]
// class属性，绑定对象
divClass:{'red':true,'size':false}
},
methods: {
// handleClick() {
// this.divClass='green'
// },
// handleClick2(){
// this.divClass.push('size')
// }
handleClick3(){
this.divClass['size']=true
}
}
})
</script>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<div class="app">
<div :style="styleStr">
<p>我是div</p>
</div>
</div>
<script>
var vm = new Vue({
el: '.app',
data: {
//style绑定字符串
// styleStr:'background-color: red;font-size: 40px'
// style绑定数组
// styleStr:[{'background-color':'green'},{'font-size': '40px'}]
// style绑定对象
// styleStr:{'background-color':'yellow','font-size': '80px'}
styleStr:{backgroundColor:'yellow',fontSize: '80px'} // 驼峰会自动转换
},
methods: {}
})
</script>
3 条件渲染
v-if 相当于： if
v-else 相当于：else
v-else-if 相当于：else if
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<div class="app">
<h1>您的成绩是：</h1>
<h2 v-if="score>=90&&score<100">优秀</h2>
<h2 v-else-if="score>=80&&score<90">良好</h2>
<h2 v-else-if="score>=60&&score<80">及格</h2>
<h2 v-else="">不及格</h2>
</div>
<script>
var vm = new Vue({
el: '.app',
data: {
score: 99
},
})
</script>
4 列表渲染
v-for
遍历数组(列表)： # book是循环到的对象，index是数组的索引
对象(字典)：<p v-for="(value,key) in person">{{key}}是：{{value}}</p># value是字典的value值，可以是字典的key值，注意是跟正常的相反，如果只取一个值，就是value值
数字：<p v-for="i in 5">循环到第{{i}}次了</p> # 从1开始到5
字符串：<p v-for="i in 'asfdasdsdaf'">{{i}}</p>
# key值的解释
# 数组的检测与更新
-有的时候，数组（对象）变了，但是页面没变，作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
-解决：Vue.set(vm.arrayList, 0, 'Darker')
5 事件处理
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件（用的少）
blur 当输入框失去焦点的时候 触发的事件
5.2 过滤案例
# 数组如何过滤
数组.filter(function (item){
return true/false # 如果return了true当前item保留，否则不保留
})
# es6的箭头函数，处理this指向的问题
数组.filter(item=>{
return true/false # 如果return了true当前item保留，否则不保留
})
# indexOf:字符串的方法
字符串.indexOf(子字符串)，如果子字符串在字符串中，返回索引，如果不在返回 -1，如果大于-1说明，子字符串在字符串中
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<div class="app">
<input type="text" v-model="myText" @input="handledInput">
<p v-for="data in newDataList">{{data}}</p>
</div>
<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: {
// handledInput() {
// var _this=this
//
// this.newDataList = this.dataList.filter(function (item) {
// console.log(item)
// console.log(_this.myText)
// return item.indexOf(_this.myText)>-1
//
// })
//
// }
// es6 箭头函数，处理this指向的问题
handledInput() {
this.newDataList = this.dataList.filter(item=>{
return item.indexOf(this.myText) > -1
})
}
}
})
// 数组的过滤
// var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// dataList=dataList.filter(function (item) {
// // return是true或false，如果是true，该元素会保留，否则不保留
// return item.length>4
// })
// console.log(dataList)
// indexOf的使用:判断子字符串在该字符串的那个位置,不在返回 -1
// 过滤数组中以at开头的所有字符串
// var myText='at'
// var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// dataList=dataList.filter(function (item) {
// return item.indexOf(myText)>=0
// // return item.length>4
// })
// console.log(dataList)
// var res='lqz'.indexOf('f')
// console.log(res)
// 箭头函数,箭头函数内部的this，就是外层的this
// var f= function (a) {
// console.log(a)
// }
var f= a =>{
console.log(a)
}
f(4) // 函数才执行
</script>
5.3 事件修饰符
.stop 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<div class="app">
<!-- 只处理自己的事件，冒泡上来的事件不处理-->
<ul @click.self="handleUl">
<li @click.stop="handleLi1">li1,加了stop后，阻止了事件冒泡，事件不往上传递了</li>
<li @click="handleLi2">li2</li>
</ul>
<hr>
<a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
<hr>
<button @click.once="buttonClick">点我秒杀</button>
</div>
<script>
var vm = new Vue({
el: '.app',
data: {},
methods: {
handleLi1() {
console.log('li1被点击了')
},
handleLi2() {
console.log('li2被点击了')
},
handleUl() {
console.log('ul被点击了')
},
handleA(){
console.log('a被点击了')
window.location='http://www.jd.com' // 手动跳转
},
buttonClick(){
console.log('button被点击了')
}
}
})
</script>
5.4 按键修饰符
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<div class="app">
<!-- <input type="text" @keyup="handleKeyUp($event)">-->
<input type="text" @keyup.enter="handleKeyUp">
</div>
<script>
var vm = new Vue({
el: '.app',
data: {},
methods: {
// handleKeyUp(e){
// console.log(e)
// console.log('点了')
// }
handleKeyUp() { // 只要enter建弹起，就触发
console.log('enter点了')
}
}
})
</script>
6 数据双向绑定
input 框，使用 v-model="username" 绑定上变量，以后，只要变量变化，页面变化，页面变化，变量变化
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<div class="app">
用户名：<input type="text" v-model="username">
密码：<input type="password" v-model="password">
<hr>
<p>您输入的用户名为：{{username}}</p>
<p>您输入的密码为：{{password}}</p>
</div>
<script>
var vm = new Vue({
el: '.app',
data: {
username: '',
password: '',
},
})
</script>
