Vue快速入门-快速掌握Vue

Vue快速入门-快速掌握Vue1. 简介2. Vue—Hello World3. 指令4. 计算属性和侦听器5. 组件化基础6. 生命周期和钩子函数7. 使用Vue脚手架进行模块化开发1、简介Vue (读音 /vju/，类似于 view)是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程

亿先生@

2801人浏览 · 2022-01-20 00:11:49

亿先生@ · 2022-01-20 00:11:49 发布

Vue快速入门-快速掌握Vue

1. 简介
2. Vue—Hello World
3. 指令
4. 计算属性和侦听器
5. 组件化基础
6. 生命周期和钩子函数
7. 使用Vue脚手架进行模块化开发

在这里插入图片描述

1、简介
Vue (读音 /vju/，类似于 view)
是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。是一套用于构建用户界面的渐进式框架 。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。

1.2、MVVM编程思想
在这里插入图片描述
MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染

M（model）：普通的javascript数据对象
V（view）：前端展示页面
VM（ViewModel）：用于双向绑定数据与页面，对于我们的课程来说，就是vue的实例

1.3、渐进式框架
在这里插入图片描述
“渐进式框架” 非常简单，就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。

场景一：公司刚开始一个项目，技术人员对Vue的掌握也不足够。那么我们就不能使用VUE了么？当然不是，如果你只是使用VUE做些基础操作，如：页面渲染、表单处理提交功能，那还是非常简单的，成熟技术人员上手也就一两天。完全可以用它去代替jquery。并不需要你去引入其他复杂特性功能。
场景二：我们项目用了VUE，使用的效果也挺好。那么我们想逐渐实现代码组件化，实现代码的复用，或者是基于组件原型的跨项目的代码复用。那么我们就可以引入VUE的components组件特性了。
场景三：我们的项目规模逐渐的变大了，我们可能会逐渐用到前端路由、状态集中管理、并最终实现一个高度工程化的前端项目。这些功能特性我们可以逐步引入，当然不用也可以。

所以VUE的适用面很广，你可以用它代替老项目中的JQuery。也可以在新项目启动初期，有限的使用VUE的功能特性，从而降低上手的成本。

1.4、VUE核心功能
基础功能：页面渲染、表单处理提交、帮我们管理DOM(虚拟DOM)节点
组件化开发：增强代码的复用能力，复杂系统代码维护更简单
在这里插入图片描述

前端路由：更流畅的的用户体验、灵活的在页面切换已渲染组件的显示，不需与后端做多余的交互
状态集中管理：MVVM响应式模型基础上实现多组件之间的状态数据同步与管理
前端工程化：结合webpack等前端打包工具，管理多种静态资源，代码，测试，发布等，整合前端大型项目。

2.Vue—Hello World

Vue的其他插件安装
在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
官網
https://cn.vuejs.org/v2/guide/installation.html
可以在vscode中提示vue代码

初始化npm项目

npm init ‐y

安装vue

npm install vue

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body> 
    <div id="app"> 
        <input type="text" v-model="num" >
        <button v-on:click="num++">登录</button>
        <button v-on:click="loginout()">登出</button>
        <h1 v-once>{{name}}，欢迎您,当前登录第{{num}}次,当前登录时间：{{nowDate()}}</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        // 1.new vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的
        let vm=new Vue({
            el: "#app",   // 挂载的模板
            data: {       // 绑定的数据  当数据属性的值发生改变时，视图会进行重新渲染， 响应式的
                name: "易先生",
                num:1
            },
            methods: {
                nowDate(){
                    return new Date().toLocaleDateString()
                },
                loginout(){
                    this.num--;
                }
            },
        }).$mount("#app");


        // 双向绑定：v-model 数据发生改变  视图也要随之改变；
        // 指令： 来简化对Dom的频繁操作
        // 方法： 声明方法可以实现更复杂的操作，声明methods属性中
    </script>
</body>

</html>

3.指令
基本概念

双向绑定

模型变化视图也会随之变化。

视图变化模型也会随之变化。

方法

methods

指令

v-text/v-html：指定标签体
v-if v-else v-show
v-for：遍历
v-on：绑定事件监听
v-bind：属性绑定

v-text/v-html: 指定标签体

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>1、v-text&v-html</title>
</head>
<body>
  <div id="app"> 
    <div v-text="message"></div>   
    <!-- {{}} 在网络延迟情况下会出现暂显的情况 -->
    {{message}}
    <hr>
    <div v-html="message"></div>
    
  </div>
</body>
<script src="/node_modules/vue/dist/vue.js"></script>
<script>
  // 1.实例Vue
 var vm = new Vue({
	el: '#app',
  data: {
    message: "<a href='#'>Hello</a>",
    hrefx:"http://www.baidu.com"
  },
})

// v-text 用于绑定数据，  语法v-text="属性" ， 
  // 会直接将值作为文本显示
// v-html                 
  // 会将值进行编译再显示        
</script>
</html>

v-if v-else v-show
vue提供了vif和vshow两个指令来控制页面元素的显示和隐藏。我们先通过一段代码来
看一下使用两个指令各有什么效果：

v-if : 如果vlaue为true, 当前标签会输出在页面中
v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <button @click="vif=!vif">切换显示隐藏</button>
    <div v-if="vif" style="background-color: red; width: 200px; height: 200px;"> 
      v-if
    </div>
    <hr>
    <button  @click="vshow=!vshow">切换显示隐藏</button>
    <div v-show="vshow" style="background-color: yellow; width: 200px; height: 200px;"> 
      v-show
    </div>
  </div>
</body>
<script src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
   el: '#app',
   data:{
       vif: true,
       vshow: true
   }
})

/*
v-if 和v-show  用于控制元素显示隐藏  ， 
语法 v-if ="指定bool值"  v-show一样

v-if 控制元素是否生成
v-show 控制元素是否显示隐藏  

*/
</script>
</html>

在这里插入图片描述

v-for : 遍历
v-for 用于列表的循环渲染。基本语法：v-for=“item in data”，data 可以是数组或者对象，接下来我们介绍对两种数据类型的循环。

遍历数组 : vfor=“person in persons” $index

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF‐8">
  <meta name="viewport" content="width=device‐width, initial‐scale=1.0">
  <meta http‐equiv="X‐UA‐Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <ul>
      <li v‐for="item in music">{{item.name}}</li>
    </ul>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        // 要循环的数组 
        music: [{
            name: '青花瓷'
          },
          {
            name: '阳光总在风雨后'
          },
          {
            name: '十年'
          }
        ]
      }
    }
  })
</script>

</html>

遍历对象 : vfor=“value in person” $key

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF‐8">
  <meta name="viewport" content="width=device‐width, initial‐scale=1.0">
  <meta http‐equiv="X‐UA‐Compatible" content="ie=edge"> 7 <title>Document</title>
</head>

<body>
  <div id="app">
    <ul>
      <li v‐for="item in obj">{{item}}</li>
    </ul>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data() {

      return {
        obj: {
          name: '句号',
          age: 18,
          sex: '男'

        }

      }

    }

  })
</script>

</html>

v-on : 绑定事件监听

有时候，我们需要给元素绑定事件，vue 中提供了指令 von 来进行事件的绑定。用法：
von:事件名=“方法”，例如：von：click=“alert”。
von:事件名, 可以缩写为: @事件名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button v-on:click="hello('hello')">hello</button>
    <button @click="hello('world')">world</button>
    <button @click="num++">数据</button>{{num}}

    <!-- 不让事件传播  .stop
          禁止默认a标签事件.prevent 阻止默认事件
          .slef  必须要自身触发， 不会参与传播
          .once 事件只会触发一次
   -->

    <div @click.once="hello('1')" style="background: red;width: 800px;height: 500px;padding: 50px;">
      1
      <div @click.stop="hello('2')" style="background: blue;width: 400px;height: 200px;padding: 50px;">
        2
        <a @click.stop.prevent="hello('3')" style="background: yellow;width: 200px;height: 100px;display: block;padding: 50px;" href="http://www.baidu.com">3</a>
      </div> 
    </div>


    <input  v-on:keyup.ctrl="hello('space')">

  </div>
</body>
<script src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data: {
    num:0
  },
  methods: {
    hello(str) {
    	alert(str)
    }
  }
}) 

/*
v-on 用于绑定事件  

语法 v-on:事件名  

简写方式 v-on:click --->  @click

只能调用vue中的函数和数据
*/

 
</script>
</html>

v-bind : 属性绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>2、v-bind</title>
  <style>
    .red{
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="app"> 

    <div v-bind:title="title" :class="{red:isred}" :style="{fontSize: bigFont}">
      鼠标悬停查看消息！
    </div>
    <div>
      <a :href="href">百度</a>
    </div>
    <div>
      <img :src="src"/>
    </div>
    <div>
      <button v-bind:disabled="disabled">禁用按钮</button>
    </div>
  </div>
</body>
<script src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: { 
      isred:true,
      bigFont:"50px",
    	title: "您好，我是易先生，欢迎来到我的vue！希望你可以在vue学到更多的东西！",
      href: 'https://www.baidu.com/',
      src: 'https://img95.699pic.com/photo/50101/8759.jpg_wh300.jpg!/fh/300/quality/90',
      disabled: true
    }
  })  

  // 绑定元素属性 --   v-bind
  /*
    语法：   v-bind:元素属性="vue的属性"

    简写：  v-bind:title 简写成  :title

    针对样式的特殊用法 
      动态控制class是否添加  :class="{red:isred}"
        语法  {red:isred}  : {需要动态控制的class样式:vue的属性（需要是bool类型）}

      动态设置style的样式：:style="{fontSize: bigFont}"
        语法{fontSize: bigFont}   ：  {css样式的驼峰命名方式:vue的属性}: font-size=fontSize 
  */

</script>
</html>

v-model 双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div >
      <label>年龄：</label>
      <input v-model="age"/>
    </div>
    <div>当前输入的年龄是: {{age}}</div>
    <button v-on:click="add">加一岁</button>
    <button v-on:click="alertYear">弹出年龄</button>

<hr>
    
  <label>课程：</label>
  
  <select v-model="course">
    <option value="java">java</option>
    <option value="html">html</option>
    <option value="css">css</option>
  </select>

  <div>
    <input v-model="course" type="radio" name="course" value="java">java
    <input v-model="course" type="radio" name="course" value="html">html
    <input v-model="course" type="radio" name="course" value="css">css
</div>

  <div>当前课程是:{{course}}</div>
  </div>


</body>
<script src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
	el: '#app',
  data: {
    course:'html',
  	age: 10
  },
  methods: {
    add(){
    	this.age++;
    },
    alertYear() {
    	alert(this.age)
    }
  }
})


// v-model 用于实现双向绑定  一般用在表单元素 
</script>
</html>

4.计算属性和侦听器

计算属性 VS 方法
如果不使用计算属性，在 methods 里定义了一个方法，也可以实现相同的效果，甚至该方法还可以接受参数，使用起来更灵活。
既然 methods 同样可以解决模板中复杂逻辑计算的问题，那么为什么还需要使用计算属性呢? 原因就是：计算属性是基于它的依赖缓存的。前面我们介绍过，计算属性的改变取决于其所依赖数据的变化，所以只要依赖数据不发生改变，计算属性就不会更新。当我们重复获取计算属性时它也不会重复计算，只会获取缓存的值。而我们每次调用 methods 都会重新计算一遍，这样将会消耗一部分性能。当然，如何你不希望对数据进行缓存，那么可以用方法来代替。
侦听器
通过侦听器来监听数据的变化，进行相应的逻辑处理。
如何监听对象类型数据的某个属性进行侦听。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性和侦听器</title>
</head>

<body>
    <div id="app">
        <!-- 实现一个购物车功能
        1. 数据初始化处理
        2.计算商品总价
        3.选择商品数量：当商品数量超过库存做提示
        -->
        <ul>
            <li v-for="(item, index) in car" >
            {{item.pname}} --- 商品价格：{{item.price}} --- 库存：{{item.stock}}
            数量：<input type="number" v-model="item.num" style="width: 30px;" />
            </li>
            <li><strong>总价:</strong>{{calcSum}}</li>
            <li v-html="message"></li>
            <li v-html="warn()"></li>
        </ul>
       
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    
    <script>
        new Vue({
            el:"#app",
            data:{
                car:[
                    {pname:'Iphone 12',price:7999,stock:10,num:1},
                    {pname:'小米11',price:3599,stock:3,num:4},
                ],
                message:"",
            },
            // methods : 当方法中使用的数据发生改变，方法会自动调用
            methods: {
                // calcSum(){
                //     let sum=0;
                //     this.car.forEach(item => {
                //         sum+=item.price*item.num;
                //     });
                //     return sum;
                // }
                warn(){
                    let message="";
                    this.car.forEach(item => {
                        if(item.num>item.stock){
                            message+=`${item.pname}的库存超出限制<br/>`
                        }
                    });
                    return message;
                }
            },
            // 计算属性: 当方法中使用的数据发生改变，方法会自动调用
            computed:{
                 calcSum(){
                    let sum=0;
                    this.car.forEach(item => {
                        sum+=item.price*item.num;
                    });
                    return sum;
                }
            },
            // 侦听器 专门用于侦听数据的变化，当数据发生变化会自动调用方法
            watch:{
                // 要侦听的数据: 数组
                car:{
                    handler(newvalue,oldvalue){ 
                        this.message="";
                        this.car.forEach(item => {
                            if(item.num>item.stock){
                                this.message+=`${item.pname}的库存超出限制<br/>`
                            }
                        });
                    },
                    deep:true   //深度侦听器
                },
                // 基础类型的侦听， 将侦听数据作为函数就可以了  
                message(newvalue,oldvalue){
                    console.info(newvalue,oldvalue)
                }
            }
        });


        /*
        方法和计算属性的区别：
            声明发生不一样，调用不一样方法要用(), 计算属性调用不要加()
        */


        /*
        方法和侦听器的区别：
            方法： 方法中任意数据发生了改变就会自动调用方法
            可以调用，进行返回值


            侦听器：需要指定具体的侦听数据，只有被具体指定的侦听数据发生了改变才会触发
            不能像方法那样去调用， 而是靠vue自动触发

        
        */
    </script>

</body>

</html>

5.组件化基础
组件是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
在这里插入图片描述
在编写组件时，我们需要不断思考如何提高组件的可复用性。

组件是可复用的 Vue 实例，我们可以把页面中在多个场景中重复使用的部分，抽出为一个组件进行复用。组件大大提高了代码的复用率。

全局组件注册。
我们可以通过调用 Vue.component 的方式来定义全局组件，它接收两个参数：1. 组件名，2. 组件属性对象。

 		属性对象：组件的属性对象即为 Vue 的实例对象属性。 
 		全局组件可以在任何其他组件内使用，所以当我们设计的组件，需要在不同地方使用的时候，我们应当注册全局组件。

 // 注册
 // 驼峰命名 
  Vue.component('MyComponentName', {/* */}) 
  // 短横线命名
  Vue.component('my‐component‐name', {/* */}) 
   ......
  // 使用 
  <my‐component‐name></my‐component‐name> 
  // 也可以使用自闭和的方式 
  <my‐component‐name />

具体示例如下：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF‐8">
    <meta name="viewport" content="width=device‐width, initial‐scale=1.0">
    <meta http‐equiv="X‐UA‐Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <my‐component></my‐component>
        <my‐component />
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component('myComponent', {
        template: '<div>Hello ！</div>'
    })
    var vm = new Vue({
        el: '#app',
        data() {
            return {}
        }
    })
</script>

</html>

代码解释：

JS 代码第 3-5 行，我们注册了一个全局组件 myComponent，并在 html 内使用两种方式引用了该组件。

局部组件注册
我们也可以在 Vue 实例选项中注册局部组件，这样组件只能在这个实例中使用。局部组件的注册利用 Vue 实例的 components 对象属性，以组件名作为 key 值，以属性对象作为 value。由于局部组件只能在当前的 Vue 实例中使用，所以当我们设计的组件不需要在其他组件内复用时，可以设计为局部组件。

//注册 
 components: { 
  'MyComponentName': { 
   template: '<div>Hello ！</div>' 
    } 
     } 
      ......

// 使用 
 <my‐component‐name></my‐component‐name> 
  // 也可以使用自闭和的方式 
   <my‐component‐name />

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF‐8">
    <meta name="viewport" content="width=device‐width, initial‐scale=1.0">
    <meta http‐equiv="X‐UA‐Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <my‐component></my‐component>
        <my‐component />
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        components: {
            'myComponent': {
                template: '<div>Hello ！</div>'
            }
        }
    })
</script>

</html>

6.生命周期和钩子函数

生命周期
我们来看一下官网给的 Vue 生命周期的图：

从上面这幅图中，我们可以看到 vue 生命周期可以分为八个阶段，分别是：
- beforeCreate（创建前）
- created（创建后）
- beforeMount (载入前)
- mounted（载入后）
- beforeUpdate（更新前）
- updated（更新后）
- beforeDestroy（销毁前）
- destroyed（销毁后）

3.1 创建前（beforeCreate）
在实例初始化之后，此时的数据观察和事件机制都未形成，不能获得 DOM 节点。

3.2 创建后（created）
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始。

3.3 载入前（beforeMount）
在挂载开始之前被调用：这个过程是在模版已经在内存中编译完成， render 函数首次被调用，此时完成了虚拟 DOM 的构建，但并未被渲染。

3.4 载入后（mounted）
这个过程在模版挂载之后被调用，页面完成渲染，所以在这之后，我们可以操作和访问 DOM 元素。

3.5 更新前（beforeUpdate）
当数据更新时调用，在这一阶段 DOM 会和更改过的内容同步。

3.6 更新后（updated）
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

3.7 销毁前（beforeDestroy）
实例销毁之前调用。在这一步，实例仍然完全可用。

3.8 销毁后（destroyed）
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id = "app">
    <span id="name">{{ name }}</span>
    <button @click="updateName">更新</button>
    <button @click="destroy">销毁</button>
  </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      name:'hello !'
    },
    methods : {
      updateName() {
        console.log('准备修改名字啦！')
        this.name = 'hello 易先生！'
      },
      destroy(){
        vm.$destroy()
      }
    },
    beforeCreate() {
      // 此时页面数据未初始化
      console.log('beforeCreate:' + this.name) // beforeCreate： undefined
    },
    created() {
      // 页面数据已经初始化
      console.log('created:' + this.name) // beforeCreate： hello !
    },
    beforeMount() {
      console.log('beforeMount:' + this.name) // beforeCreate： hello !
      console.log("html模板未渲染：" + document.getElementById("name").innerText);
    },
    mounted() {
      console.log('mounted:' + this.name) // beforeCreate： hello !
      console.log("html模板已渲染：" + document.getElementById("name").innerText);
    },
    // 点击更新按钮后会先触发 beforeUpdate
    beforeUpdate() { 
      console.log('beforeUpdate:' + this.name) // beforeCreate： hello 
      console.log("html模板未更新：" + document.getElementById("name").innerText);
    },
    updated() {
      console.log('updated:' + this.name) // updated hello 易先生 !
      console.log("html模板已更新：" + document.getElementById("name").innerText);
    },
    // 点击销毁按钮后会先触发 beforeDestroy
    beforeDestroy(){
      console.log('beforeDestroy: before destroy') // beforeDestroy: before destroy
      console.log("销毁前：" + document.getElementById("name").innerText);
    },
    destroyed(){
      console.log('destroyed: success') // destroyed: success
      // 在这之后点击页面 更新 按钮将无任何效果
      console.log("销毁后：" + document.getElementById("name").innerText);
    }
  });
</script>
</html>

VueRouter

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 —
官方定义

VueRouter 是 SPA（单页应用）的路径管理器，它允许我们通过不同的 URL 访问不同的内容。

npm install vue‐router

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>
      <!-- <a href="/5、vue路由器.html#/index">首页</a>
      <a href="#">商品</a> -->
      <router-link to="/index">首页</router-link>
      <router-link to="/product">商品</router-link>

      <router-view></router-view>

    </div>
  </div>
</body>

<script src="./node_modules/vue/dist/vue.js"></script>
<!-- 1.安装vue-router路由
     2.引入vue-router文件

     3.要根据不同url链接到不同的页面， 需要使用模板实现， 将模板绑定对应的路由地址
-->
<script src="./node_modules/vue-router/dist/vue-router.js"></script>




<script type="text/javascript">
  let Index = Vue.component("index", {
    template: `<div>Hello，欢迎使用来到易先生学院！</div>`
  });
  let Product = Vue.component("product", {
    template: `<ul><li>1. Iphone11</li><li>2. 小米11</li></ul>`
  });

  // 4.使用路由管理模板， 将url跟模板进行绑定

  const router = new VueRouter({
    routes: [{
        path: "/index",
        component: Index
      },
      {
        path: "/product",
        component: Product
      },
    ]
  })


  var vm = new Vue({
    el: '#app',
    router
  })
</script>

</html>

axios
官方：http://www.axios-js.com/zh-cn/docs/

Axios 是一个基于 promise 的 HTTP 库，可以用在html和 vue、nodejs 中。

特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

安装
使用 npm:

 $ npm install axios

使用 cdn:

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

执行 GET 请求

 // 上面的请求也可以这样做 
  axios.get('/user', {
      params: {
        ID: 12345
      }
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

执行 POST 请求

 axios.post('/user', {
      firstName: 'Fred',
      lastName: 'Flintstone'
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

执行多个并发请求

function getUserAccount() {
    return axios.get('/user/12345');
  }

  function getUserPermissions() {
    return axios.get('/user/12345/permissions');
  }

  axios.all([getUserAccount(), getUserPermissions()])

    .then(axios.spread(function (acct, perms) {
      // 两个请求现在都执行完成 
    }));

7.使用Vue脚手架进行模块化开发

1.安装vue-cli

npm install ‐g @vue/cli

安装初始化工具

拉取 2.x 模板 (旧版本) Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vuecli)
被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install ‐g @vue/cli‐init

创建项目

vue init webpack 项目名 
// 确认项目名 
// 输入项目描述 
// 作者 
// 让选择创建方式 默认 回车 
// 选择是否安装vue‐router y 
// 是否安装eslint n 
// unit test n 
// e2e test n 
// 选择NPM 
进行安装....

在vscode中打开
在这里插入图片描述
HelloWorld.vue

代码图意：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

亿先生@

@weixin_52112756

已为社区贡献1条内容