表单指令
使用方法：
v-model文本框
<input type="text" name="name" id="user" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1" name="user">
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是一个编写前段的框架，这些指令都是对前端的一些操作。
条件指令
对条件进行判断，如果条件成立，就执行，条件不成立，就不执行
v-show = "布尔变量" 会以display的行式显示
v-if = "布尔变量" 为false的时候， 直接就不显示，页面代码也不显示，用的最多（保证不渲染的数据泄露）v-if
v-if
v-else-if
v-else循环指令
循环指令使用的方式：
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,)分隔符（了解）
在正常的前端页面中使用的模板语法与vue渲染使用的语法有冲突，为了区分，使用以下方法进行区分
{{ msg }} # 正常的div页面
[{ msg }] # vue实例的页面中使用过滤器
过滤器的作用就是对值进行一次筛选，将值按照要求进行输出
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;
}
}计算属性
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;
}
}监听属性
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];
},
}
})冒泡排序
<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>