Vue --- 基础指令

目录

• Vue使用
  • 1.如何使用vue
  • 2.插值表达式
  • 3.文本指令
  • 4.事件指令
  • 5.属性指令
  • 6.表单指令
    • 文本框
    • 单选框
    • 多选框
    • id与name与value
  • 7.条件指令
  • 8.循环指令
  • 10.过滤器
  • 10.计算属性
  • 11.监听属性
  • 12.分隔符（了解）
  • 13.其他总结
  • 14.冒泡排序

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="{width: '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: {
				width: "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

1. 按钮中用的value 指的是按钮上要显示的文本 比如“确定”“删除”等
2. 复选框用的value 指的是这个复选框的值
3. 单选框用的value 和复选框一样
4. 下拉菜单用的value 是列表中每个子项的值
5. 隐藏域用的value 是框里面显示的内容

在后台如果你想得到复选框的内容 就是value 来取 当你在接收表单数据的页面中获取数据时，得到的就是value的值

name

1. name是控件的名称（多个控件可以取同一个名称），value是控件的值；
2. 并不是所有控件的value都会显示出来，比如 checkbox, radio, hidden；
3. 定义控件的 name和value 就可以在服务器上获取这个控件和它的值；
4. 没看到 submit 的name，并不表示浏览器忽略了它的 name，在提交之前它也被浏览器定义了
5. name，在服务器上一样可以得到它的 name 和 value；
6. 控件不定义name/value也可以显示，只是为了方便在服务器接收和区别，才定义它的 name/value
7. 当然按钮的 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