IDEA搭建vue-cli | vue-router | 排错思路WebpackAxios周期路由异步重定向

Posted 2023-03-09 wei_shuo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IDEA搭建vue-cli | vue-router | 排错思路WebpackAxios周期路由异步重定向相关的知识，希望对你有一定的参考价值。

💗wei_shuo的个人主页

💫wei_shuo的学习社区

🌐Hello World ！

Vue.js概述

Vue 是一套用于构建用户界面的渐进式javascript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动

MVVM模型

Model：模型层，表示JavaScript对象
View：视图层，表示DOM(html操作的元素)
ViewModel：连接视图层和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者

MVVM模型的特点：

低耦合：视图(View)可以独立Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
可复用：可以将视图逻辑放在ViewModel中，让更多View重用这段视图逻辑
独立开发：开发人员可以专注于业务逻辑和数据开发(ViewModel)，设计人员可以专注于页面设计
可测试：测试可以针对ViewModel编写

Hello Vue

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../sources/vue.js"></script>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <h1>message</h1>
</div>

<script>
    var vm = new Vue(
        el: "#app",  //绑定元素
        //Model：数据
        data:
            message:"Hello，Vue!"
        
    );
</script>
</body>
</html>

缩写 v-bind & v-on

v-bind缩写

<a v-bind:href="url">...</a>


<a :href="url">...</a>


<a :[key]="url"> ... </a>
v-on缩写

<a v-on:click="doSomething">...</a>


<a @click="doSomething">...</a>


<a @[event]="doSomething"> ... </a>
总结：

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中

Vue的7个属性

el属性

指示vue编译器从什么地方开始解析 vue的语法

data属性

组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中

methods属性

放置页面中的业务逻辑，js方法一般都放置在methods中

template属性

设置模板，会替换页面元素

computed属性

用来计算，根据已经存在的属性计算出新的属性，对于同样的数据，会缓存

render属性

创建真正的Virtual Dom

watch属性

监听data中数据的变化

双向数据绑定

双向数据绑定，是指视图 View 的变化能实时地让数据模型 Model 发生变化，而数据的变化也能实时更新到视图层

输入框双向数据绑定

<!--view层 模板-->
<div id="app">
    输入的文本:<input type="text" v-model="message">message
</div>

<script>
    var vm = new Vue(
        el: "#app",  //绑定元素
        //Model：数据
        data:
            message:"同步更新"
        
    );
</script>

单选框双向数据绑定

<!--view层 模板-->
<div id="app">
    性别：
    <input type="radio" name="sex" value="男" v-model="wei_shuo"> 男
    <input type="radio" name="sex" value="女" v-model="wei_shuo"> 女

    <p>
        选中了谁：wei_shuo
    </p>
</div>

<script>
    var vm = new Vue(
        el: "#app",  //绑定元素
        //Model：数据
        data:
            wei_shuo:""
        
    );
</script>

下拉框双向数据绑定

<!--view层 模板-->
<div id="app">
        下拉框：
        <select v-model="selected">
            <option>---请选择---</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
        </select>
</div>

<script>
    var vm = new Vue(
        el: "#app",  //绑定元素
        //Model：数据
        data:
            selected:"---请选择---"
        
    );
</script>

组件

组件可以扩展 HTML 元素，封装可重用的代码；组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

格式：
Vue.component('my-component-name',  /* ... */ )
该组件名就是 Vue.component 的第一个参数

<!--view层 模板-->
<div id="app">

<!--组件：传递给组件中的值；只能通过props参数接受-->
    <wei_shuo v-for="item in items" v-bind:wei="item"></wei_shuo>

</div>

<script>

    <!--定义一个Vue组件component-->
    Vue.component("wei_shuo", 
        //接受参数
        props:['wei'],
        //模板
        template: '<li>wei</li>'
    );

    var vm = new Vue(
        el: "#app",  //绑定元素
        //Model：数据
        data: 
            items: ["Java","Linux","前端","后端"]
        
    );
</script>

Axios异步通讯

Axios是一个开源的可以用在浏览器和NodeJS的异步通讯框架，主要作用是实现AJAX异步通讯

特点：

浏览器创建XMLHttpRequests
从node.js创建http请求
支持Promise API（JS中链式编程）
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF（跨站请求伪造）

背景

Vue.js是一个视图层框架，作者（尤雨溪）严格准守SoC（关注度分离原则），所以Vue.js并不包含AJAX的通讯功能，为了解决通信问题，作者单独开发了名为vue-resource的插件，2.0版本以后停止了对该插件的维护并推荐了Axios框架

Vue声明周期

Vue实例有完整的声明周期，开始创建、编译模板、挂载DOM、渲染->更新->渲染、卸载等一系列操作，也就是Vue实例从创建到销毁的过程，称为Vue的声明周期

声明周期钩子函数

创建前（beforeCreate）

Vue实例开始初始化时调用

创建后（created）

实例创建之后进行调用，此时尚未开始DOM编译

载入前（beforeMount）

依然得不到具体的DOM元素，但vue挂载的根节点已经创建

载入后（mounted）

在DOM文档渲染完毕之后进行调用

更新前（beforeUpdate）

data更新时触发

更新后（updated）

data更新时触发

销毁前（beforeDestroy）

销毁实例前进行调用，此时实例任然有效

销毁后（destroyed）

实例被销毁之后进行调用

创建data.json文件


  "name": "wei_shuo",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit": "true",
  "address": 
    "street": "陕西",
    "city": "西安",
    "country": "中国"
  ,
  "links": [
    
      "name": "B站",
      "url": "https://www.bilibili.com/"
    ,
    
      "name": "4399",
      "url": "https://www.4399.com/"
    ,
    
      "name": "百度",
      "url": "https://www.baidu.com/"
    
  ]

引入vue.js和axios.js

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

Vue.html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../sources/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!--    v-cloak 解决闪烁问题 -->
    <style>
        [v-clock]
            display: none;
        
    </style>
</head>
<body>
<div id="app" v-clock>
    <div>info.name</div>
    <div>info.address.street</div>
    <a v-bind:href="info.url">点击</a>
</div>

<script>
    var vm = new Vue(
        el: "#app",
        data() 
            return 
                //请求的返回参数，必须和json字符串一致
                info:
                    name:null,
                    address:
                        street:null,
                        city:null,
                        contry:null
                    ,
                    url:null
                
            
        ,
        mounted()   //钩子函数  链式编程
            axios.get('../data.json').then(response => (this.info = response.data));
        
    )
</script>
</body>
</html>
/*
浏览器显示结果：
wei_shuo
陕西
点击
*/

内容分发（Slot插槽）

Vue.js中使用元素作为承载分发内容的出口，作者称为插槽，可以应用在组合组件的场景中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../sources/vue.js"></script>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title1"></todo-title>
        <todo-items slot="todo-items" v-for="item1 in todoItems" :item="item1"></todo-items>
    </todo>
</div>
<script>

    <!--定义插槽-->
    Vue.component("todo", 
        template:
            '<div>' +
            '<slot name="todo-title"></slot>' +
            '<ul>' +
            '<slot name="todo-items"></slot>' +
            '</ul>' +
            '</div>'
    );
    Vue.component("todo-title",
        props:['title'],
       template: '<div>title</div>'
    );
    Vue.component("todo-items",
        props: ['item'],
        template: '<li>item</li>'
    );
    var vm = new Vue(
        el: "#app",
        data:
            title1:"wei_shou列表",
            todoItems:['学习Java','学习Linux','学习Vue']
        
    )
</script>
</body>
</html>

自定义事件（$emit）

自定义事件分发

格式: this.$emit('自定义事件名',参数)
this.$emit('remove', index);

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=以上是关于IDEA搭建vue-cli | vue-router | 排错思路WebpackAxios周期路由异步重定向的主要内容，如果未能解决你的问题，请参考以下文章 
 从零开始利用vue-cli搭建简单音乐网站
 搭建 vue-cli
 Vue-router路由的简单使用
 搭建vue-cli项目和打包项目
 Vue-cli 环境搭建和使用
 vue2搭建简易spa