Vue实战(后端)

Vue实战(后端)

1. Vue引言

渐进式 JavaScript框架

1
2
3
4
5
6
7
8
9
10
11
# 渐进式
1. 易用 html css javascript
2. 高效 开发前端界面非常高效
3. 灵活 开发灵活 多样性

# 总结
	vue是一个javascript框架
# 后端开发人员
	vue让我们通过操作很少的DOM，甚至不需要操作界面中的任何Dom元素，就很容易完成数据和视图的绑定 双向绑定
	注意：日后在使用vue过程中不要引入jQueru框架

2. Vue入门

2.1 下载vue.js

1
2
3
开发版本
<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
1
2
3
生产版本
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2.2 Vue的第一个入门应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
    {{msg}}
    <span>
        {{username}} 
    </span>
</div>


<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//用来给vue示例定义一个作用范围
        data:{
            msg:"你好vue!",
            username:"yhc",
        },//用来给vue实例定义一些相关的数据
    });
</script>
1
2
3
4
5
# 总结
	1. vue实例(对象)中el属性值：代表vue的作用范围，日后在vue的作用范围内都可以使用vue的语法
	2. vue实例(对象)中data属性：用来给vue实例绑定一些相关数据，绑定的数据可以通过 {{变量名}} 的形式在vue的作用范围内取出
	3. 在使用{{}}获取data中的数据时，可以在{{}}中书写表达式,运算符，调用相关的方法，以及逻辑运算。
	4. el属性中可以书写任意的css选择器，但是在使用vue开发时，推荐使用id选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他类型的数据变量</title>


</head>
<body>
<div id="app">
    <h3>{{msg}}</h3>
    <!--取出对象user中的属性值-->
    <h3>{{user.username + '!'}}</h3>
    <h3>{{user.password}}</h3>
    <!--取出对象中的数组-->
    <h3>{{user.locations[1]}}</h3>
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "你好vue!",
            user: {
                username: "yhc",
                password: 123456,
                locations: ["开封","尉氏"]//数组属性
            }//对象

        },
    });
</script>
</body>
</html>

3. v-text和v-html

3.1 v-text

v-text: 用来获取data中的数据，将数据以文本的形式渲染到指定标签的内部，类似于javascript中的innerText

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <div id="app">
        <span>{{msg}}</span>
        <span v-text="msg"></span>
    </div>


<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            msg:"你好vue!",
            username:"yhc",
        },
    });
1
2
3
4
# 总结
	1.{{}}（插值表达式）和v-text获取数据的区别在于 
		a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
		b.使用v-text可以避免在网络环境较差的情况出现插值闪烁

3.2 v-html

v-html: 用来获取data中的数据将数据中含有的html标签先解析再渲染到指定标签的内部 类似于javascript中的innerHtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <div id="app">
        <span v-text="msg"></span>
        <br>
        <span v-html="msg"></span>
    </div>


<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            msg:"<a href=''>你好vue!</a>",
            username:"yhc",
        },
    });
</script>

4. vue中的事件绑定(v-on)

4.1 绑定事件语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--
    目的：点击一次按钮，年龄增加一岁
    1.页面中提供按钮
    2.按钮绑定单击事件 onclick onmouseover onmove...
    3.在单击事件中修改年龄的值 同时渲染页面
-->
    <div id="app">
       <h2>{{message}}</h2>
        <h2>年龄: {{age}}</h2>
        <br>
        <input type="button" value="点我改变年龄" v-on:click="changeAge">
    </div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data: {
            message:"hello",
            age:23,
        },
        methods:{ // methods 用来定义vue中的事件
            changeAge:function(){
                 //在函数中获取vue实例中的data的数据 在事件函数中this就是vue实例 
               this.age++;
            }
        }

    });
</script>
1
2
3
4
5
6
# 总结
	事件 事件源：发生事件的dom元素 事件：发生的特定动作 click... 监听器：发生特定动作之后的事件处理程序，通常是js中的函数
	1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如v-on:click
	2.在v-on事件名的赋值语句是当前事件触发调用的函数名
	3.在vue中事件函数统一定义在vue实例中的methods属性中
	4.在vue定义的事件中this指的就是当前vue实例，日后可以在事件中通过this获取vue实例中的相关数据

4.2 vue中事件的简化写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <div id="app">
      <h2>年龄: {{age}}</h2>
      <input type="button" value="通过v-on事件修改年龄" v-on:click="age++">

      <input type="button" value="通过@绑定事件修改年龄" @click="age++">
    </div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            age:23,
        },
        methods:{

        },
    });
</script>
1
2
# 总结
	1.日后在vue中绑定事件时，可以通过@符号化形式 简化 v-on的时间绑定

4.3 vue事件函数的两种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    <div id="app">
      <h2>年龄: {{age}}</h2>
      <input type="button" value="通过v-on事件修改年龄" v-on:click="age++">

      <input type="button" value="通过@绑定事件修改年龄" @click="changeAge">
    </div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            age:23,
        },
        methods:{
            changeAge(){
                this.age++;
            }
        },
    });
</script>

4.4 vue事件参数传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <div id="app">
      <h2>年龄: {{age}}</h2>
      <input type="button" value="改变count为指定的值" @click="changeAge(25,'yhc')">

    </div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            age:23,
        },
        methods:{
           changeAge(count,name){
               this.age = count;
               alert(name);
           }
        },
    });
</script>
1
2
# 总结
	1.在使用事件时，可以在事件调用处给事件进行参数传递，在事件定义处通过定义对应的变量接收传递的参数

5. v-show v-if v-bind

5.1 v-show

v-show: 用来控制页面中的某个元素是否展示 底层控制是标签的display

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
<!--
    v-show: 用来控制标签展示还是隐藏
-->
    <h2 v-show="false">hello vue !</h2>
    <h2 v-show="show">hello vue !</h2>
    <input type="button" value="展示隐藏标签" @click="showMsg">
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            show:false,
        },
        methods: {
            showMsg(){
                this.show = !this.show;
            }
        },
    });
</script>
1
2
3
# 总结
	1.在使用v-show时可以直接书写boolean值控制元素展示，也可以通过变量控制标签展示和隐藏
	2.在v-show中可以通过boolean表达式控制标签的隐藏和展示

5.2 v-if

v-if: 用来控制页面的元素是否展示 底层控制的是DOM元素 操作DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
    <h2 v-if="false">hello vue!</h2>
    <h2 v-if="show">hello yhc!</h2>
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            show:true,
        },
        methods:{

        }

    });
</script>

5.3 v-bind

v-bind: 用来给标签绑定相应属性从而通过vue动态修改标签的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
    <img src="https://img0.baidu.com/it/u=3712997108,442011921&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" v-bind:title="title" v-bind:class="showCss?css:''">
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            title:"风景",
            css:"aa",
            showCss:true,
        },
        methods: {

        },
    });
</script>

5.4 v-bind 简化写法

vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法 v-bind:属性名 简化之后 :属性名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="app">
    <img :src="src" :title="title" :class="{aa:showCss}">
    <input type="button" value="动态控制加入样式" @click="addCss">
    <input type="button" value="改变图片" @click="changeSrc">
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            title:"风景",
            css:"aa",
            showCss:true,
            src:"https://img0.baidu.com/it/u=3712997108,442011921&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        },
        methods: {
            addCss(){
                this.showCss = !this.showCss;
            },
            changeSrc(){
                this.src = "https://img1.baidu.com/it/u=1041930141,3068790998&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500";
            }
        },
    });
</script>

6. v-for的使用

v-for: 作用就是对对象进行遍历的（数组也是对象的一种）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div id="app">
    <span>
        {{user.name}} {{user.age}}
    </span>
<!--
    通过v-for遍历对象
-->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}}
    </span>
    <!--
    通过v-for遍历数组
    -->
    <ul>
        <li v-for="address,index in locations">
           {{index}}  {{address}}
        </li>
    </ul>
<!--
    通过v-for遍历数组中的对象
    :key便于vue内部重用和排序
-->
    <ul>
        <li v-for="user,index in users" :key="user.id">
           {{index}} : {{user.name}}  === {{user.age}} == {{user.content}}
        </li>
    </ul>
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user:{
                name:"小陈",
                age:20,
            },
            locations:["开封","郑州","河南"],
            users:[
                {id:"1",name:"xiaochen",age:23,content:"我曾是一个单纯的少年!"},
                {id:"2",name:"lisi",age:23,content:"我曾是一个单纯的少年!"},
                {id:"3",name:"zhangsan",age:23,content:"我曾是一个单纯的少年!"},
            ]
        },
        methods:{

        },
    });
</script>
1
2
# 总结
	1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

7. v-model 双向绑定

v-model: 核心作用是用来绑定标签元素的值与vue实例对象中data数据保持一致，从而实现双向的数据绑定机制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
    <input type="text" v-model="message">
    <span>{{message}}</span>
    <hr>
    <input type="button" value="改变Data中的值" @click="changeValue">

</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:"",
        },
        methods:{
            changeValue(){
                this.message="hello vue!";
            }
        },
    });
</script>
1
2
3
4
5
6
7
8
9
# 总结
	1.使用v-model指令可以实现数据的双向绑定
	2.所谓双向绑定 表单中数据的变化导致vue实例data数据变化，vue实例中data数据的变化导致表单中数据变化称之为双向绑定
	
# MVVM架构 双向绑定
	Model 数据 vue实例中绑定数据
	VM：viewModel 监听器
	View 页面 页面展示的数据

8. 事件修饰符

修饰符 和事件连用，用来决定事件的触发条件或者是阻止事件的触发机制

1
2
3
4
5
6
7
# 1.常用的事件修饰符
	.stop
	.prevent
	.capture
	.self
	.once
	.passive

8.1 stop事件修饰符

用来阻止事件冒泡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="app">

    <div class="aa" @click="divClick">

        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">

    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            btnClick(){
                alert("button被点击了")
            },
            divClick(){
                alert("div被点击了")
            }
        }
    });
</script>

8.2 prevent事件修饰符

prevent : 用来阻止标签的默认行为

1
2
<!--用来阻止事件的默认行为-->
 <a href="www.baidu.com" @click.prevent="aClick">百度</a>

8.3 self事件修饰符

用来针对于当前标签的事件触发 只触发自己标签上的特定动作事件 只关心自己标签上触发的事件 不监听事件冒泡

1
2
3
4
5
6
<div class="aa" @click.self="divClick">
    <!--用来阻止事件冒泡-->
    <input type="button" value="按钮" @click.stop="btnClick">
    <input type="button" value="按钮1" @click="btn1">
    <hr>
</div>

8.4 once事件修饰符

作用：让指定的事件只触发一次

9. 按键修饰符

作用：用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

1
2
3
4
5
6
7
8
9
10
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
	.enter
	.tab
	.delete (捕获“删除”和“退格”键)
	.esc
	.space
	.up
	.down
	.left
	.right

9.1 回车键

用来在触发回车按键之后触发的事件

1
<input type="text" v-model="msg" @keyup.enter="keyups">

9.2 tab键

用来捕获到tab键执行到当前标签才会触发

1
<input type="text" @keyup.tab="keytabs">

10. Axios基本使用

10.1 引言

Axios是一种异步请求技术，核心作用就是在页面中发送异步请求，并获取对应的数据在页面中渲染 页面的局部更新技术 Ajaxs

10.2 Axios 第一个程序

中文文档：

1
https://www.axios-http.cn/docs/translating

10.2.1 Get方式的请求

1
2
3
4
5
6
7
//GET请求方式
   // axios.get(url?参数)在页面加载完成以后发送请求
   axios.get("http://localhost:8989/user/findAll").then(function(response){
       console.log(response.data);
   }).catch(function (error){
       console.log(error);
   });

10.2.2 Post方式请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//Post请求方式
  axios.post("http://localhost:8989/user/save",{
      username:"xiaochen",
      age:23,
      email:"xiaochen@qq.com",
      phone:132778789090,
  }).then(function(response){
      console.log(response.data);
  }).catch(function (error){
      console.log(error);
  })

  const app = new Vue({
      el:"#app",
      data:{
          msg:"yhc",
      },
      methods:{

      }
  });

10.2.3 axios中的并发请求

并发请求： 将多个请求在同一时刻发送到后端服务接口，最后再集中处理每个请求的响应结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//1.创建一个查询所有的请求
function findAll(){
    return axios.get("http://localhost:8989/user/findAll?username=zhangsan");
}
//2.创建一个保存的请求
function save(){
    return axios.post("http://localhost:8989/user/save",{
        username:"xiaochen",
        age:23,
        email:"xiaochen@qq.com",
        phone:132778789090,});
}

//3.并发执行
axios.all([findAll(),save()]).then(
    axios.spread(function(res1,res2){//用来将一组函数的结果汇总处理
        console.log(res1.data);
        console.log(res2.data);

    }));//用来发送一组并发请求

11. vue生命周期

生命周期钩子 : 生命周期函数 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 总结
	1.初始化阶段
		beforeCreate() {//1.生命周期中的第一个函数，该函数执行时vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作，vue实例中还没有Data el methods相关属性
            console.log("beforeCreated :" + this.msg);
        },
        created(){//2.生命周期中的第二个函数，该函数再执行时vue实例已经初始化了data属性和methods中的相关方法
            console.log("created : " + this.msg);
        },
        beforeMount(){//3.生命周期中的第三个函数，在该函数执行时vue将el中指定作用范围作为模板编译
            console.log("beforeMount: " + document.getElementById("sp").innerText);
        },
        mounted(){//4.生命周期中的第四个函数，该函数在执行过程中，已经将数据渲染到界面中并且已经更新页面
            console.log("mounted: " + document.getElementById("sp").innerText);
        }
    2.运行阶段
        beforeUpdate(){//5.生命周期中的第五个函数，该函数是data中数据发生变化时执行，这个时间执行时仅仅是vue示例中的data数据变化，页面中显示的依然是原始数据
            console.log("beforeUpdate: " + this.msg);
            console.log("beforeUpdate: " + document.getElementById("sp").innerHTML);
        },
        updated(){//6.生命周期中的第六个函数，该函数执行时data中数据发生变化，页面中的数据也发生了变化 页面中数据已经和data中数据一致
            console.log("updated :" + this.msg);
            console.log("update: " + document.getElementById("sp").innerHTML);
        },
    
    3.销毁阶段
    	beforeDestroy(){//7.生命周期的第七个函数，该函数执行时，vue中的所有数据 methods component 都没有销毁
            
        },
        destroyed(){//生命周期的第八个函数，该函数执行时vue实例彻底销毁
            
        }

12. vue中的组件（component）

12.1 组件作用

component: 用来减少vue实例的代码量,日后再使用vue开发的过程中，可以根据不同的业务功能将页面划分不同的组件，然后由多个组件去完成整个页面的布局，便于日后使用vue进行开发时的页面管理,方便开发人员维护。

12.2 组件的使用

12.2.1 全局组件注册

全局组件注册给vue实例，日后可以在任意vue实力的范围内使用该组件

1
2
3
4
//全局组件注册  参数1：组件名称 参数2：组件的配置对象 template: 用来书写组件的html模板(代码)(注意：在template中必须存在一个容器)
Vue.component('login', {
    template: '<div><h1>用户登录</h1></div>'
});
1
2
3
4
<div id="app">
<!--       使用全局组件-->
    <login></login>
</div>
1
2
3
4
# 注意
	1.Vue.component用来注册全局组件 参数1：组件的名称 参数2：组件配置{} template: ''用来书写组件的html代码 template中有且只有一个root元素
	2.使用时需要在Vue的作用范围内根据组件名使用全局组件
	3.如果在注册组件的过程中使用驼峰命名的方式 在使用组件时 必须将驼峰的所有单词小写加入-进行使用

12.2.2局部组件注册

说明：通过将组件注册给对应的Vue实例中一个components属性来完成组件注册，这种方式不会对vue实例造成累加

  • 第一种开发方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="app">

	//局部组件的使用
    <login></login>

</div>


<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    //局部组件登录模板
    let login = {
        //具体的局部组件的名称.
        template:'<div><h2>用户登录</h2></div>'
    };


    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{//用来注册局部组件
            login:login //注册局部组件
        },
    });
</script>
  • 第二种开发方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的局部组件</title>


</head>
<body>
<div id="app">

    <login></login>

</div>
<!--通过模板标签的形式注册局部组件-->//1.声明组价模板 template标签 注意：在vue实例作用范围外
<template id="loginTemplate">
    <h1>用户登录</h1>
</template>


<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    //局部组件登录模板
    let login = {
        //具体的局部组件的名称.
        template:'#loginTemplate'
    };


    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{//用来注册局部组件
            login:login //注册局部组件
        },
    });
</script>
</body>
</html>

12.3 Prop的使用

作用：props用来给组件传递相应的静态数据或者动态数据的

12.3.1 通过在组件上声明静态数据传递给组件内部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//1.声明组件模板配置对象
    let login = {
        template:"<div><h1>欢迎: {{userName}} {{age}}</h1></div>",
        props:['userName','age'] //props作用 用来接收使用组件时通过组件标签传递的数据
       
    };
//2.注册组件
 const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{
          login:login,//组件注册
        },
 //通过组件完成数据传递
     <login user-name="小陈" age="23"><login>
1
2
3
# 总结
	1.使用组件时可以在组件上定义多个属性以及对应数据
	2.在组件内部可以使用props数组声明多个定义在组件上的属性名，日后可以在组件中通过{{属性名}}方式获取组件中的属性值

12.3.2 通过在组件上声明动态数据传递给组件内部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//1.声明组件模板
   let login = {
       template:"<div><h1>欢迎: {{name}}</h1></div>",
       props:['name'],
   };
   //2.注册局部组件
   const app = new Vue({
       el: "#app",
       data: {
           username:"小陈",
       },
       methods: {},
       components:{
         login:login,//注册组件
       },
   });
   //3.使用组件
   <div id="app">
   	<login v-bind:name="username"></login> // 使用v-bind的形式将数据绑定到Vue实例中的data属性中，日后data属性发生变化，组件内部数据跟着变化
</div>

12.2.3 prop的单向数据流

1
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

12.4 组件中定义数据和事件使用

12.4.1 组件中定义属于组件的数据

1
2
3
4
5
6
7
8
9
10
let login = {
    template: '<div><h1>{{msg}}小黑</h1> <ul><li v-for="item in lists">{{item}}</li></ul></div>',
    data(){ //使用data函数方式定义组件中的数据 在template代码中通过插值表达式直接获取
        return {
            msg:"hello",
            lists:['java','c++','spring'],
        }
    },
    props:['name'],
};

12.4.2 组件中事件定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let login = {
    template:'<div><input type="button" value="点我触发组件中的事件" @click="change"></div>',
    data(){
        return {
            name:'小陈',
        };
    },
    methods:{
        change(){
            alert(this.name);
            alert("触发事件");
        }
    }
}
1
2
3
# 总结
	1.组件中定义事件和直接在vue中定义事件基本一致 直接在组件内部对应的html代码上加入@事件名=函数名方式即可
	2.在组件内部使用methods属性用来定义对应的事件函数即可，事件函数中的this指向的是当前组件的实例

12.5 向子组件中传递数据并在子组件中调用该事件

在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//1.声明组件
   //组件的声明
   let login = {
       template:'<div><h1>小姚 {{uname}}</h1> <input type="button" value="点我" @click="change"></div>',
       data(){
           return {
               uname:this.name,
           };
       },
       props:['name'],
       methods:{
           change(){
               // alert("login组件函数执行");
               //调用vue实例中的函数
               this.$emit('aaa');
           }

       }
   };
//2.注册组件
const app = new Vue({
       el: "#app",
       data: {
           username:"小陈",
       },
       methods: {
           findAll(){
               alert("vue实例中定义的函数");
           }
       },
       components:{
           login,//注册组件
       }
   });
//3.使用组件
<div id="app">
   <!--子组件-->
   <login :name="username" @aaa="findAll"></login>
</div>

13. Vue中的路由(VueRouter)

13.1 路由

路由：根据请求的路径按照一定的规则进行请求的转发从而帮助我们实现统一请求的管理

13.2 作用

用来在vue中实现组件的切换

13.3 使用路由

  1. 引入路由
1
2
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> //vue路由的js
  1. 创建组件对象
1
2
3
4
5
6
7
8
//声明组件模板
const login = {
    template:'<h1>登录</h1>',
}

const register = {
    template:'<h1>注册</h1>',
}
  1. 定义路由对象的规则
1
2
3
4
5
6
7
8
//创建路由对象
const router = new VueRouter({
   routes:[
       //将组件绑定给路由
       {path:"/login",component: login},   //路由的路径 component：路由对应的组件
       {path:"/register",component: register} 
   ]
});
  1. 将路由对象注册到Vue实例
1
2
3
4
5
6
const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    router:router,//设置路由对象
});
  1. 在页面中显示路由的组件
1
2
<!--显示路由的组件-->
<router-view></router-view>
  1. 根据连接切换路由
1
2
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>

13.4 router-link的使用

作用：用来替换我们在切换路由时使用的a标签切换路由

好处：就是可以自动给路由路径加入#,不需要手动加入

1
2
<!--router-link 好处：书写路由路径不需要# to后面用来书写路由路径-->
<router-link to="/login" tag="button">我要登陆了</router-link>
1
2
3
# 总结
	1.router-link 用来替换使用路由切换 好处是不需要书写#号直接书写路由路径
	2.router-link to属性用来书写路由路径 tag属性：用来将router-link属性渲染成指定的标签

13.5 默认路由

作用：用来在第一次进入界面时显示一个默认的组件

1
2
3
4
5
6
7
8
9
	//创建路由对象
   const router = new VueRouter({
   routes:[
       // {path:'/',component:login},
       {path:'/',redirect:'/login'}, //redirect: 用来当访问的是默认路由 '/' 时 ，跳转到指定的路由展示 （推荐使用）
       {path:'/login',component:login},
       {path:'/register',component: register}
   ] ,
});

13.6 路由中的参数传递

  • 第一种方式传递参数
  1. 通过?号的形式拼接参数
1
<router-link to="/login?id=21&name=zhangsan">点我登录</router-link>
  1. 组件中获取参数
1
2
3
4
5
6
7
8
9
10
11
12
13

//声明组件模板
   const login = {
       template:'<h1>登录{{this.$route.query.id}} {{this.$route.query.name}}</h1>',
       data(){
           return {}
       },
       methods:{},
       created(){
           console.log("========>" + this.$route.query.id + "=======>" + this.$route.query.name);
       }
   }
  • 第二种方式传递参数restful
  1. 通过使用路径方式传递参数
1
2
3
4
5
6
7
8
9
10
11
<router-link to="/register/21/张三">点我注册</router-link>

   //创建路由对象
   const router = new VueRouter({
      routes:[
          //将组件绑定给路由
          {path:'/',redirect:'/login'},
          {path:"/login",component: login},
          {path:"/register/:id/:name",component: register} //定义路径中获取对应参数
      ]
   });
  1. 组件中获取参数
1
2
3
4
5
6
7
8

const register = {
        template:'<h1>注册{{$route.params.id}}</h1>',
        created(){
            console.log(this.$route.params.id);
            console.log(this.$route.params.name);
        }
    }

13.7 嵌套路由

  1. 声明最外层和最内层路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template id="product">
<!--    模板最外层必须有且只能有一个容器-->
    <div>
        <h1>商品管理</h1>
        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/edit">商品编辑</router-link>
        <router-view></router-view>
    </div>
</template>
 //声明组件模板
    const product = {
        template:'#product'

    };

    const add = {
        template: '<h2>商品添加</h2>',
    }

    const edit = {
        template: '<h2>商品编辑</h2>',
    }
  1. 创建路由对象含有嵌套路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//创建路由对象

   const router = new VueRouter({
      routes:[
          {
              path:'/product',
              component:product,
              children:[
                  {path:'add',component: add},
                  {path:'edit',component: edit}
              ]
          },

      ]
   });
  1. 注册路由对象
1
2
3
4
5
6
const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    router:router,//设置路由对象
});
  1. 测试路由
1
2
3
4
<div id="app">
    <router-link to="/product">商品管理</router-link>
    <router-view></router-view>
</div>

14. Vue CLI脚手架

14.1 什么是CLI

​ 命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）。

14.2 Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用vue脚手架之后我们开发的页面将会是一个完整的系统。（项目）

14.3Cue CLI优势

  • 通过vue-cli搭建交互式的项目脚手架。bootstrap css js 通过命令行的方式下载依赖

  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

  • 一个运行时依赖 (@vue/cli-service)，该依赖：

    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置； webpack项目打包方式 编译好的项目源码 =====》部署到服务器上直接使用
    • 可以通过项目内的配置文件进行配置；默认配置文件，通过修改默认配置文件达到自己最想要的项目环境。
    • 可以通过插件进行扩展。 vue v-charts elementui

  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。 Nodejs(类似于tomcat) Vue VueRouter webpack

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

14.4Cue CLI的安装

  1. 环境准备
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 1.下载Nodejs

# 2.配置node js环境变量

# 3.验证nodejs环境是否成功
	node -v
# 4.npm介绍
	node package manager nodejs的包管理工具
	maven管理java后端的依赖  远程仓库(中心仓库) 阿里云镜像
	npm 管理前端系统的依赖    远程仓库(中心仓库) 配置淘宝镜像
# 5.配置淘宝镜像
	npm config set registry https://registry.npm.taobao.org
	npm config get registry
# 6.配置npm下载依赖的位置
  1. 安装脚手架
1
2
# 1.Vue cli官方网站	
	npm install -g vue-cli
  1. 第一个vue脚手架项目
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 1.创建vue脚手架的第一个项目
	vue init webpack my-project
# 2.创建第一个项目
hello     ---------->项目名
    -build    ------->用来使用webpack打包使用的build依赖
    -config   ------->用来做整个项目的配置目录
    -node_modules --->用来管理项目中使用的依赖
    -src     -------->用来书写vue代码的(重点)
   		-assets ----->用来存放静态资源(重点)
		-components-->用来书写vue组件(重点)
		-router------>用来配置项目中的路由(重点)
		-App.vue ---->项目中的根组件(重点)
		-main.js----->项目中主入口[重点]
    -static    ------>其他静态
    -babelrc   ------>将es6语法转为es5运行
    -editorconfig --->项目编辑配置
    -gitignore ------>git版本控制忽略文件
    -postcssrc.js --->源码相关js
    -index.html  ---->项目主页
    -package.json --->类似于项目中的pom文件 依赖管理
    -package-lock.json ->对package.json加锁
    -README.md 
# 3.如何运行项目(在项目的根目录下执行以下命令)
	npm start 运行前端项目
# 4.如何访问
	http://localhost:8080
# 5.vue cli项目的开发方式
	注意：一切皆组件   一个组件中：js代码 html代码 css样式
	
	1.Vuecli开发方式是在项目中开发一个组件对应一个业务功能模块，日后可以将多个组件组合到一起形成一个前端系统
	2.日后再使用vue cli进行开发时不再书写html，编写的是一个一个的组件，日后打包时vue cli 会将组件编译成运行的html文件

  1. 如何开发vue脚手架

    注意:在vue cli中一切皆组件

15. 在脚手架中使用axios

15.1 安装axios

1
2
3
4
5
6
7
# 1.安装axios
	npm install axios -save-dev
# 2.配置main.js中引入axios
	import axios from 'axios'
	Vue.prototype.$http=axios;//修改内部$http为axios $http.get("")
# 3.使用axios
	在需要发送异步请求的位置:this.$http.get("url").then((res)=>{})

16. vue cli脚手架项目的打包和部署

1
2
3
4
5
6
# 1.在项目的根目录中执行如下命令
	npm run build
	注意：vue脚手架打包的项目必须在服务器上运行，不能直接双击运行
# 2.打包之后当前项目中的变化
	在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说直接部署目录

赏

谢谢你请我吃糖果

微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

大二学生一枚，共同进步