Vue

介绍

Vue是一个渐进式的javascript框架，让我们通过操作很少的dom，甚至不需要操作页面中的dom元素就可以完成数据和视图的双向绑定，即MVVM

1. Vue入门

1.1 下载Vue.js

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

1.2 第一个应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue</title>
</head>
<body>
    <div id="app"> 
        <!--{{}}：Vue的模版语法渲染数据-->
        {{message}}
    </div>
     <!--引入vue.js开发版本-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
            //挂载点
            el:"#app",
            //数据
            data:{
                message:"Hello Vue!"
            }
        })
    </script>
</body>
</html>

- el：用于设置`Vue实例的作用范围`，作用范围内的元素都被Vue管理，可以使用Vue的语法
    - a. el属性支持css的多种选择器，但Vue官方`推荐使用id选择器`
    - b. el属性不能命中body和html标签以及单标签
- data：用于定义`Vue实例用到的数据`，可以定义数组、对象复杂类型，格式遵守json语法即可
- {{}}：Vue的`插值表达式语法`，将data中的数据渲染到页面中,可以书写表达式、运算符、调用方法等
- 页面的加载顺序是从上而下的，因此`创建Vue的实例需要在div下面`，不然会渲染不到

1.3 data复杂类型渲染

<body>
    <div id="app">
       <h3>字符串：{{message.toUpperCase()}} </h3>
       <h3>对象： {{user.name}} </h3>
       <h3>数组： {{face[2]}}</h3>
    </div>
     <!--引入vue.js开发版本-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
            //挂载点
            el:"#app",
            //数据
            data:{
                message:"Hello Vue!",
                user:{
                    name:"蛋炒饭",
                    age:"22"
                },
                face:["开心","难过","得瑟"],
            }
        })
    </script>
</body>

2. Vue数据绑定

3.1 v-text

v-text用于将data中的数据渲染到标签内部，类似于js中的innerText

<body>
    <div id="app">
        <span>{{message}},你好</span> <br>
      	<!--你好 不会显示-->
        <span v-text="message">你好</span>
    </div>
   
  	<!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
            el:"#app",
            data:{
                message:"测试 v-text"
            }
        })
    </script>
</body>

v-text拼接字符串的两种方式：

<h3 v-text="`字符串：${xx}`"></h3>

<h3 v-text="'字符串'+xx"></h3>

# {{}}插值表达式和v-text获取数据渲染的区别：
	a.使用v-text渲染会覆盖标签中原有的数据，{{}}插值表达式不会覆盖
	b.使用v-text可以避免网络不好的情况下出现闪烁，使用{{}}插值表达式网络不好的情况下会先显示{{message}}，等加载完后才显示真正的内容，体验不好，最新版已经修复

3.2 v-html

v-html对于普通文本和v-text是一样的，不同的是v-html会解析html标签，类似于js中的innerHtml

<body>
    <div id="app">
            <!--效果：超链接 我的github-->
            <p v-html="content"></p>
            <!--效果：文本 <a href='http://github.com'>我的github</a>-->
            <p v-text="content"></p>
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
            var app = new Vue({
                    el:"#app",
                    data:{
                        content:"<a href='http://github.com'>我的github</a>"            
                    }
            })
    </script>
</body>

3. Vue事件绑定

3.1 Vue事件绑定语法

v-on用于为元素绑定事件

<body>

    <div id="app">
        <h3>count值：{{count}}</h3>

        <input type="button" value="通过v-on事件修改count+1" v-on:click="add">
        <input type="button" value="通过v-on的简化写法@修改count+1" @click="add">
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
            el:"#app",
            data:{
                count:23
            },
            methods:{ //用于定义vue中的事件
                // add:function(){
                //     this.age+=1;
                // },
                add(){    //两种写法作用一样，这种更简洁，推荐使用
                    this.age+=1;
                } 
            }
        });
    </script>
</body>

3.2 Vue事件参数传递

<body>

    <div id="app">
        <h3>count值：{{count}}</h3>
      
        <input type="button" value="通过传递参数值修改count值" v-on:click="changecount(60)">
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
            el:"#app",
            data:{
                count:23
            },
            methods:{
                changecount(count){     //接受参数，多个参数用,分割
                    this.count  = count;
                }     
            }
        });
    </script>
</body>

3.3 Vue事件案例—计数器

点击 + 和 - 对数字进行改变

<div id="app">
        <input type="button" value="-" @click="sub"> &nbsp;
        <span> {{count}} </span>
        &nbsp; <input type="button" value="+" @click="add">
    </div>

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

        var app = new Vue({
            el: "#app",
            data: {
                count: 1
            },
            methods: {
                add() {
                    if (this.count < 10) {
                        this.count += 1;
                    } else {
                        alert("最大了，别点了");
                    }
                },
                sub() {
                    console.log(this.count)
                    if (this.count > 1) {
                        this.count -= 1;
                    } else {
                        alert("最小了，别点了");
                    }
                },
            }
        });
    </script>

#总结
- 在vue中绑定事件通过`v-on:事件`进行绑定，比如v-on:click
- 在vue中的绑定的事件方法统一写在`methods`中
- v-on指令可以简写为`@`，比如v-on:click可以简写为`@click`
- 事件的后面可以跟上`事件修饰符`，比如`v-on:keyup.enter`表示只有按enter键才会触发
- 在vue事件中的`this`指的是当前vue实例，可以通过this获取vue中的数据以及调用方法

4. Vue条件渲染

4.1 v-show

v-show用于控制标签在页面中的是否显示

<div id="app">
    <!--直接定义-->
    <h3 v-show="false">Hello,v-show!</h3>
    <!--根据data数据-->
    <h3 v-show="isShow">Hello,v-show!</h3>
    <!--根据表达式-->
    <h3 v-show="num>=16">Hello,v-show!</h3>
  	
    <button @click="doit">显示/隐藏</button>
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isShow: true,
            num: 16
        },
        methods: {
          	//通过事件控制
            doit: function () {
                this.isShow = !this.isShow
            }
        }
    })
</script>

4.2 v-if

v-if 用于控制标签在页面中的是否显示

<div id="app">
    <!--直接定义-->
    <h3 v-if="false">Hello,v-show!</h3>
    <!--根据data数据-->
    <h3 v-if="isShow">Hello,v-show!</h3>
    <!--根据表达式-->
    <h3 v-if="num>=16">Hello,v-show!</h3>
  	
    <button @click="doit">显示/隐藏</button>
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isShow: true,
            num: 16
        },
        methods: {
          	//通过事件控制
            doit: function () {
                this.isShow = !this.isShow
            }
        }
    })
</script>

# 总结
- v-if与v-show的作用一样，都是控制标签是否在页面中展示
- v-if通过`操作dom元素`来控制显示状态，v-show是通过display属性 
- 频繁的切换状态使用v-show，因为`v-show的切换消耗小`
- v-show与v-if指令后的内容最终都会`解析为布尔值`，true展示，false隐藏，所以可以直接定义boolean值，也可以定义表达式

5. Vue标签属性绑定v-bind

v-bind用于为标签绑定属性

<div id="app">

    <img v-bind:title="title" v-bind:class="{aa:showCss}" :src="src">

</div>
    
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: "Vue的Logo图片",
            showCss: true,
          	src:"vuelogo.png"
        }
    })
</script>

# 总结
- 完整写法是`v-bind:属性名`，可以简写为`:属性名`
- 如果是给class设置属性的话，推荐使用`{class:true/false}`使用这种方式

6. Vue中遍历对象v-for

v-for用于对对象以及数组进行遍历

<div id="app">
   <h3>{{user.name}} {{user.age}}</h3>

   <!-- 遍历对象 -->
   <span v-for="(value,key,index) in  user">
       {{index}},{{key}},{{value}}
   </span>

   <!-- 遍历数组 -->
   <span v-for="value,index in arr">
       {{index}} {{value}} <br>
   </span>

   <!-- 遍历对象数组 -->
   <span v-for="user,index in users" :key="user.id">
       {{index}} {{user.name}} <br>
   </span>

</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            user: { name: "蛋炒饭", age: 23 },
            arr: ["北京", "上海", "山西", "杭州"],
            users: [
                {id:1, name: "蛋炒饭", age: 23 },
                {id:2, name: "西红柿1", age: 25 },
            ]
            }
        })
    </script>

# 总结
- v-for的语法格式 `value,[index] in 对象`，索引不是必须的
- 遍历对象时第一个参数为值，第二个参数为键，第三个参数为索引
- 遍历数组时第一个参数为值，第二个参数为索引
- 在使用v-for的时候一定要加入一个`:key`并保证值是唯一的，用于提高给Vue内部`重用和排序`

7. Vue中双向绑定v-model

v-model用于绑定标签中的数据和data中的数据，实现数据的双向绑定机制

<div id="app">
    <input type="text" v-model="value">

    {{value}}

    <button @click="changeValue">修改值</button>
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            value:""
        },
        methods: {
            changeValue(){
                this.value="123"
            }
        }
    })
</script>

# 总结
- 标签的数据会和data中的数据实现`双向绑定`，修改一方另一方也会修改

5.axios

强大的网络请求库

1.导入axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.使用

then方法中的回调函数会在请求成功或者失败时触发

<script>
  			//get 请求
        axios.get("https://autumnfish.cn/api/joke/list?num=3")
          .then(function(response){
              console.log(response)
          },function(err){
          console.log(123+err) 
          })
  
  			//post 请求 参数：{username,"djn"}
  			 axios.post("https://autumnfish.cn/api/joke/list",{username,"djn"})
          .then(function(response){
              console.log(response)
          },function(err){
          console.log(123+err) 
          })
</script>

8. Vue综合案例—记事本

<div id="app">
   <input type="text" v-model="msg"> <button @click="save">添加到记事本</button>
   <br> <br>

   <ul>
      <li v-for="value,index in list"> 
         {{index+1}}. {{value}} <a href="javascript:;" @click="delRow(index)">删除</a>
      </li>
           
   </ul>
  
    <br>
		
    <span>总数量：{{list.length}}</span>
  	
  	<!-- 当list的元素长度大于0时才显示 -->
    <button v-show="list.length>0" @click="delAll">删除所有</button>
</div>

<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            list:["第一次记事","明天去约会"],
            msg: "",
            size: ""
        },
        methods: {
            //添加元素
            save() {
                this.list.push(this.msg);
                // 添加后清空输入框
                this.msg = "";
            },
            // 删除数组单个元素
            delRow(index){
                this.list.splice(index,1);
            },
            // 删除数组全部元素
            delAll(){
                this.list = []
            }
        }
    })
</script>

9. Vue事件修饰符

用于与对事件进行修饰，进行限制

9.1 stop

stop 用于阻止事件继续传播

- 这里的继续传播的意思是：事件默认会`向外进行传播`，当外部标签和内部标签具有`相同事件`时，那么外部标签也会被执行，比如上面代码的div和button，都具有click点击事件，所以当点击btn时，也会触发div的点击；这就是事件继续传播，而使用`stop可以阻止事件传播`，即只会触发btn的点击。

<div id="app" >
    <div @click="divClick">
          <button  @click.stop="btnClick">btnClick</a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            btnClick(){
                alert("btnClick");
            },
            divClick(){
                alert("divClick");
            }
        }
    })
</script>

9.2 prevent

prevent 用于阻止标签的默认行为

- 比如超链接默认会跳转页面，可以使用prevent阻止

<!--当触发点击事件后，还会跳转到baidu.com-->
<a href="http://baidu.com" @click="aClick">aClick</a>

<!--当触发点击事件后，不会跳转到baidu.com-->
<a href="http://baidu.com" @click.prevent="aClick">aClick</a>

9.3 self

self 只触发自己标签上的事件，不监听内部事件的传播

- self与stop实现的效果类似，不过如果外部标签使用了self，那么内部的所有标签事件都不用加stop了

<!-- 用于阻止事件的传播 -->
<div  @click.self="divClick">
    <button  @click="btnClick">btnClick</a>
    <button  @click="btnClick">btnClick1</a>
</div>

9.4 once

once 只会触发一次事件

- 在不刷新页面的情况下，当前事件只会触发一次，当再次执行事件无响应

<button @click.once="btnClick">btnClick Once</button>

10. Vue按键修饰符

与键盘上的按键进行绑定

# vue提供了以下修饰符
	.enter
	.tab
	.delete (捕获“删除”和“退格”键)
	.esc
	.space
	.up
	.down
	.left
	.right

10.1 enter回车键

用于监听触发回车键后的事件

<input type="text" v-on:keyup.enter="keyup">

10.2 tab 键

用于监听触发tab键后的事件

<input type="text" v-on:keyup.tab="keyup">

其他键的用法一样，就不演示了～～～

11. Axios

Axios 是一个Http库，异步请求技术。使用文档

11.1 下载Axios

Axios并不是Vue开发的，因此需要单独引入Axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

11.2 get请求

axios.get("http://localhost:8080/user/findAll?name=丁江楠")
  .then(function(response){  //接受返回数据
       console.log(response.data)
  })
  .catch(function(error){    //捕获异常
       console.log(error)
  });

11.3 post请求

axios.post("http://localhost:8080/user/save",{
  					id:100,
            username:"丁六",
            age:22,
            phone:"123456"
 })
 .then(function(response){
     console.log(response.data)
 }).catch(function(error){
     console.log(error)
 });

# 总结
- Axios是一个异步请求技术，通过请求http接口，获取数据进行渲染，支持get、post、put多种请求
- Axios中的this与vue的实例的`this并不是同一个`，所以需要在外部进行指定，不然会赋值失败

 let _this = this; //因为axios中的this和外部的this不是同一个，所以直接在axios内部使用this无法赋值
 axios.get("http://localhost:8080/weather/find?name=" + this.name)
     .then(function (response) {
         _this.value = response.data;
     });

12. Vue生命周期钩子

# 总结
- 初始化阶段
	- beforeCreate(){ // 1.生命周期第一个函数，该函数执行时仅仅完成VUe实例自身的初始化工作，还没有el、data、methods的相关数据
  - created()  //2. 生命周期第二个函数，该函数执行时已经初始化了el、data、methods
  - beforeMount(){ //3. 生命第三个函数，该函数执行时将el作用范围内进行模版编译 
  - mounted(){  //4. 生命第四个函数，该函数执行时已经将数据渲染页面并更新页面
- 运行阶段
	- beforeUpdate() //5. 该函数是在data中的数据发生变化且页面展示还没变化时执行
	- updated() //6.该函数时data中数据发生变化并且页面也发生了变化时执行
- 销毁阶段
	- beforeDestory() //7.该函数执行时，Vue中的数据都没销毁
	- destoryed()  //8.该函数执行时，Vue实例彻底销毁

13. Vue组件

组件 用于减少Vue的代码量，以后在使用Vue开发时，可以根据不同的业务逻辑划分不同的组件，然后由多个组件去完成页面的布局，便于维护管理

组件在Vue中是非常重要的，以后开发一个页面可能就会是很多个组件构成

13.1 全局组件

 <div id="app">
     <!-- 使用组件 -->
     <login></login>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //开发全局组件
    Vue.component("login", {
        template: "<div><h1>全局组件</h1></div>"
    })
    new Vue({
        el: "#app"
    })
</script>

# 总结
- 参数1:组件名称 参数2:组件配置对象 template:用于编写组件的html代码(`必须存在一个大容器`)
- 使用组件必须要Vue的作用范围内使用，为组件名称标签
- 如果组件名称是驼峰格式，使用时需要用'-'

13.2 局部组件

方式一

<div id="app">
    <!-- 使用组件 -->
    <login></login>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  	//定义变量保存模版配置对象
    let login = { //局部组件名称
        template: "<div><h1>局部组件</h1></div>"
    }
    
    new Vue({
        el: "#app",
        components:{   //用来注册局部组件
            login:login //注册局部组件
        }
    })
</script>

方式二，如果组件的html代码很多，推荐使用这种方式，方便管理

<div id="app">
    <!-- 使用全局组件 -->
    <login></login>
</div>

<!-- 通过模版标签注册局部组件 -->
<template id="loginTemplate">
    <h1>登录模版</h1>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  	//定义变量保存模版配置对象
    let login = { //局部组件名称
        template: "#loginTemplate"  //使用自定义局部组件模版标签的选择器即可
    }
    var app = new Vue({
        el: "#app",
        components: {
            login: login
        }
    })
</script>

# 总结
- 局部组件不会造成Vue实例的累加，`建议使用`
- 局部组件主要是通过在外面定义模版配置对象，在components中注册，定义模版配置对象分为直接定义和使用template模版标签

13.3 组件接收数据

props 用于接收使用组件时通过组件标签传递的数据

接收静态数据

<div id="app">
    <!-- 使用全局组件 -->
    <login username="丁江楠" age="23"></login>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login = {
        template: "<div><h1>姓名:{{username}},年龄:{{age}}</h1></div>",
        props:["username","age"] //用于接受使用组件时通过组件标签传递的数据
    }
    new Vue({
        el: "#app",
        components:{
            login:login
        }
    })
</script>

# 总结
- 使用组件时，可以在组件标签上定义多个属性
- 在组件内部可以使用props声明定义在组件标签上的属性，然后可以在组件html代码中通过 {{属性名}}获取数据

接收动态数据

13.4 组件定义数据和事件

data() 在组件内部定义属于组件的数据

<div id="app">
    <!-- 使用全局组件 -->
    <login></login>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login = {
        template: "<div><h1>{{msg}}</h1>",
        data(){		//定义属于组件的数据
            return{
                msg:"hello"
            }
        }
    }
    new Vue({
        el: "#app",
        components:{
            login:login
        }
    })
</script>

methods: 在组件内部定义属于组件的事件

<div id="app">
    <!-- 使用全局组件 -->
    <login></login>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login = {
        template: "<div><button @click='strike'>点击我触发事件</button></div>",
        methods:{	//定义属于组件的事件
            strike(){
                alert("触发事件")
            }
        }
    }
    new Vue({
        el: "#app",
        components:{
            login:login
        }
    })
</script>

13.5 子组件调用Vue实例的事件

<div id="app">
    <!-- 使用全局组件 -->
    <login @find="findAll"></login>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login = {
        template: "<div><h1>{{msg}}</h1> <button @click='change'>点击我触发事件</button></div>",
        data(){
            return{
                msg:"hello"
            }
        },
        methods:{
            change(){
                this.$emit('find')
            }
        }
    }
    new Vue({
        el: "#app",
        data:{},
        methods:{
            findAll(){
                alert("Vue实例中的函数")
            }
        },
        components:{
            login:login
        }
    })
</script>

# 总结
- 在组件中调用Vue实例中的事件，首先通过`@函数名=Vue实例事件`进行传递事件，然后通过`this.$emit('函数名')`调用，组件的函数名不能与被调用的事件名相同

14. Vue-Router(路由)

路由 根据不同的请求路径按照路由规则进行显示组件，实现统一请求的管理

# 为什么需要路由
- 因为组件在Vue中是很重要的，以后可能一个页面就是由很多组件构成的，但是某一时刻我们只需要用到或者只想看到其中一个组件，所以就需要Vue的`路由可以帮助我们根据路径来显示哪个组件`，也就是`组件的切换`

14.1 下载Vue Router

 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

14.2 使用路由

1. 创建组件模版对象

// 1.创建组件模版对象
const login = {
    template: "<div><h1>登录</h1></div>"
}

const register = {
    template: "<div><h1>注册</h1></div>"
}

2. 创建路由对象定义路由规则

是routes，不要写成 routers

// 创建路由对象
const router = new VueRouter({
        routes: [        //定义路由规则，将组件映射到路由
            { path: "/login", component: login },  
            { path: "/register", component: register } 
        ]
});

3. 将路由对象注册到Vue实例中

const app = new Vue({
        el:"#app",
        data:{},
        methods:{},
        router:router //3.设置路由对象
});

4. 在页面中显示Vue路由

<!-- 显示路由 -->
<router-view></router-view>

5. 根据请求路径切换路由

路径前面添加#

<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>

14.3 router-link

router-link 用于组件之间的切换，它不需要手动给路径加入#

<!-- to:路由路径 tag:渲染当前router-link标签为button-->
<router-link to="/login" tag="button">点我登录</router-link>
<router-link to="/register">点我注册</router-link>

14.4 默认路由

默认路由 用于第一次进入页面默认显示的组件

// 2.创建路由对象
const router = new VueRouter({
    routes: [     
        // { path: "/", component: login },//第一种，当访问默认路由/时，显示指定的组件
        {path:"/",redirect:"/login"},   //第二种，当访问默认路由/时，重定向到指定的路径，推荐
        { path: "/login", component: login },
        { path: "/register", component: register }
    ]
});

14.5 路由参数传递

第一种方式传递参数传统方式

1.通过？路径拼接参数传递

<router-link to="/hello?id=2">点我</router-link>

2.通过 this.$route.query 获取参数

const hello = {
      template: "<div>hello {{this.$route.query.id}}</div>",
      created(){
        console.log(this.$route.query.id) //获取参数
      }
}

第一种方式传递参数 Restful方式

1.通过路径的方式传递参数

<router-link to="/register/1">点我注册</router-link>

2.通过this.$route.params获取参数

const register = {
    template: "<div><h1>用户注册</h1></div>",
    created(){
        console.log("===="+this.$route.params.id) //获取参数
    }
}

3.使用该方式还需要Router对象设置path路由规则:参数

{ path: "/register/:id", component: register },

14.6 嵌套路由

嵌套路由 有的时候我们并不希望路由直接被替换掉，而是以子路由的情况展示，也就是嵌套路由

创建外层模版和内层模版对象

//创建组件模版
const product = {
    template: "#product"
}

const productadd = {
    template: "<h1>商品添加页面</h1>"
}

const productupdate = {
    template: "<h1>商品修改页面</h1>"
}

创建路由对象，包含内层路由

// 创建路由对象
const router = new VueRouter({
    routes: [
        {
            path: "/product",
            component: product,
            children: [
                { path: "/product/add", component: productadd },
                { path: "/product/update", component: productupdate },
            ]
        },
    ]
})

注册路由对象

const app = new Vue({
    el: "#app",
    router: router, //注册路由
})

使用路由

<div id="app">
    <router-link to="/product">商品管理</router-link>
    <!-- 显示路由 -->
    <router-view></router-view>
</div>
<template id="product">
    <div>
        <h1>商品管理页面</h1>
        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/update">商品修改</router-link>
        <!-- 显示路由 -->
        <router-view></router-view>
    </div>
</template>

# 总结
- 模版对象还是正常开发
- 将被嵌套的路由放在外部路由对象的children即可

14.7 监听路由

watch:{
	$route:function(val,oldVal){
		
}
}

15. Vue-Cli(脚手架)

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，一切皆组件，进入官网。

15.1 Vue CLI 的优势

通过 vue-cli 搭建交互式的项目脚手架，通过 命令 下载相关依赖
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发，可以直接上手开发
提供一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；webpack是一个项目打包方式，类似Maven打包
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。

15.2 Vue CLI 安装

1. 安装nodejs和npm

Vue CLI 是运行在nodejs上的，所以需要先安装nodejs

# 1.下载nodejs 
	http://nodejs.cn/download/
	
# 2.测试是否安装成功
	node -v

# 3.npm介绍
	node package manager node包管理工具，安装nodejs时默认也安装了npm
	用于管理前端的依赖，和maven类似，从远程仓库下载依赖到本地，由于国外速度太慢，需要配置淘宝镜像

# 4.npm配置淘宝镜像
	npm config set registry https://registry.npm.taobao.org
	npm config get registry
	
# 5.配置npm下载的依赖位置
	npm set cache /Users/dingjn/nodereps
	npm set prefix /Users/dingjn/nodereps
	
# 6.验证nodedjn环境配置
	npm config ls

2. 安装 Vue CLI

# 1.安装 Vue CLI 2
	sudo npm install --global vue-cli
	
# 2.配置环境变量
	sudo vim ~/.bash_profile
	添加export PATH=${PATH}:/Users/dingjn/nodereps/bin，上面配置的依赖路径
	source ~/.bash_profile 使环境配置文件生效
	
# 3.测试是否安装成功
	vue --version
  
# 卸载Vue CLI
	sudo npm uninstall --global vue-cli

15.3 第一个脚手架项目

1.创建项目

//<template-name>:基于什么模版创建 
//<project-name>:项目名字
$ vue init <template-name> <project-name>

# 基于webpack模版创建一个为hello-vue-cli的项目
$ vue init webpack hello-vue-cli

# 当执行该命令会让你选择以下配置，根据提示进行选择
? Project name hello-vue-cli
? Project description A Vue.js project
? Author DingJiangNan <codedjn@163.com>
? Vue build runtime
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) 
❯ Yes, use NPM 			# 使用NPM
  Yes, use Yarn 
  No, I will handle that myself 
  
# 当配置选择完成后就开始构建项目了，构建完成后项目目录是这样的
	- build 						--使用webpack打包后的目录
	- config						--整个项目的配置目录
	- node_modules			--用到的依赖
	- src								--源代码（重点关心）
      assets						--用来存放静态资源
    - components				--用来编写Vue组件
    - router						--用来配置项目中的路由
      App.vue						--项目根组件
      main.js						--项目主入口
	- static						--存放项目其他资源
	- babelrc						--用于将es6语法转为es5运行
	- editorconfig			--项目编辑配置
	-	.gitignore				--git提交忽略文件
	- posrcssrc.js			--源码相关js
	- index.html				--项目主页
	- package.json			--类似pom.xml依赖管理
	- package-lock.json	--加锁的package.json
	- README.md					--编写项目的信息

2.运行项目

# 进入项目根目录，执行该命令
	npm start

# 项目启动的流程
	1.首先进入项目的主入口main.js，会执行根组件App.vue和加载./router下的路由
	2.然后发现App.vue中有<router-view />，就会显示路由
	3.router目录下的index.js的会创建路由对象并且配置路由规则，加载components下的组件

# es6暴露当前组件对象，相当于前面的创建组件模版对象，用法一样
export default {  
  name: 'Home',
  methods:{},
  data(){
  	return{
  			
  	}
  }
  components:{
      Footer:Footer
  }
}

然后控制台会输出项目访问地址http://localhost:8081

# 总结
- 一切皆组件，一个组件对应一个业务模块
- 使用Vue CLI开发，就不需要再创建html了，而是一个个组件(.vue结尾的文件，最后打包时)，Vue CLI会将vue组件编译为一个html文件

15.4 Vue CLI安装axios

# 1.安装
	npm install axios --save

# 2.在main.js中引入
	import axios from 'axios'
	
# 3.配置:将axios赋给原生的异步请求，以后使用时可以直接this.$http.get()使用，这样做的好处是在请求响应中给data赋值时不需要再在外部定一个this变量了，可以直接赋值了
	Vue.prototype.$http=axios  //将axion

15.5 Vue CLI 打包部署

# 1.进入项目根目录，执行该命令,vue cli打包的项目必须在服务器上运行，不能双击运行
	npm run build

# 2.打包完成后会在根目录下生成一个dist目录，包含static资源目录和一个index.html

# 3.将dist目录拷贝到服务器，然后将dist目录部署到nginx即可
	 location / {
       root   /home/dist;
       index  index.html index.htm;
   }

结束～

posted @ 2020-06-10 09:13 范特西- 阅读(146) 评论(0) 收藏举报

刷新页面返回顶部

即使再小的帆也能远航！

弱小和无知不是生存障碍，傲慢才是。

Vue

介绍