目录
Vue使用
1.如何使用vue
在页面上写上一个标签，在标签中定义一个id值，在script中对id值进行实例--------简单的实例
<div id="d1">
<p v-on:click="pClick" v-bind:style="aaa" v-once>{{ info }}</p>
</div>
<script>
new Vue({
el:'#d1'
})
</script>
# 总结：通常挂载点都采用id选择器（唯一性），html与body不能作为挂载点，只能控制挂载点的内部
如果要对标签进行一些属性值的设置，比如颜色，事件之类，需要借助vue来实现
div id="d1">
<p v-on:click="pClick" v-bind:style="aaa" v-once>{{ info }}</p>
</div>
<script>
let app1 = new Vue({
el:'#d1', # 挂载点，vue实例与页面标签建立关联，
data:{ # data为挂载点内部提供数据
info:'message', # 挂载点中的info显示的数据
aaa:{
color:'red' # 定义的颜色
}
},
methods:{ # 函数
pClick:function () {
app1.aaa.color = 'blue';
this.info='更改了'
},
}
});
</script>
# el 挂载点
# data 数据 在使用的时候必须加(),变成一个函数，
# methods 函数
# v-on: 函数，在methods中写
# v-bind： css属性值，在data中写
声明的实例是否用一个变量接收
1.在实例内部不需要，用this就代表当前vue实例本身
2.在实例外部或其他实例内部需要定义一个变量接收 new vue产生的实例
2.插值表达式
可以通过简单的逻辑运算在前端进行计算
{{ info }}
在data中先定义info变量，然后在{{ info }}直接输入加减乘除，注意的是这里的计算只能是一次性做完的，不能分开做，
例：
{{ info*2 }}
{{ info.split('') }}
3.文本指令
{{ }} 被定义的时候解析大括号内的内容
v-text 不能解析html语法的文本，会原样输出
v-html 能解析html语法的文本
v-once 处理的标签内容只能被解析一次
使用
<p>{{ info }}</p>
<div id="d2"><p v-text="msg"></p></div>
let app = new Vue({
el:'#d2',
data:{
msg:'qweqweqweqweqwe' ,
}
<div id="d2"><p v-html="msg"></p></div>
let app = new Vue({
el:'#d2',
data:{
msg:'<i>qweqweqweqweqwe</i>' ,
}
<p v-on:click="pClick" v-bind:style="aaa" v-once>{{ info }}</p> 当其他标签信息更改的时候，此标签中的内容不会进行更改
4.事件指令
v-on:事件="变量" # 经典情况
@事件="变量" # 简写情况
@事件="func()" # 括号内可以传入实参 ，自己传入参数
@事件="func(method)" # 通过method将传入的值取出来，与函数中的参数使用一样
常用事件
1.mouseover 鼠标悬浮事件
2.mousedown 鼠标按下触发
3.mouseup 鼠标抬起
4.mouseove 鼠标移动
5.click 点击事件
6.change 更改事件
变量加括号可以传参，一旦加括号了就表示要自己传参，根据接收到的多少,多传不显示，少传剩下的会显示ondefind
事件变量，不加括号，默认会传入事件对象：$event
常见参数：
1.ev 事件对象
2.argv
# 新使用方法
<p @click="page='r_page'">点击获取信息</p>
data(){
return{
page:'r_page'
}
},
5.属性指令
作用：可以更改对应标签的属性情况，在data中进行定义后，可以通过事件，函数的更改来改变标签的属性表现情况。
v-bind:属性名="变量" # 正常写
:属性名="变量" # 简写
<!-- 给自定义全局属性绑定变量 -->
<p v-bind:abc="abc"></p>
<!-- 以原字符串形式绑定全局属性 -->
<p v-bind:title="'abc'"></p>
<!-- 单类名绑定 -->
<p v-bind:class="c1"></p>
<!-- 多类名绑定 -->
<p v-bind:class="[c2, c3]"></p>
<!-- 类名状态绑定 -->
<p v-bind:class="{c4: true|false|var}"></p>
<!-- 多类名状态绑定 -->
<p v-bind:class="[{c5: true}, {c6: flase}]"></p>
<!-- 样式绑定 -->
<div :style="div_style"></div>
<div :style="{ '100px', height: '100px', backgroundColor: 'blue'}"></div>
<script type="text/javascript">
new Vue({
el:"#app",
data: {
abc: "abc",
c1: "p1",
c2: "p2",
c3: "p3",
div_style: {
"200px",
height: "200px",
backgroundColor: "cyan"
}
}
})
</script>
<!-- v-bind: 指令可以简写为 : -->
常见属性：
title
6.表单指令
使用方法：
v-model="变量" # 变量值与表单标签的value相关
v-model可以实现数据的双向绑定，v-model绑定的变量值可以影响表单标签的值，反过来表单标签的值也可以影响变量的值
文本框
<input type="text" name="name" id="user" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1" name="user">
data(){
return{
v1:'123' 先定义一个默认值
}
}
会将两个框中的数据进行联动，一个框中的值会随着另外一个框中的值的变化而变化
单选框
<p>男：<input type="radio" name="sex" value="male" v-model="v2"></p>
<p>女：<input type="radio" name="sex" value="female" v-model="v2"></p>
v2:'female' 默认选择的是female，页面刷新之后就会默认选择自定义的属性，必须与value一起使用
checked 表示默认选中,参数
多选框
111：<input type="checkbox" name="hobbies" value="111" v-model="v3">
222：<input type="checkbox" name="hobbies" value="222" v-model="v3">
333：<input type="checkbox" name="hobbies" value="333" v-model="v3">
v3:['111','222'] 会在页面上自动默认选中自己定义的框
id与name与value
id
编号id具有唯一性，一个id只出现一次。
一般在JavaScript中经常出现。
value
- 按钮中用的value 指的是按钮上要显示的文本 比如“确定”“删除”等
- 复选框用的value 指的是这个复选框的值
- 单选框用的value 和复选框一样
- 下拉菜单用的value 是列表中每个子项的值
- 隐藏域用的value 是框里面显示的内容
在后台如果你想得到复选框的内容 就是value 来取 当你在接收表单数据的页面中获取数据时，得到的就是value的值
name
- name是控件的名称（多个控件可以取同一个名称），value是控件的值；
- 并不是所有控件的value都会显示出来，比如 checkbox, radio, hidden；
- 定义控件的 name和value 就可以在服务器上获取这个控件和它的值；
- 没看到 submit 的name，并不表示浏览器忽略了它的 name，在提交之前它也被浏览器定义了
- name，在服务器上一样可以得到它的 name 和 value；
- 控件不定义name/value也可以显示，只是为了方便在服务器接收和区别，才定义它的 name/value
- 当然按钮的 value 不光是存放它的值，也用来显示。
简单的说就是对表单的操作，vue是一个编写前段的框架，这些指令都是对前端的一些操作。
7.条件指令
对条件进行判断，如果条件成立，就执行，条件不成立，就不执行
v-show = "布尔变量" 会以display的行式显示
v-if = "布尔变量" 为false的时候， 直接就不显示，页面代码也不显示，用的最多（保证不渲染的数据泄露）
v-if
v-if
v-else-if
v-else
8.循环指令
循环指令使用的方式：
v-for = " c in info"
v-for = " (k,v) in info"
v-for = "(v,k,i) in info"
使用实例
<i v-for="c in info">{{ c }} </i>
<i v-for="(c, i) in info">{{i}}:{{c}}<br></i>
<div v-for="e in stus">{{ e }}</div>
<div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>
<div v-for="v in people">{{ v }}</div>
<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
<div v-for="tea in teas">
<span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
</div> # 可以循环嵌套标签使用
针对for循环使用的一些方法
unshift, push 是首尾增
shift，pop 是首尾删
数组操作最全的方法：splice
splice(begin_index，count，...argsl,)
10.过滤器
过滤器的作用就是对值进行一次筛选，将值按照要求进行输出
1.在filters中定义过滤器方法
2.可以对多个值进行过滤，过滤时还可以额外传入辅助参数
3.过滤的结果可以再进行下一次过滤
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
filters: {
// 传入所有要过滤的条件，返回值就是过滤的结果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}
10.计算属性
1.computed计算属性可以声明方法属性（方法属性不一定在data中重复声明）
2.方法属性必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定方法的返回值
3.绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会重新触发绑定方法，从而更新方法属性的值
4.一般用来解决的问题：一个变量依赖于多个变量
<div id="app">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<button>{{ result }}</button>
</div>
data: {
n1: '',
n2: '',
},
computed: {
result () {
console.log('被调用了');
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2;
}
}
11.监听属性
n是监听的属性当前值，o是其上一次的值，监听的属性值每次更新都会回调监听方法
总结：
1.监听的属性需要在data中声明，监听方法不需要返回值
2.监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法
3.监听方法有两个回调参数，当前值，上一次值
解决问题：多个变量依赖一个变量
<div id="app">
<p>姓名：<input type="text" v-model="full_name"></p>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>
</div>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '未知',
last_name: '未知',
},
watch: {
full_name(n, o) {
name_arr = n.split('');
this.first_name = name_arr[0];
this.last_name = name_arr[1];
},
}
})
12.分隔符（了解）
在正常的前端页面中使用的模板语法与vue渲染使用的语法有冲突，为了区分，使用以下方法进行区分
{{ msg }} # 正常的div页面
[{ msg }] # vue实例的页面中使用
13.其他总结
# 定义对象的四种方式
var a = 10 # 外界不能直接访问，可以被重新定义，只能在局部使用，
let b = 20 # 外界不能直接访问，只能定义一次，不能被重新定义，且具备块级作用域，只能在大括号中使用
const c = 30 # 外界不能直接访问，常量，不能修改，只能定义一次，不能被重新定义，且具备块级作用域，只能在大括号内使用
直接写 d = 40 # 直接写的是全局变量，可以在全局中使用
# 对象中的方法可以简写
let obj = {
eat(food){} # 方法 # ES6方法
}
# 定义一个函数
1. function f(){}
2. let f2 = function(){}
# 箭头函数
let f3 = () => {}
# 如果箭头函数没有函数体，只有返回值
let f4 = (n1,n2) => n1 + n2
# 如果箭头函数参数列表只有一个，可以省略
let f5 = num => num * 10
# 重点： function,箭头函数，方法都具有本质区别
# 1.箭头函数中是没有this，会直接指向windows，function，方法有
# 文本取消选中
{user-select:none}
--------------------------------------
Vue中的实例成员
v el 挂载点
data:{} 存放数据
methods:{} 定义函数,方法
delimiters:[] 分隔符
filters:{} 过滤器
computed:{} 计算
watch:{} 监听
props:[ ] 父传子传值，通过字符串获取标签中属性变量对应的值
--------------------------------------------
Vue中的指令
# 属性指令
v-bind:属性名=变量名 或 :属性名=变量名
# 事件指令
v-on:时间名=变量名 或 @事件名=变量名
# 文本指令
{{ }}
v-text
v-html
v-once
# 表单指令
v-model=变量名
# 条件指令
v-show
v-if v-else-if v-else
# 循环指令
v-for
------------------------------------------
关于vue重点 $ 使用
# 自定义事件调用
this.$emit('自定义的事件名'，'需要传入的参数')
# router的逻辑跳转
this.$router.push('跳转的路径')
# router返回前进操作
this.$router.go(-1) 负为后退，正为前进
14.冒泡排序
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
<script>
# 例1 将数组中的值进行排列
let arr = [3, 2, 5, 4, 1];
for (let i = 0; i < arr.length - 1; i++) { // 外层循环控制趟数
for (let j = 0; j < arr.length - 1 - i; j++) { // 内存循环控制比较次数
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
# 例2 按照分数来进行排列
stus = [
{
name: 'Bob',
grade: 98
},
{
name: 'Tom',
grade: 87
},
{
name: 'Jerry',
grade: 92
},
];
// 按照分数进行排名
for (let i=0; i<stus.length-1; i++) {
for (let j=0; j<stus.length-1-i; j++) {
// 处理条件即可
if (stus[j].grade > stus[j + 1].grade) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
}
console.log(stus);
</script>
属性名与变量名相同可以简写，省略值
data:{
scores:score ==> score
}
for (e in scores)
for in 是取值的关键，拿到的是k，或者索引号
for of 遍历的是值
前端对字典进行操作是
添加值：字典名.k = value
取值：字典名.k