爱喝冬瓜汤的外星人

vue基础知识大全

知识清单

- - - 初识vue
    - vue基本模版
    - 数据单向传递
    - chrome调试工具
    - 数据双向绑定
    - vue数据绑定的过程
  - 常用指令
  - - v-once 让界面不要跟着数据变化, 只渲染一次
    - v-cloak 数据渲染之后自动显示元素
    - v-text 和 v-html对比
    - v-if
    - v-show以及与v-if的区别
    - v-for
    - v-for-key
    - v-bind 给元素的属性绑定数据
    - v-bind 绑定类名
    - v-bind 绑定样式
    - v-on
    - v-on 修饰符
    - v-on 注意点
    - v-on 按键修饰符
    - 自定义全局指令
    - 自定义指令参数
    - 自定义局部指令
    - 计算属性
    - 计算属性与函数的对比
    - 自定义全局过滤器
    - 自定义局部过滤器
    - 格式化时间的过滤器练习
    - 过渡动画
    - 自定义全局组件
    - 自定义局部组件
    - 组件中使用data的注意点（在自定义组件中使用data必须赋值一个函数, 然后通过函数的返回值来定义有哪些数据）
    - 组件中的data为什么是一个函数
    - 组件切换
    - 动态组件
    - 组件动画
    - 父子组件
    - 父子组件的数据传递
    - 父子组件的方法传递
    - 组件中的命名注意点
    - 数据和方法的多级传递
    - 匿名插槽
    - 具名插槽
    - v-slot指令
    - 作用域插槽
    - v-slot指令取代slot-scope
    - Vuex共享数据
    - 修改数据
    - Vuex里面的getters
    - Vue Router
    - VueRouter-参数传递
    - 嵌套路由
    - 命名视图
    - watch属性
    - 生命周期方法
    - ref属性
    - 组件的第二种渲染方式-render
    - Vue-CLI

初识vue

1.什么是Vue?
Vue.js 是一套构建用户界面的框架，它不仅易于上手，还可以与其它第三方库整合(Swiper、IScroll、…)。

2.框架和库的区别?
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重构整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
例如: 从jQuery 切换到 Zepto, 无缝切换
从IScroll切换到ScrollMagic, 只需要将用到IScroll的代码替换成ScrollMagic代码即可

3.为什么要学习框架?
提升开发效率：在企业中，时间就是效率，效率就是金钱；
前端提高开发效率的发展历程：原生JS -> jQuery之类的类库 -> 前端模板引擎 -> Vue / React / Angular

4.框架有很多, 为什么要先学Vue
Vue、Angular、React一起，被称之为前端三大主流框架！
但是Angular、React是老外编写的, 所以所有的资料都是英文的
而Vue是国人编写的, 所以所有的资料都是中文的, 并且Vue中整合了Angular、React中的众多优点
所以为了降低我们的学习难度, 我们先学Vue, 学完之后再学习Angular和React

5.使用Vue有哪些优势?
5.1Vue的核心概念之一:
通过数据驱动界面更新, 无需操作DOM来更新界面
使用Vue我们只需要关心如何获取数据, 如何处理数据, 如何编写业务逻辑代码,
我们只需要将处理好的数据交给Vue, Vue就会自动将数据渲染到模板中(界面上)
5.2Vue的核心概念之二:
组件化开发，我们可以将网页拆分成一个个独立的组件来编写
将来再通过封装好的组件拼接成一个完整的网页
https://cn.vuejs.org/images/components.png

vue基本模版



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-Vue基本模板title>
    
    <script src="js/vue.js">script>
head>
<body>
<div id="app">
    <p>{
    { name }}p>
div>
<script>
    // 2.创建一个Vue的实例对象
    let vue = new Vue({
      
        // 3.告诉Vue的实例对象, 将来需要控制界面上的哪个区域
        el: '#app',
        // 4.告诉Vue的实例对象, 被控制区域的数据是什么
        data: {
      
            name: "Andy"
        }
    });
script>
body>
html>

数据单向传递



<div id="app">
    <p>{
    { name }}p>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            name: "Andy"
        }
    });
script>

chrome调试工具

1.Vue调试工具安装
如果你能打开谷歌插件商店, 直接在线安装即可
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN

由于国内无法打开谷歌国外插件商店, 所以可以离线安装
https://www.chromefor.com/vue-js-devtools_v5-3-0/

2.安装步骤:
2.1下载离线安装包
2.2打开谷歌插件界面
2.3直接将插件拖入
2.4报错 程序包无效: "CRX_HEADER_INVALID"
   可以将安装包修改为rar后缀, 解压之后再安装
2.5重启浏览器

数据双向绑定

数据双向绑定
默认情况下Vue只支持数据单向传递 M -> VM -> V
但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力
在<input>、<textarea> 及 <select> 元素上可以用 v-model 指令创建双向数据绑定

注意点: v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
而总是将 Vue 实例的数据作为数据来源


<div id="app">
    <p>{
    { name }}p>
    <input type="text" v-model="msg">
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            name: "Andy",
            msg: "可可爱爱"
        }
    });
script>

vue数据绑定的过程

1.Vue数据绑定过程
1.1会先将未绑定数据的界面展示给用户
1.2然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML代码
1.3最后再将绑定数据之后的HTML渲染到界面上

常用指令

v-once 让界面不要跟着数据变化, 只渲染一次




<div id="app">
    <p v-once>原始数据: {
    { name }}p>
    <p>当前数据: {
    { name }}p>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            name: "Andy",
        }
    });
script>

v-cloak 数据渲染之后自动显示元素




<div id="app">
    <p v-cloak>{
    { name }}p>
div>

<script src="js/vue.js">script>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            name: "Andy ",
        }
    });
script>

v-text 和 v-html对比

1.什么是v-text指令
v-text就相当于过去学习的innerText

2.什么是v-html指令
v-html就相当于过去学习的innerHTML

<div id="app">
    
<p>++++{
    { name }}++++p>
    
<p>++++{
    { msg }}++++p>
    
<p v-text="name">++++++++p>
    
<p v-text="msg">++++++++p>
    
<p v-html="name">++++++++p>
    
<p v-html="msg">++++++++p>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            name: "Andy",
            msg: "我是span"
        }
    });
script>

v-if

1.什么是v-if指令
条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素

2.v-if特点:
如果条件不满足根本就不会创建这个元素(重点)

3.v-if注意点
v-if可以从模型中获取数据
v-if也可以直接赋值一个表达式

4.v-else指令
v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容

5.v-else注意点
v-else不能单独出现
v-if和v-else中间不能出现其它内容

6.v-else-if指令
v-else-if可以和v-if指令配合使用, 当v-if不满足条件时就依次执行后续v-else-if, 哪个满足就显示哪个

7.v-else-if注意点
和v-else一样



<div id="app">











    <p v-if="score >= 80">优秀p>
    <p v-else-if="score >= 60">良好p>
    <p v-else>差p>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            show: true,
            hidden: false,
            age: 17,
            score: 50
        }
    });
script>

v-show以及与v-if的区别

1.什么是v-show指令
v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示

2.v-if和v-show区别
v-if: 只要取值为false就不会创建元素
v-show: 哪怕取值为false也会创建元素, 只是如果取值是false会设置元素的display为none

3.v-if和v-show应用场景
由于取值为false时v-if不会创建元素, 所以如果需要切换元素的显示和隐藏, 每次v-if都会创建和删除元素
由于取值为false时v-show会创建元素并设置display为none, 所有如果需要切换元素的显示和隐藏,
不会反复创建和删除, 只是修改display的值
所以: 如果企业开发中需要频繁切换元素显示隐藏, 那么推荐使用v-show, 否则使用v-if


<div id="app">






    <p v-show="show">我是段落1p>
    <p v-show="hidden">我是段落2p>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            show: true,
            hidden: false,
            age: 18
        }
    });
script>

v-for




<div id="app">
    <ul>



        <li v-for="(value, key) in obj">{
    {key}}---{
    {value}}li>
    ul>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            list: ["张三", "李四", "王五", "赵六"],
            obj: {
      
                name: "lnj",
                age: 33,
                gender: "male",
                class: "web"
            }
        }
    });
script>

v-for-key

1.v-for注意点
1.1v-for为了提升性能, 在更新已渲染过的元素列表时，会采用“就地复用”策略。
也正是因为这个策略, 在某些时刻会导致我们的数据混乱
例如: 在列表前面新增了内容
1.2为了解决这个问题, 我们可以在渲染列表的时候给每一个元素加上一个独一无二的key
v-for在更新已经渲染过的元素列表时, 会先判断key是否相同, 如果相同则复用, 如果不同则重新创建

2.key属性注意点
不能使用index的作为key,因为当列表的内容新增或者删除时index都会发生变化


<div id="app">
    <form>
        <input type="text" v-model="name">
        <input type="submit" value="添加" @click.prevent="add">
    form>
    <ul>

        <li v-for="(person,index) in persons" :key="index">
            <input type="checkbox">
            <span>{
    {index}} --- {
    {person.name}}span>
        li>
    ul>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            persons: [
                {
      name: "zs", id: 1},
                {
      name: "ls", id: 2},
                {
      name: "ww", id: 3}
                ],
            name: ""
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            add(){
      
                let lastPerson = this.persons[this.persons.length - 1];
                let newPerson = {
      name: this.name, id: lastPerson.id + 1};
                // this.persons.push(newPerson);
                this.persons.unshift(newPerson);
                this.name = "";
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>

v-bind 给元素的属性绑定数据

1.什么是v-bind指令
在企业开发中想要给"元素"绑定数据, 我们可以使用{
    {}}, v-text, v-html
但是如果想给"元素的属性"绑定数据, 就必须使用v-bind
所以v-bind的作用是专门用于给"元素的属性"绑定数据的

2.v-bind格式
v-bind:属性名称="绑定的数据"
:属性名称="绑定的数据"

3.v-bind特点
赋值的数据可以是任意一个合法的JS表达式
例如: :属性名称="age + 1"


<div id="app">



    

    



    <input type="text" :value="age + 1">
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            name: "Andy",
            age: 18
        }
    });
script>

v-bind 绑定类名



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-常用指令-绑定类名title>
    <script src="js/vue.js">script>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .size{
      
            font-size: 100px;
        }
        .color{
      
            color: red;
        }
        .active{
      
            background: skyblue;
        }
    style>
head>
<body>

1.v-bind指令的作用
v-bind指令给"任意标签"的"任意属性"绑定数据
对于大部分的属性而言我们只需要直接赋值即可, 例如:value="name"
但是对于class和style属性而言, 它的格式比较特殊

2.通过v-bind绑定类名格式
:class="['需要绑定类名', ...]"

3.注意点:
3.1直接赋值一个类名(没有放到数组中)默认回去Model中查找
:class="需要绑定类名"
2.2数组中的类名没有用引号括起来也会去Model中查找
:class="[需要绑定类名]"
2.3数组的每一个元素都可以是一个三目运算符按需导入
:class="[flag?'active':'']"
2.4可以使用对象来替代数组中的三目运算符按需导入
:class="[{'active': true}]"
2.5绑定的类名太多可以将类名封装到Model中
obj: {
    'color': true,
    'size': true,
    'active': false,
}

4.绑定类名企业应用场景
从服务器动态获取样式后通过v-bind动态绑定类名
这样就可以让服务端来控制前端样式
常见场景: 618 双11等



<div id="app">

    

    

    

    

    

    
    <p :class="obj">我是段落p>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            flag: false,
            obj:{
      
                'size': false,
                'color': false,
                'active': true,
            }
        }
    });
script>
body>
html>

v-bind 绑定样式



1.如何通过v-bind给style属性绑定数据
1.1将数据放到对象中
:style="{color:'red','font-size':'50px'}"
1.2将数据放到Model对象中
obj: {
    color: 'red',
    'font-size': '80px',
}

2.注意点
2.1如果属性名称包含-, 那么必须用引号括起来
2.2如果需要绑定Model中的多个对象, 可以放到一个数组中赋值



<div id="app">

    

    

    


    
    <p :style="[obj1, obj2]">我是段落p>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            obj1:{
      
                "color": "blue",
                "font-size": "100px"
            },
            obj2: {
      
                "background-color": "red"
            }
        }
    });
script>

v-on


1.什么是v-on指令?
v-on指令专门用于给元素绑定监听事件

2.v-on指令格式
v-on:事件名称="回调函数名称"
@事件名称="回调函数名称"

3.v-on注意点:
v-on绑定的事件被触发之后, 会去Vue实例对象的methods中查找对应的回调函数
-->


<div id="app">

    

    

    <button @click="myFn">我是按钮button>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        methods: {
      
            myFn(){
      
                alert('lnj')
            }
        }
    });
script>

v-on 修饰符

1.v-on修饰符
在事件中有很多东西需要我们处理, 例如事件冒泡,事件捕获, 阻止默认行为等
那么在Vue中如何处理以上内容呢, 我们可以通过v-on修饰符来处理

2.常见修饰符
.once    - 只触发一次回调。
.prevent - 调用 event.preventDefault()。
.stop    - 调用 event.stopPropagation()。
.self    - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.capture - 添加事件侦听器时使用 capture 模式。



<div id="app">
    

    

    

    
    
    
    
    
    <div class="a" @click.capture="myFn1">
        <div class="b" @click.capture="myFn2">
            <div class="c" @click.capture="myFn3">div>
        div>
    div>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            myFn(){
      
                alert('lnj');
            },
            myFn1(){
      
                console.log("爷爷");
            },
            myFn2(){
      
                console.log("爸爸");
            },
            myFn3(){
      
                console.log("儿子");
            }
        }
    });
script>

v-on 注意点

1.v-on注意点
1.1绑定回调函数名称的时候, 后面可以写()也可以不写
v-on:click="myFn"
v-on:click="myFn()"

1.2可以给绑定的回调函数传递参数
v-on:click="myFn('lnj', 33)"

1.3如果在绑定的函数中需要用到data中的数据必须加上this


<div id="app">
    <button @click="myFn('lnj', 33, $event)">我是按钮button>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            gender: "man"
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            myFn(name, age, e){
      
                // alert('lnj');
                // console.log(name, age, e);
                console.log(this.gender);
            }
        }
    });
script>

v-on 按键修饰符


1.什么是按键修饰符
我们可以通过按键修饰符监听特定按键触发的事件
例如: 可以监听当前事件是否是回车触发的, 可以监听当前事件是否是ESC触发的等

2.按键修饰符分类
2.1系统预定义修饰符
2.2自定义修饰符


<div id="app">

    <input type="text" @keyup.f2="myFn">
div>
<script>
    Vue.config.keyCodes.f2 = 113;
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            myFn(){
      
                alert("lnj");
            }
        }
    });
script>

自定义全局指令

1.自定义全局指令
在Vue中除了可以使用Vue内置的一些指令以外, 我们还可以自定义指令

2.自定义全局指令语法
ue.directive(‘自定义指令名称’, {
生命周期名称: function (el) {
指令业务逻辑代码
}
});

3.指令生命周期方法
自定义指令时一定要明确指令的业务逻辑代码更适合在哪个阶段执行
例如: 指令业务逻辑代码中没有用到元素事件, 那么可以在bind阶段执行
例如: 指令业务逻辑代码中用到了元素事件, 那么就需要在inserted阶段执行

4.自定义指令注意点
使用时需要加上v-, 而在自定义时不需要加上v-


<div id="app">

    <input type="text" v-focus>
div>
<script>
    /*
    directive方法接收两个参数
    第一个参数: 指令的名称
    第二个参数: 对象
    注意点: 在自定义指令的时候, 在指定指令名称的时候, 不需要写v-
    注意点: 指令可以在不同的生命周期阶段执行
    bind: 指令被绑定到元素上的时候执行
    inserted: 绑定指令的元素被添加到父元素上的时候执行
    * */
    Vue.directive("color", {
      
        // 这里的el就是被绑定指令的那个元素
        bind: function (el) {
      
            el.style.color = "red";
        }
    });
    Vue.directive("focus", {
      
        // 这里的el就是被绑定指令的那个元素
        inserted: function (el) {
      
            el.focus();
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        }
    });
script>

自定义指令参数

1.自定义指令参数
在使用官方指令的时候我们可以给指令传参
例如: v-model=“name”
在我们自定义的指令中我们也可以传递传递

2.获取自定义指令传递的参数
在执行自定义指令对应的方法的时候, 除了会传递el给我们, 还会传递一个对象给我们
这个对象中就保存了指令传递过来的参数


<div id="app">

    <p v-color="curColor">我是段落p>
div>
<script>
    Vue.directive("color", {
      
        // 这里的el就是被绑定指令的那个元素
        bind: function (el, obj) {
      
            // el.style.color = "red";
            el.style.color = obj.value;
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            curColor: 'green'
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        }
    });
script>

自定义局部指令

1.自定义全局指令的特点
在任何一个Vue实例控制的区域中都可以使用

2.自定义局部指令的特点
只能在自定义的那个Vue实例中使用

3.如何自定义一个局部指令
给创建Vue实例时传递的对象添加

directives: {
    // key: 指令名称
    // value: 对象
    'color': {
        bind: function (el, obj) {
            el.style.color = obj.value;
        }
    }
}


<div id="app1">
    <p v-color="'blue'">我是段落p>
div>
<div id="app2">
    <p v-color="'red'">我是段落p>
div>
<script>
    /*
    Vue.directive("color", {
        // 这里的el就是被绑定指令的那个元素
        bind: function (el, obj) {
            el.style.color = obj.value;
        }
    });
     */
    // 这里就是MVVM中的View Model
    let vue1 = new Vue({
      
        el: '#app1',
        // 这里就是MVVM中的Model
        data: {
      },
        // 专门用于存储监听事件回调函数
        methods: {
      }
    });
    // 这里就是MVVM中的View Model
    let vue2 = new Vue({
      
        el: '#app2',
        // 这里就是MVVM中的Model
        data: {
      },
        // 专门用于存储监听事件回调函数
        methods: {
      },
        // 专门用于定义局部指令的
        directives: {
      
            "color": {
      
                // 这里的el就是被绑定指令的那个元素
                bind: function (el, obj) {
      
                    el.style.color = obj.value;
                }
            }
        }
    });
script>

计算属性

1.插值语法特点
可以在{ {}}中编写合法的JavaScript表达式

2.在插值语法中编写JavaScript表达式缺点
2.1没有代码提示
2.2语句过于复杂不利于我们维护

3.如何解决?
对于任何复杂逻辑，你都应当使用计算属性


<div id="app">
    <p>{
    {name}}p>
    <p>{
    {age + 1}}p>
    <p>{
    {msg.split("").reverse().join("")}}p>
   
    注意点:
    虽然在定义计算属性的时候是通过一个函数返回的数据
    但是在使用计算属性的时候不能在计算属性名称后面加上()
    因为它是一个属性不是一个函数(方法)
   
    <p>{
    {msg2}}p>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            name: "lnj",
            age: 18,
            msg: "abcdef"
        },
        // 专门用于存储监听事件回调函数
        methods: {
      },
        // 专门用于定义计算属性的
        computed: {
      
            msg2: function () {
      
                let res = "abcdef".split("").reverse().join("");
                return res;
            }
        }
    });
script>

计算属性与函数的对比

1.计算属性和函数
通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据
那么计算属性和函数有什么区别呢?
2.1函数"不会"将计算的结果缓存起来, 每一次访问都会重新求值
2.2计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就不会重新求值

2.计算属性应用场景
计算属性:比较适合用于计算不会频繁发生变化的的数据

自定义全局过滤器

1.什么是过滤器?
过滤器和函数和计算属性一样都是用来处理数据的
但是过滤器一般用于格式化插入的文本数据

2.如何自定义全局过滤器
Vue.filter(“过滤器名称”, 过滤器处理函数):

3.如何使用全局过滤器（只有这两种使用方式）
{ {msg | 过滤器名称}}
:value=“msg | 过滤器名称”

4.过滤器注意点
4.1只能在插值语法和v-bind中使用
4.2过滤器可以连续使用


<div id="app">
    
    <p>{
    {name | formartStr1 | formartStr2}}p>
div>
<script>
    /*
    如何自定义一个全局过滤器
    通过Vue.filter();
    filter方法接收两个参数
    第一个参数: 过滤器名称
    第二个参数: 处理数据的函数
    注意点: 默认情况下处理数据的函数接收一个参数, 就是当前要被处理的数据
    * */
    Vue.filter("formartStr1", function (value) {
      
        // console.log(value);
        value = value.replace(/学院/g, "大学");
        console.log(value);
        return value;
    });
    Vue.filter("formartStr2", function (value) {
      
        // console.log(value);
        value = value.replace(/大学/g, "幼儿园");
        console.log(value);
        return value;
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            name: "知播渔学院, 指趣学院, 前端学院, 区块链学院"
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>

自定义局部过滤器

1.自定义全局过滤器的特点
在任何一个Vue实例控制的区域中都可以使用

2.自定义局部过滤器的特点
只能在自定义的那个Vue实例中使用

3.如何自定义一个局部指令
给创建Vue实例时传递的对象添加

filters: {
    // key: 过滤器名称
    // value: 过滤器处理函数
    'formartStr': function (value) {}
}


<div id="app1">
    <p>{
    {name | formartStr}}p>
div>
<div id="app2">
    <p>{
    {name | formartStr}}p>
div>
<script>
    /*
    Vue.filter("formartStr", function (value) {
        // console.log(value);
        value = value.replace(/学院/g, "大学");
        // console.log(value);
        return value;
    });
    */
    // 这里就是MVVM中的View Model
    let vue1 = new Vue({
      
        el: '#app1',
        // 这里就是MVVM中的Model
        data: {
      
            name: "知播渔学院, 指趣学院, 前端学院, 区块链学院"
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
    // 这里就是MVVM中的View Model
    let vue2 = new Vue({
      
        el: '#app2',
        // 这里就是MVVM中的Model
        data: {
      
            name: "知播渔学院, 指趣学院, 前端学院, 区块链学院"
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部过滤器的
        filters: {
      
            "formartStr": function (value) {
      
                // console.log(value);
                value = value.replace(/学院/g, "大学");
                // console.log(value);
                return value;
            }
        }
    });
script>

格式化时间的过滤器练习



<div id="app">
    <p>{
    {time | dateFormart("yyyy-MM-dd")}}p>
div>
<script>
    /*
    注意点: 在使用过滤器的时候, 可以在过滤器名称后面加上()
            如果给过滤器的名称后面加上了(), 那么就可以给过滤器的函数传递参数
    * */
    Vue.filter("dateFormart", function (value, fmStr) {
      
        // console.log(fmStr);
        let date = new Date(value);
        let year = date.getFullYear();
        let month = date.getMonth() + 1 + "";
        let day = date.getDate() + "";
        let hour = date.getHours() + "";
        let minute = date.getMinutes() + "";
        let second = date.getSeconds() + "";
        if(fmStr && fmStr === "yyyy-MM-dd"){
      
            return `${
        year}-${
        month.padStart(2, "0")}-${
        day.padStart(2, "0")}`;
        }
        return `${
        year}-${
        month.padStart(2, "0")}-${
        day.padStart(2, "0")} ${
        hour.padStart(2, "0")}:${
        minute.padStart(2, "0")}:${
        second.padStart(2, "0")}`;
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            time: Date.now()
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>

过渡动画

1.如何给Vue控制的元素添加过渡动画
1.1将需要执行动画的元素放到transition组件中
1.2当transition组件中的元素显示时会自动查找.v-enter/.v-enter-active/.v-enter-to类名
当transition组件中的元素隐藏时会自动查找.v-leave/ .v-leave-active/.v-leave-to类名
1.3我们只需要在.v-enter和.v-leave-to中指定动画动画开始的状态
在.v-enter-active和.v-leave-active中指定动画执行的状态
即可完成过渡动画



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>29-Vue-过渡动画title>
    <script src="js/vue.js">script>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .box{
      
            width: 200px;
            height: 200px;
            background: red;
        }
        .one-enter{
      
            opacity: 0;
        }
        .one-enter-to{
      
            opacity: 1;
            margin-left: 500px;
        }
        .one-enter-active{
      
            transition: all 3s;
        }
        .two-enter{
      
            opacity: 0;
        }
        .two-enter-to{
      
            opacity: 1;
            margin-top: 500px;
        }
        .two-enter-active{
      
            transition: all 3s;
        }
    style>
head>
<body>

1.transition注意点:
transition中只能放一个元素, 多个元素无效
如果想给多个元素添加过渡动画, 那么就必须创建多个transition组件

2.初始动画设置
默认情况下第一次进入的时候没没有动画的
如果想一进来就有动画, 我们可以通过给transition添加appear属性的方式
告诉Vue第一次进入就需要显示动画

3.如何给多个不同的元素指定不同的动画
如果有多个不同的元素需要执行不同的过渡动画,那么我们可以通过给transition指定name的方式
来指定"进入之前/进入之后/进入过程中, 离开之前/离开之后/离开过程中"对应的类名
来实现不同的元素执行不同的过渡动画



<div id="app">
    <button @click="toggle">我是按钮button>
    <transition appear name="one">
        <div class="box" v-show="isShow">div>

    transition>
    <transition appear name="two">
        <div class="box" v-show="isShow">div>
    transition>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            isShow: true
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            toggle(){
      
                this.isShow = !this.isShow;
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

通过Vue提供的JS钩子来实现过渡动画



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>30-Vue-过渡动画title>
    <script src="js/vue.js">script>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .box{
      
            width: 200px;
            height: 200px;
            background: red;
        }
        .v-enter{
      
            opacity: 0;
        }
        .v-enter-to{
      
            opacity: 1;
            margin-left: 500px;
        }
        .v-enter-active{
      
            transition: all 3s;
        }
    style>
head>
<body>

1.当前过渡存在的问题
通过transition+类名的方式确实能够实现过渡效果
但是实现的过渡效果并不能保存动画之后的状态
因为Vue内部的实现是在过程中动态绑定类名, 过程完成之后删除类名
正式因为删除了类名, 所以不能保存最终的效果

2.在Vue中如何保存过渡最终的效果
通过Vue提供的JS钩子来实现过渡动画
v-on:before-enter="beforeEnter"  进入动画之前
v-on:enter="enter"  进入动画执行过程中
v-on:after-enter="afterEnter"  进入动画完成之后
v-on:enter-cancelled="enterCancelled"  进入动画被取消

v-on:before-leave="beforeLeave" 离开动画之前
v-on:leave="leave"  离开动画执行过程中
v-on:after-leave="afterLeave" 离开动画完成之后
v-on:leave-cancelled="leaveCancelled" 离开动画被取消

3.JS钩子实现过渡注意点
3.1在动画过程中必须写上el.offsetWidth或者el.offsetHeight
3.2在enter和leave方法中必须调用done方法, 否则after-enter和after-leave不会执行
3.3需要需要添加初始动画, 那么需要把done方法包裹到setTimeout方法中调用



<div id="app">
    <button @click="toggle">我是按钮button>
    
    <transition appear
                v-bind:css="false"
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter">
        <div class="box" v-show="isShow">div>
    transition>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            isShow: true
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            toggle(){
      
                this.isShow = !this.isShow;
            },
            beforeEnter(el){
      
                // 进入动画开始之前
                console.log("beforeEnter");
                el.style.opacity = "0";
            },
            enter(el, done){
      
                // 进入动画执行过程中
                console.log("enter");
                /*
                注意点: 如果是通过JS钩子来实现过渡动画
                        那么必须在动画执行过程中的回调函数中写上
                        el.offsetWidth / el.offsetHeight
                * */
                // el.offsetWidth;
                el.offsetHeight;
                el.style.transition = "all 3s";
                /*
                注意点: 动画执行完毕之后一定要调用done回调函数
                        否则后续的afterEnter钩子函数不会被执行
                * */
                // done();
                /*
                注意点: 如果想让元素一进来就有动画, 那么最好延迟以下再调用done方法
                * */
                setTimeout(function () {
      
                    done();
                }, 0);
            },
            afterEnter(el){
      
                // 进入动画执行完毕之后
                console.log("afterEnter");
                el.style.opacity = "1";
                el.style.marginLeft = "500px";
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

配合Velocity实现过渡动画



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>31-Vue-过渡动画title>
    <script src="js/vue.js">script>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .box{
      
            width: 200px;
            height: 200px;
            background: red;
        }
    style>
head>
<body>

1.配合Velocity实现过渡动画
在Vue中我们除了可以自己实现过渡动画以外, 还可以结合第三方框架实现过渡动画

1.1导入Velocity库
1.2在动画执行过程钩子函数中编写Velocity动画


<div id="app">
    <button @click="toggle">我是按钮button>
    <transition appear
                v-bind:css="false"
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter">
        <div class="box" v-show="isShow">div>
    transition>
div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js">script>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            isShow: true
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            toggle(){
      
                this.isShow = !this.isShow;
            },
            beforeEnter(el){
      
            },
            enter(el, done){
      
                Velocity(el, {
      opacity: 1, marginLeft: "500px"}, 3000);
                done();
            },
            afterEnter(el){
      

            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

自定义类名动画



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>32-Vue-过渡动画title>
    <script src="js/vue.js">script>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .box{
      
            width: 200px;
            height: 200px;
            background: red;
        }
        .a{
      
            opacity: 0;
        }
        .b{
      
            opacity: 1;
            margin-left: 500px;
        }
        .c{
      
            transition: all 3s;
        }
    style>
head>
<body>
1.自定义类名动画
在Vue中除了可以使用 默认类名(v-xxx)来指定过渡动画
       除了可以使用 自定义类名前缀(yyy-xx)来指定过渡动画(transition name="yyy")
       除了可以使用 JS钩子函数来指定过渡动画以外
还可以使用自定义类名的方式来指定过渡动画

enter-class  // 进入动画开始之前
enter-active-class // 进入动画执行过程中
enter-to-class // 进入动画执行完毕之后
leave-class  // 离开动画开始之前
leave-active-class // 离开动画执行过程中
leave-to-class // 离开动画执行完毕之后


<div id="app">
    <button @click="toggle">我是按钮button>
    <transition appear
                enter-class="a"
                enter-active-class="c"
                enter-to-class="b">
        <div class="box" v-show="isShow">div>
    transition>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            isShow: true
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            toggle(){
      
                this.isShow = !this.isShow;
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

配合Animate.css实现过渡动画



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>33-Vue-过渡动画title>
    <script src="js/vue.js">script>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .box{
      
            width: 200px;
            height: 200px;
            background: red;
        }
    style>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
head>
<body>



<div id="app">
    <button @click="toggle">我是按钮button>
    <transition appear
                enter-class=""
                enter-active-class="animated bounceInRight"
                enter-to-class="">
        <div class="box" v-show="isShow">div>
    transition>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            isShow: true
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            toggle(){
      
                this.isShow = !this.isShow;
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

同时给多个元素添加动画



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>35-Vue-过渡动画title>
    <script src="js/vue.js">script>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .v-enter{
      
            opacity: 0;
        }
        .v-enter-to{
      
            opacity: 1;
        }
        .v-enter-active{
      
            transition: all 3s;
        }
        .v-leave{
      
            opacity: 1;
        }
        .v-leave-to{
      
            opacity: 0;
        }
        .v-leave-active{
      
            transition: all 3s;
        }
    style>
head>
<body>


<div id="app">
    <form>
        <input type="text" v-model="name">
        <input type="submit" value="添加" @click.prevent="add">
    form>
    <ul>
        <transition-group appear>
        <li v-for="(person,index) in persons" :key="person.id" @click="del(index)">
            <input type="checkbox">
            <span>{
    {index}} --- {
    {person.name}}span>
        li>
        transition-group>
    ul>
div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            persons: [
                {
      name: "zs", id: 1},
                {
      name: "ls", id: 2},
                {
      name: "ww", id: 3}
                ],
            name: ""
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            add(){
      
                let lastPerson = this.persons[this.persons.length - 1];
                let newPerson = {
      name: this.name, id: lastPerson.id + 1};
                // this.persons.push(newPerson);
                this.persons.unshift(newPerson);
                this.name = "";
            },
            del(index){
      
                this.persons.splice(index, 1);
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

transition-group注意点以及动画混乱的原因



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>36-Vue-过渡动画title>
    <script src="js/vue.js">script>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .v-enter{
      
            opacity: 0;
        }
        .v-enter-to{
      
            opacity: 1;
        }
        .v-enter-active{
      
            transition: all 3s;
        }
        .v-leave{
      
            opacity: 1;
        }
        .v-leave-to{
      
            opacity: 0;
        }
        .v-leave-active{
      
            transition: all 3s;
        }
    style>
head>
<body>


<div id="app">
    <form>
        <input type="text" v-model="name">
        <input type="submit" value="添加" @click.prevent="add">
    form>

        <transition-group appear tag="ul">
        <li v-for="(person,index) in persons" :key="person.id" @click="del(index)">
            <input type="checkbox">
            <span>{
    {index}} --- {
    {person.name}}span>
        li>
        transition-group>

div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            persons: [
                {
      name: "zs", id: 1},
                {
      name: "ls", id: 2},
                {
      name: "ww", id: 3}
                ],
            name: "",
            id: 3
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            add(){
      
                this.id++;
                // let lastPerson = this.persons[this.persons.length - 1];
                let newPerson = {
      name: this.name, id: this.id};
                // this.persons.push(newPerson);
                this.persons.unshift(newPerson);
                this.name = "";
            },
            del(index){
      
                this.persons.splice(index, 1);
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

自定义全局组件



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>37-Vue组件-自定义全局组件title>
    <script src="js/vue.js">script>
head>
<body>

Vue两大核心: 1.数据驱动界面改变 2.组件化
1.什么是组件? 什么是组件化?
1.1在前端开发中组件就是把一个很大的界面拆分为多个小的界面, 每一个小的界面就是一个组件
1.2将大界面拆分成小界面就是组件化

2.组件化的好处
2.1可以简化Vue实例的代码
2.2可以提高复用性

3.Vue中如何创建组件?
3.1创建组件构造器
3.2注册已经创建好的组件
3.3使用注册好的组件


<div id="app">
    
    <abc>abc>
div>
<script>
    // 3.1创建组件构造器
    let Profile = Vue.extend({
      
        // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
        template: `
           
                
                我是描述信息
            
        `
    });
    // 3.2注册已经创建好的组件
    // 第一个参数: 指定注册的组件的名称
    // 第二个参数: 传入已经创建好的组件构造器
    Vue.component("abc", Profile );

    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

创建组件的其他方式



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>38-Vue组件-自定义全局组件title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">
    
    <abc>abc>
div>

<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        <p>我是描述信息p>
    div>
template>
<script>
    // 3.1创建组件构造器
    /*
    let Profile = Vue.extend({
        // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
        template: `
           
                
                我是描述信息
            
        `
    });
     */
    /*
    let obj = {
        // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
        template: `
           
                
                我是描述信息
            
        `
    };
     */
    // 3.2注册已经创建好的组件
    // 第一个参数: 指定注册的组件的名称
    // 第二个参数: 传入已经创建好的组件构造器
    // Vue.component("abc", Profile );
    // Vue.component("abc", obj );
    /*
    Vue.component("abc", {
        // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
        template: `
           
                
                我是描述信息
            
        `
    });
     */
    Vue.component("abc", {
      
        // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
        template: "#info"
    });

    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

自定义局部组件



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>39-Vue组件-自定义局部组件title>
    <script src="js/vue.js">script>
head>
<body>

1.自定义全局组件特点
在任何一个Vue实例控制的区域中都可以使用

2.自定义局部组件特点
只能在自定义的那个Vue实例控制的区域中可以使用

3.如何自定义一个局部组件
在vue实例中新增components: {}
在{}中通过key/vue形式注册组件
components:{
   abc: {}
}


<div id="app1">
    <abc>abc>
div>
<div id="app2">
    <abc>abc>
div>
<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        <p>我是描述信息p>
    div>
template>
<script>
    /*
    // 自定义全局组件
    Vue.component("abc", {
        // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
        template: "#info"
    });
     */
    // 这里就是MVVM中的View Model
    let vue1 = new Vue({
      
        el: '#app1',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
    // 这里就是MVVM中的View Model
    let vue2 = new Vue({
      
        el: '#app2',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
            "abc": {
      
                // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
                template: "#info"
            }
        }
    });
script>
body>
html>

组件中使用data的注意点（在自定义组件中使用data必须赋值一个函数, 然后通过函数的返回值来定义有哪些数据）



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40-Vue组件-组件中的data和methodstitle>
    <script src="js/vue.js">script>
head>
<body>

1.自定义组件中的data和methods
Vue实例控制的区域相当于一个大的组件, 在大组件中我们可以使用data和methods
而我们自定义的组件也是一个组件, 所以在自定义的组件中也能使用data和methods

2.自定义组件中data注意点
在自定义组件中不能像在vue实例中一样直接使用data
而是必须通过返回函数的方式来使用data


<div id="app">
    
    <button @click="appFn">我是按钮button>
    
    <p>{
    {appMsg}}p>
    <abc>abc>
div>
<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        
        <button @click="abcFn">我是按钮button>
        <p>{
    {abcMsg}}p>
    div>
template>
<script>
    // 自定义全局组件
    Vue.component("abc", {
      
        // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
        template: "#info",
        methods: {
      
            abcFn(){
      
                alert("abcFn");
            }
        },
        // data: {
      
        //     abcMsg: "学院"
        // }
        // 注意点: 虽然在自定义的组件中也可以使用data, 但是在使用的时候, 使用的方式和Vue实例中不太一样
        在自定义组件中使用data必须赋值一个函数, 然后通过函数的返回值来定义有哪些数据
        data: function () {
      
            return {
      
                abcMsg: "学院"
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            appMsg:"知播渔"
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            appFn(){
      
                alert("appFn");
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

组件中的data为什么是一个函数

自定义组件中的datadata为什么是一个函数?
因为自定义组件可以复用, 为了保证复用时每个组件的数据都是独立的, 所以必须是一个函数



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>41-Vue组件-组件中的data为什么是一个函数title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">
    <abc>abc>
    <abc>abc>
    <abc>abc>
div>
<template id="info">
    <div>
        <button @click="add">累加button>
        <p>{
    {number}}p>
    div>
template>
<script>
    // 自定义全局组件
    Vue.component("abc", {
      
        template: "#info",
        /*
        组件中的data如果不是通过函数返回的, 那么多个组件就会公用一份数据, 就会导致数据混乱
        如果组件中的data是通过函数返回的, 那么每创建一个新的组件, 都会调用一次这个方法
        将这个方法返回的数据和当前创建的组件绑定在一起, 这样就有效的避免了数据混乱
        * */
        data: function () {
      
            return {
      
                number: 0
            }
        },
        methods: {
      
            add(){
      
                this.number++;
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

组件切换

组件切换
对于普通的元素我们可以通过v-if来实现切换
对于组件我们也可以通过v-if来实现切换
因为组件的本质就是一个自定义元素

动态组件



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>43-Vue组件-动态组件title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">
    <button @click="toggle">切换button>
    
    
    <keep-alive>
        <component v-bind:is="name">component>
    keep-alive>

div>
<template id="home">
    <div>
        <p>我是首页p>
        <input type="checkbox">
    div>
template>
<template id="photo">
    <div>
        <img src="images/fm.jpg" alt="">
    div>
template>
<script>
    // 自定义全局组件
    Vue.component("home", {
      
        template: "#home",
    });
    Vue.component("photo", {
      
        template: "#photo",
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
            isShow: true,
            name: "home"
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            toggle(){
      
                this.isShow = !this.isShow;
                this.name = this.name === "home" ? "photo" : "home";
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        }
    });
script>
body>
html>

组件动画

1.如何给组件添加动画?
给组件添加动画和过去给元素添加动画一样
如果是单个组件就使用transition
如果是多个组件就使用transition-group

2.过渡动画注意点
默认情况下进入动画和离开动画是同时执行的, 如果想一个做完之后再做另一个, 需要指定动画模式

父子组件

1.什么是父子组件?
在一个组件中又定义了其它组件就是父子组件
其实局部组件就是最简单的父子组件, 因为我们说过可以把Vue实例看做是一个大组件
我们在Vue实例中定义了局部组件, 就相当于在大组件里面定义了小组件, 所以实局部组件就是最简单的父子组件

2.如何定义其它的父子组件
前面我们说过, 自定义组件中可以使用data, 可以使用methods. 当然自定义组件中也可以使用components
所以我们也可以在自定义组件中再定义其它组件

父子组件的数据传递

1.父子组件数据传递?
在Vue中子组件是不能访问父组件的数据的,
如果子组件想要访问父组件的数据, 必须通过父组件传递

2.如何传递数据
2.1在父组件中通过v-bind传递数据
传递格式 v-bind:自定义接收名称 = “要传递数据”
2.2在子组件中通过props接收数据
接收格式 props: [“自定义接收名称”]

父子组件的方法传递

1.父子组件方法传递?
在Vue中子组件是不能访问父组件的方法的,
如果子组件想要访问父组件的方法, 必须通过父组件传递

2.如何传递方法
2.1在父组件中通过v-on传递方法
传递格式 v-on:自定义接收名称 = “要传递方法”
2.2在子组件中自定义一个方法
2.3在自定义方法中通过 this.$emit(‘自定义接收名称’);触发传递过来的方法

注意点: 和传递数据不同, 如果传递的是方法, 那么在子组件中不需要接收
如果传递的是方法, 那么需要在子组件中自定义一个方法
如果传递的是方法, 那么在子组件中直接使用自定义的方法即可
如果传递的是方法, 那么需要在子组件自定义的方法中通过
this.$emit(“自定义接收的名称”)的方法来触发父组件传递过来的方法



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>49-Vue组件-子组件传递数据给父组件title>
    <script src="js/vue.js">script>
head>
<body>

1.如何将子组件数据传递给父组件
既然我们可以将父组件的方法传递给子组件
既然我们可以在子组件中调用父组件中的方法,
那么我们就可以在调用方法的时候给方法传递参数
传递的参数, 就是我们需要传递的数据


<div id="app">
    <father>father>
div>
<template id="father">
    <div>
        <button @click="say">我是按钮button>
        
        <son @parentsay="say">son>
    div>
template>
<template id="son">
    <div>
        <button @click="sonFn">我是按钮button>
    div>
template>
<script>
    // 父组件
    Vue.component("father", {
      
        template: "#father",
        methods: {
      
            say(data){
      
                // alert("www.it666.com");
                console.log(data);
            }
        },
        // 子组件
        components: {
      
            "son": {
      
                template: "#son",
                methods: {
      
                    sonFn(){
      
                        // 第一个参数: 需要调用的函数名称
                        // 后续的参数: 给调用的函数传递的参数
                        this.$emit("parentsay", "知播渔");
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

组件中的命名注意点

1.组件中的命名注意点
1.1注册组件的时候使用了"驼峰命名", 那么在使用时需要转换成"短横线分隔命名"
例如: 注册时: myFather -> 使用时: my-father
1.2在传递参数的时候如果想使用"驼峰名称", 那么就必须写"短横线分隔命名"
例如: 传递时: parent-name=“name” -> 接收时: props: [“parentName”]
1.3在传递方法的时候不能使用"驼峰命名", 只能用"短横线分隔命名"
@parent-say=“say” -> this.$emit(“parent-say”);

数据和方法的多级传递

1.数据和方法的多级传递
在Vue中如果儿子想使用爷爷的数据, 必须一层一层往下传递
在Vue中如果儿子想使用爷爷的方法, 必须一层一层往下传递



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>51-Vue组件-数据和方法的多级传递title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">
    <grandfather>grandfather>
div>
<template id="grandfather">
    <div>
        <p>{
    {name}}p>
        <button @click="say">我是按钮button>
        <father :gfname="name" @gfsay="say">father>
    div>
template>
<template id="father">
    <div>
        <p>{
    {gfname}}p>
        <button @click="fatherFn">我是按钮button>
        <son :fname="gfname" @fsay="fatherFn">son>
    div>
template>
<template id="son">
    <div>
        <p>{
    {fname}}p>
        <button @click="sonFn">我是按钮button>
    div>
template>
<script>
    // 爷爷组件
    Vue.component("grandfather", {
      
        template: "#grandfather",
        data: function(){
      
            return {
      
                name: "lnj"
            }
        },
        methods: {
      
            say(){
      
                console.log("我是爷爷的方法");
            }
        },
        // 爸爸组件
        components: {
      
            "father": {
      
                template: "#father",
                props: ["gfname"],
                methods:{
      
                    fatherFn(){
      
                        this.$emit("gfsay");
                    }
                },
                // 儿子组件
                components: {
      
                    "son": {
      
                        template: "#son",
                        props: ["fname"],
                        methods: {
      
                            sonFn(){
      
                                this.$emit("fsay");
                            }
                        },
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

匿名插槽

1.什么是插槽?
默认情况下使用子组件时在子组件中编写的元素是不会被渲染的
如果子组件中有部分内容是使用时才确定的, 那么我们就可以使用插槽
插槽就是在子组件中放一个"坑", 以后由父组件来"填"

1.什么是匿名插槽
没有名字的插槽, 会利用使用时指定的能容替换整个插槽
注意点: 如果有多个匿名插槽, 每一个匿名插槽都会被指定的内容替换
虽然写多个匿名插槽不会报错, 但是在企业开发中推荐只能有一个匿名插槽



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>52-Vue组件-匿名插槽title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">
    <father>father>
div>
<template id="father">
    <div>
        
        <son>
            
            <div>我是追加的内容1div>
            <div>我是追加的内容2div>
            <div>我是追加的内容3div>
        son>
    div>
template>
<template id="son">
    <div>
        <div>我是头部div>
        
        
        
        
        <slot>我是默认数据slot>

        <div>我是底部div>
    div>
template>
<script>
    // 父组件
    Vue.component("father", {
      
        template: "#father",
        // 子组件
        components: {
      
            "son": {
      
                template: "#son",
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

具名插槽

1.什么是具名插槽
默认情况下有多少个匿名插槽, 我们填充的数据就会被拷贝多少份
这导致了所有插槽中填充的内容都是一样的
那么如果我们想给不同的插槽中填充不同的内容怎么办呢?
这个时候就可以使用具名插槽

2.具名插槽使用
通过插槽的name属性给插槽指定名称
在使用时可以通过slot="name"方式, 指定当前内容用于替换哪一个插槽

注意点: 如果没有指定要替换哪个插槽中的内容, 则不会被替换



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-Vue组件-具名插槽title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">
    <father>father>
div>
<template id="father">
    <div>
        <son>
            
            <div slot="one">我是追加的内容1div>
            <div slot="one">我是追加的内容11div>
            <div slot="two">我是追加的内容2div>
            <div slot="two">我是追加的内容22div>
        son>
    div>
template>
<template id="son">
    <div>
        <div>我是头部div>
        
        
        <slot name="one">我是默认内容slot>
        <slot name="two">我是默认内容slot>
        <div>我是底部div>
    div>
template>
<script>
    // 父组件
    Vue.component("father", {
      
        template: "#father",
        // 子组件
        components: {
      
            "son": {
      
                template: "#son",
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

v-slot指令

1.什么是v-slot指令?
v-slot指令是Vue2.6中用于替代slot属性的一个指令
在Vue2.6之前, 我们通过slot属性告诉Vue当前内容填充到哪一个具名插槽
从Vue2.6开始, 我们通过v-slot指令告诉Vue当前内容填充到哪一个具名插槽

注意点: v-slot指令只能用在template标签上
可以使用#号替代v-slot:



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>54-Vue组件-v-slot指令title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">
    <father>father>
div>
<template id="father">
    <div>
        <son>
            
            
            
            
            <template #one>
                <div>我是追加的内容1div>
                <div>我是追加的内容11div>
            template>
            <template #two>
                <div>我是追加的内容2div>
                <div>我是追加的内容22div>
            template>
        son>
    div>
template>
<template id="son">
    <div>
        <div>我是头部div>
        <slot name="one">我是one默认内容slot>
        <slot name="two">我是two默认内容slot>
        <div>我是底部div>
    div>
template>
<script>
    // 父组件
    Vue.component("father", {
      
        template: "#father",
        // 子组件
        components: {
      
            "son": {
      
                template: "#son",
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

作用域插槽

1.什么是作用域插槽
作用域插槽就是带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据

2.如何使用作用域插槽
2.1在slot中通过 v-bind:数据名称=“数据名称” 方式暴露数据
2.2在父组件中通过接收数据
2.3在父组件的中通过作用域名称.数据名称方式使用数据



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>55-Vue组件-作用域插槽title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">
    <father>father>
div>
<template id="father">
    <div>
        <son>

            
            
            <template slot-scope="abc">

                <li v-for="(name, index) in abc.names">{
    {name}}li>
            template>
        son>
    div>
template>
<template id="son">
    <div>
        <div>我是头部 {
    {names}}div>
        
        <slot v-bind:names="names">我是默认内容 {
    {names}}slot>
        <div>我是底部div>
    div>
template>
<script>
    // 父组件
    Vue.component("father", {
      
        template: "#father",
        // 子组件
        components: {
      
            "son": {
      
                template: "#son",
                data:function () {
      
                    return {
      
                        names: ["zs", "ls", "ww", "zl"]
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

v-slot指令取代slot-scope

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
它取代了 slot 和 slot-scope

也就是说我们除了可以通过v-slot指令告诉Vue内容要填充到哪一个具名插槽中
还可以通过v-slot指令告诉Vue如何接收作用域插槽暴露的数据

v-slot:插槽名称=“作用域名称”



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>56-Vue组件-v-slot指令title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">
    <father>father>
div>
<template id="father">
    <div>
        <son>
            
            
            
            <template #one="abc">
                <li v-for="(name, index) in abc.names">{
    {name}}li>
            template>
        son>
    div>
template>
<template id="son">
    <div>
        <div>我是头部 {
    {names}}div>

        <slot name="one" v-bind:names="names">我是默认内容 {
    {names}}slot>
        <div>我是底部div>
    div>
template>
<script>
    // 父组件
    Vue.component("father", {
      
        template: "#father",
        // 子组件
        components: {
      
            "son": {
      
                template: "#son",
                data:function () {
      
                    return {
      
                        names: ["zs", "ls", "ww", "zl"]
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

Vuex共享数据

1.什么是Vuex?
vuex 是 Vue 配套的公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，
方便整个程序中的任何组件直接获取或修改我们的公共数据

注意点:
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上

1.当前在企业开发中我们遇到了两个问题:
1.如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递(非常麻烦)
2.兄弟组件之间不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件(非常麻烦)
解决方案: 使用Vuex

2.什么是Vuex?
vuex 是 Vue 配套的公共数据管理工具，我们可以将共享的数据保存到 vuex 中，
方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据

注意点:
必须在引入Vue之后再引入Vuex
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>58-Vuex-共享数据title>
    <script src="js/vue.js">script>
    
    
    <script src="js/vuex.js">script>
head>
<body>


<div id="app">
    <grandfather>grandfather>
div>
<template id="grandfather">
    <div>
        <p>{
    {this.$store.state.msg}}p>
        <father>father>
    div>
template>
<template id="father">
    <div>
        
        <p>{
    {this.$store.state.msg}}p>
        <son>son>
    div>
template>
<template id="son">
    <div>
        <p>{
    {this.$store.state.msg}}p>
    div>
template>

<script>
    // 2.创建Vuex对象
    const store = new Vuex.Store({
      
        // 这里的state就相当于组件中的data, 就是专门用于保存共享数据的
        state: {
      
            msg: "知播渔"
        },
    });
    // 爷爷组件
    Vue.component("grandfather", {
      
        template: "#grandfather",
        // 3.在祖先组件中添加store的key保存Vuex对象
        // 只要祖先组件中保存了Vuex对象 , 那么祖先组件和所有的后代组件就可以使用Vuex中保存的共享数据了
        store: store,
        // 爸爸组件
        components: {
      
            "father": {
      
                template: "#father",
                // 儿子组件
                components: {
      
                    "son": {
      
                        template: "#son",
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        },
    });
script>
body>
html>

修改数据


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>59-Vuex-修改共享数据title>
    <script src="js/vue.js">script>
    <script src="js/vuex.js">script>
head>
<body>

1.当前在企业开发中我们遇到了两个问题:
1.如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递(非常麻烦)
2.兄弟组件之间不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件(非常麻烦)
解决方案: 使用Vuex

2.什么是Vuex?
vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，
方便整个程序中的任何组件直接获取或修改我们的公共数据

注意点:
必须在引入Vue之后再引入Vuex
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上


<div id="app">
    <father>father>
div>
<template id="father">
    <div>
        <son1>son1>
        <son2>son2>
    div>
template>
<template id="son1">
    <div>
        
        <button @click="add">增加button>
        <button @click="sub">减少button>
        <input type="text" :value="this.$store.state.count">
    div>
template>
<template id="son2">
    <div>

        <button @click="add">增加button>
        <button @click="sub">减少button>
        <input type="text" :value="this.$store.state.count">
    div>
template>

<script>
    const store = new Vuex.Store({
      
        // state: 用于保存共享数据
        state: {
      
            count: 0
        },
         mutations: 用于保存修改共享数据的方法
        mutations: {
      
            // 注意点: 在执行mutations中定义的方法的时候, 系统会自动给这些方法传递一个state参数
            //         state中就保存了共享的数据
            mAdd(state){
      
                state.count = state.count + 1;
            },
            mSub(state){
      
                state.count = state.count - 1;
            }
        }
    });
    // 爸爸组件
    Vue.component("father", {
      
        template: "#father",
        store: store,
        // 儿子组件
        components: {
      
            "son1": {
      
                template: "#son1",
                methods: {
      
                    add(){
      
                        // 注意点: 在Vuex中不推荐直接修改共享数据
                        // this.$store.state.count = this.$store.state.count + 1;
                        this.$store.commit("mAdd");
                    },
                    sub(){
      
                        // this.$store.state.count = this.$store.state.count - 1;
                        this.$store.commit("mSub");
                    }
                }
            },
            "son2": {
      
                template: "#son2",
                methods: {
      
                    add(){
      
                        // 注意点: 在Vuex中不推荐直接修改共享数据
                        // 如果多个组件都修改了共享的数据, 那么后期数据发生了错误, 我们如果需要去调试错误
                        // 就需要把每一个修改了共享数据的组件都检查一遍, 这样非常低效, 非常的不利于我们去维护
                        // this.$store.state.count = this.$store.state.count + 1;
                        this.$store.commit("mAdd");
                    },
                    sub(){
      
                        // this.$store.state.count = this.$store.state.count - 1;
                        this.$store.commit("mSub");
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

Vuex里面的getters

1.什么是Vuex的getters?
Vuex的getters属性就和组件的计算属性一样, 会将数据缓存起来, 只有数据发生变化才会重新计算


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>60-Vuex-getterstitle>
    <script src="js/vue.js">script>
    <script src="js/vuex.js">script>
head>
<body>


<div id="app">
    <father>father>
div>
<template id="father">
    <div>






        {
    {this.$store.getters.formart}}
        {
    {this.$store.getters.formart}}
        {
    {this.$store.getters.formart}}
    div>
template>

<script>
    const store = new Vuex.Store({
      
        // state: 用于保存共享数据
        state: {
      
            msg: "知播渔"
        },
        // mutations: 用于保存修改共享数据的方法
        mutations: {
      
        },
        getters: {
      
            formart(state){
      
                console.log("getters方法被执行了");
                return state.msg + "www.it666.com"
            }
        }
    });
    // 爸爸组件
    Vue.component("father", {
      
        template: "#father",
        store: store,
        // data: function () {
      
        //     return {
      
        //         msg: "知播渔"
        //     }
        // },
        // computed: {
      
        //     formart(){
      
        //         console.log("计算属性的方法被执行了");
        //         return this.msg + "www.it666.com";
        //     }
        // }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

Vue Router

1.什么是Vue Router?
Vue Router和v-if/v-show一样, 是用来切换组件的显示的
v-if/v-show是标记来切换(true/false)
Vue Router用哈希来切换(#/xxx)
比v-if/v-show强大的是Vue Router不仅仅能够切换组件的显示, 还能够在切换的时候传递参数

2.Vue Router使用
2.1导入Vue Router
2.2定义路由规则
2.3根据路由规则创建路由对象
2.4将路径对象挂载到Vue实例中
2.5修改URL哈希值
2.6通过渲染匹配的组件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>62-VueRouter-基本使用title>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .onepage, .twopage{
      
            width: 500px;
            height: 500px;
        }
        .onepage{
      
            background: pink;
        }
        .twopage{
      
            background: skyblue;
        }
        /*.router-link-active{*/
        /*    background: red;*/
        /*}*/
        .nj-active{
      
            background: skyblue;
        }
    style>
    <script src="js/vue.js">script>
    
    
    <script src="js/vue-router.js">script>
head>
<body>


<div id="app">
   
    
    
    <router-link to="/one" tag="button">切换到第一个界面router-link>
    <router-link to="/two" tag="button">切换到第二个界面router-link>
    
    
    <router-view>router-view>
div>
<template id="one">
    <div class="onepage">
        <p>我是第一个界面p>
    div>
template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面p>
    div>
template>
<script>

    // 1.定义组件
    const one = {
      
        template: "#one"
    };
    const two = {
      
        template: "#two"
    };
    // 2.定义切换的规则(定义路由规则)
    const routes = [
        // 重定向路由
        {
       path: '/', redirect: '/two' },
        // 数组中的每一个对象就是一条规则
        {
       path: '/one', component: one },
        {
       path: '/two', component: two }
    ];
    // 3.根据自定义的切换规则创建路由对象
    const router = new VueRouter({
      
        routes: routes,
        // 指定导航激活状态样式类名
        linkActiveClass: "nj-active"
    });

    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 4.将创建好的路由对象绑定到Vue实例上
        router: router,
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
            one: one,
            two: two
        }
    });
script>
body>
html>

VueRouter-参数传递

1.Vue Router传递参数
只要将Vue Router挂载到了Vue实例对象上, 我们就可以通过vue.$route拿到路由对象
只要能拿到路由对象, 就可以通过路由对象拿到传递的参数

方式一: 通过URL参数参数(?key=value&key=value), 通过this. $r o u t e . q u e r y 获取方式二 : 通过占位符传递 (路由规则中 / : k e y / : k e y, 路径中 / v a l u e / v a l u e), 通过 t h i s .$ route.params获取


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>63-VueRouter-参数传递title>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .onepage, .twopage{
      
            width: 500px;
            height: 500px;
        }
        .onepage{
      
            background: pink;
        }
        .twopage{
      
            background: skyblue;
        }
        /*.router-link-active{*/
        /*    background: red;*/
        /*}*/
        .nj-active{
      
            background: skyblue;
        }
    style>
    <script src="js/vue.js">script>
    
    <script src="js/vue-router.js">script>
head>
<body>


<div id="app">
    
    <router-link to="/one?name=lnj&age=33" tag="button">切换到第一个界面router-link>
    
    <router-link to="/two/zs/66" tag="button">切换到第二个界面router-link>
    
    
    <router-view>router-view>
div>
<template id="one">
    <div class="onepage">
        <p>我是第一个界面p>
    div>
template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面p>
    div>
template>
<script>
    // 1.定义组件
    const one = {
      
        template: "#one",
        created: function () {
      
            console.log(this.$route);
            console.log(this.$route.query.name);
            console.log(this.$route.query.age);
        }
    };
    const two = {
      
        template: "#two",
        created: function () {
      
            console.log(this.$route);
            console.log(this.$route.params.name);
            console.log(this.$route.params.age);
        }
    };
    // 2.定义切换的规则(定义路由规则)
    const routes = [
        // 数组中的每一个对象就是一条规则
        {
       path: '/one', component: one },
        {
       path: '/two/:name/:age', component: two }
    ];
    // 3.根据自定义的切换规则创建路由对象
    const router = new VueRouter({
      
        routes: routes,
        linkActiveClass: "nj-active"
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 4.将创建好的路由对象绑定到Vue实例上
        router: router,
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
            one: one,
            two: two
        }
    });
    // console.log(vue.$route);
script>
body>
html>

嵌套路由

1.什么是嵌套路由?
嵌套路由也称之为子路由, 就是在被切换的组件中又切换其它子组件
例如: 在one界面中又有两个按钮, 通过这两个按钮进一步切换one中的内容


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>64-VueRouter-嵌套路由title>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .onepage, .twopage{
      
            width: 500px;
            height: 500px;
        }
        .onepage{
      
            background: pink;
        }
        .twopage{
      
            background: skyblue;
        }
        .onesub1page, .onesub2page{
      
            width: 100%;
            height: 300px;
        }
        .onesub1page{
      
            background: orangered;
        }
        .onesub2page{
      
            background: blueviolet;
        }
        .nj-active{
      
            background: skyblue;
        }
    style>
    <script src="js/vue.js">script>
    
    <script src="js/vue-router.js">script>
head>
<body>


<div id="app">
    <router-link to="/one" tag="button">切换到第一个界面router-link>
    <router-link to="/two" tag="button">切换到第二个界面router-link>
    
    
    <router-view>router-view>
div>
<template id="one">
    <div class="onepage">
        <p>我是第一个界面p>
        <router-link to="/one/onesub1" tag="button">切换到第一个子界面router-link>
        <router-link to="/one/onesub2" tag="button">切换到第二个子界面router-link>
        
        
        <router-view>router-view>
    div>
template>
<template id="onesub1">
    <div class="onesub1page">
        <p>我是第一个界面子界面1p>
    div>
template>
<template id="onesub2">
    <div class="onesub2page">
        <p>我是第一个界面子界面2p>
    div>
template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面p>
    div>
template>
<script>
    // 1.定义组件
    const onesub1 = {
      
        template: "#onesub1",
    };
    const onesub2 = {
      
        template: "#onesub2",
    };
    const one = {
      
        template: "#one",
        components:{
      
            onesub1:onesub1,
            onesub2: onesub2
        }
    };
    const two = {
      
        template: "#two"
    };
    // 2.定义切换的规则(定义路由规则)
    const routes = [
        // 数组中的每一个对象就是一条规则
        {
      
            path: '/one',
            component: one,
            children:[
                {
      
                    // 注意点: 如果是嵌套路由(子路由), 那么不用写一级路径的地址, 并且也不用写/
                    path: "onesub1",
                    component: onesub1
                },
                {
      
                    // 注意点: 如果是嵌套路由(子路由), 那么不用写一级路径的地址, 并且也不用写/
                    path: "onesub2",
                    component: onesub2
                }
            ]
        },
        // { path: '/one/onesub1', component: onesub1 },
        // { path: '/one/onesub2', component: onesub2 },
        {
       path: '/two', component: two }
    ];
    // 3.根据自定义的切换规则创建路由对象
    const router = new VueRouter({
      
        routes: routes,
        linkActiveClass: "nj-active"
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 4.将创建好的路由对象绑定到Vue实例上
        router: router,
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
            one: one,
            two: two
        }
    });
    // console.log(vue.$route);
script>
body>
html>

命名视图


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>66-VueRouter-命名视图title>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
        .onepage, .twopage{
      
            width: 200px;
            height: 200px;
        }
        .onepage{
      
            background: pink;
        }
        .twopage{
      
            background: skyblue;
        }
        .nj-active{
      
            background: skyblue;
        }
    style>
    <script src="js/vue.js">script>
    
    <script src="js/vue-router.js">script>
head>
<body>


<div id="app">
    
    
    
    
    
    <router-view name="name1">router-view>
    <router-view name="name2">router-view>
div>
<template id="one">
    <div class="onepage">
        <p>我是第一个界面p>
    div>
template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面p>
    div>
template>
<script>
    // 1.定义组件
    const one = {
      
        template: "#one",
    };
    const two = {
      
        template: "#two"
    };
    // 2.定义切换的规则(定义路由规则)
    const routes = [
        // 数组中的每一个对象就是一条规则
        {
      
            path: '/',
            components: {
      
                name1: one,
                name2: two
            }
        },
    ];
    // 3.根据自定义的切换规则创建路由对象
    const router = new VueRouter({
      
        routes: routes,
        linkActiveClass: "nj-active"
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 4.将创建好的路由对象绑定到Vue实例上
        router: router,
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
            one: one,
            two: two
        }
    });
    // console.log(vue.$route);
script>
body>
html>

watch属性

1.什么是Watch属性?
Watch属性是专门用于监听数据变化的, 只要数据发生了变化, 就会自动调用对应数据的回调方法

2.Watch监听路由变化
Watch属性不仅仅能够监听数据的变化, 还能够监听路由地址的变化
在企业开发中我们可以通过Watch来判断当前界面是从哪个界面跳转过来的


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>67-VueRouter-Watch属性title>
    <script src="js/vue.js">script>
    <script src="js/vue-router.js">script>
head>
<body>


<div id="app">

    

    
    <a href="#/one">切换到第一个界面a>
    <a href="#/two">切换到第二个界面a>
    <router-view>router-view>
div>
<template id="one">
    <div class="onepage">
        <p>我是第一个界面p>
    div>
template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面p>
    div>
template>

<script>
    // 1.定义组件
    const one = {
      
        template: "#one",
    };
    const two = {
      
        template: "#two"
    };
    // 2.定义切换的规则(定义路由规则)
    const routes = [
        // 数组中的每一个对象就是一条规则
        {
       path: '/one', component: one },
        {
       path: '/two', component: two }
    ];
    // 3.根据自定义的切换规则创建路由对象
    const router = new VueRouter({
      
        routes: routes
    });

    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 4.将创建好的路由对象绑定到Vue实例上
        router: router,
        watch: {
      
            // 可以通过watch监听Model中数据的变化, 只要数据发生变化, 就会自动调用对应的回调函数
          num1: function (newValue, oldValue) {
      
              // console.log(this.num1);
              // console.log(newValue, oldValue);
              this.res = parseInt(this.num1) + parseInt(this.num2)
          },
          num2: function (newValue, oldValue) {
      
              this.res = parseInt(this.num1) + parseInt(this.num2)
          },
            // 可以通过watch监听路由地址的变化, 只要路由地址发生变化, 就会自动调用对应的回调函数
          "$route.path": function (newValue, oldValue) {
      
              console.log(newValue, oldValue);
          }
        },
        // 这里就是MVVM中的Model
        data: {
      
            num1: 0,
            num2: 0,
            res: 0
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            change1(){
      
                this.res = parseInt(this.num1) + parseInt(this.num2)
            },
            change2(){
      
                this.res = parseInt(this.num1) + parseInt(this.num2)
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
            one: one,
            two: two
        }
    });
    console.log(vue.$route);
script>
body>
html>

生命周期方法

1.什么是生命周期方法?
和wbpack生命周期方法一样, 都是在从生到死的特定阶段调用的方法
PS: 生命周期钩子 = 生命周期函数 = 生命周期事件
2.Vue生命周期方法分类
2.1创建期间的生命周期方法
beforeCreate:在调用beforeCreate的时候, 仅仅表示Vue实例刚刚被创建出来
此时此刻还没有初始化好Vue实例中的数据和方法, 所以此时此刻还不能访问Vue实例中保存的数据和方法
created:在调用created的时候, 是我们最早能够访问Vue实例中保存的数据和方法的地方
beforeMount:在调用beforeMount的时候, 表示Vue已经编译好了最终模板, 但是还没有将最终的模板渲染到界面上
mounted:在调用mounted的时候, 表示Vue已经完成了模板的渲染, 表示我们已经可以拿到界面上渲染之后的内容了
2.2运行期间的生命周期方法
beforeUpdate:在调用beforeUpdate的时候, 表示Vue实例中保存的数据被修改了
注意点: 只有保存的数据被修改了才会调用beforeUpdate, 否则不会调用
注意点: 在调用beforeUpdate的时候, 数据已经更新了, 但是界面还没有更新
updated:在调用updated的时候, 表示Vue实例中保存的数据被修改了, 并且界面也同步了修改的数据了
也就是说: 数据和界面都同步更新之后就会调用updated
2.3销毁期间的生命周期方法
beforeDestroy:在调用beforeDestroy的时候, 表示当前组件即将被销毁了
注意点: 只要组件不被销毁, 那么beforeDestroy就不会调用
beforeDestroy函数是我们最后能够访问到组件数据和方法的函数
** destroyed**：在调用destroyed的时候, 表示当前组件已经被销毁了
注意点: 只要组件不被销毁, 那么destroyed就不会调用
不要在这个生命周期方法中再去操作组件中数据和方法


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>68-Vue-生命周期方法title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">
    <p>{
    {msg}}p>
div>


<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        beforeCreate:function(){
      
            /*
            在调用beforeCreate的时候, 仅仅表示Vue实例刚刚被创建出来
            此时此刻还没有初始化好Vue实例中的数据和方法, 所以此时此刻还不能访问Vue实例中保存的数据和方法
            * */
            // console.log(this.msg);
            // console.log(this.say);
        },
        created:function(){
      
            /*
            在调用created的时候, 是我们最早能够访问Vue实例中保存的数据和方法的地方
            * */
            // console.log(this.msg);
            // console.log(this.say);
        },
        beforeMount:function(){
      
            /*
            在调用beforeMount的时候, 表示Vue已经编译好了最终模板, 但是还没有将最终的模板渲染到界面上
            * */
            // console.log(document.querySelector("p").innerHTML);
            // console.log(document.querySelector("p").innerText);
        },
        mounted:function(){
      
            /*
            在调用mounted的时候, 表示Vue已经完成了模板的渲染, 表示我们已经可以拿到界面上渲染之后的内容了
            * */
            console.log(document.querySelector("p").innerHTML);
            console.log(document.querySelector("p").innerText);
        },
        el: '#app',
        // 专门用于监听数据变化的
        watch: {
      
        },
        // 这里就是MVVM中的Model
        data: {
      
            msg: "知播渔"
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            say(){
      
                console.log("say");
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

ref属性

1.Vue特殊特性
Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面
也就是说Vue不推荐我们直接操作DOM, 但是在企业开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过ref来获取

2.ref使用
2.1在需要获取的元素上添加ref属性. 例如:

我是段落
2.2在使用的地方通过 this. $r e f s . x x x 获取, 例如 t h i s .$ ref.myppp

3.ref特点
ref添加到元素DOM上, 拿到的就是元素DOM
ref添加到组件上, 拿到的就是组件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>71-Vue-特殊特性title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">
    <button @click="myFn">我是按钮button>
    <p ref="myppp">我是原生的DOMp>
    <one id="myOne" ref="myOne">one>
div>
<template id="one">
    <div>
        <p>我是组件p>
    div>
template>
<script>
    Vue.component("one", {
      
        template: "#one",
        data: function(){
      
            return {
      
                msg: "知播渔"
            }
        },
        methods: {
      
            say(){
      
                console.log("say");
            }
        },
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        // 专门用于监听数据变化的
        watch: {
      
        },
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
            myFn(){
      
                // 注意点: 如果是通过原生的语法来获取元素, 无论是原生的元素还是自定义的组件, 拿到的都是原生的元素
                // 注意点: 并且VUE官方并不推荐我们这样获取
                // console.log(document.querySelector("p"));
                // console.log(document.querySelector("#myOne"));

                // 在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取
                // 注意点: ref如果是添加给元素的元素, 那么拿到的就是元素的元素
                //         ref如果是添加给自定义的组件, 那么拿到的就是自定义的组件
                console.log(this.$refs);
                console.log(this.$refs.myppp);
                console.log(this.$refs.myOne);
                console.log(this.$refs.myOne.msg);
                console.log(this.$refs.myOne.say);
            }
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

组件的第二种渲染方式-render

1.Vue渲染组件的两种方式
1.1先定义注册组件, 然后在Vue实例中当做标签来使用
1.2先定义注册组件, 然后通过Vue实例的render方法来渲染

2.两种渲染方法的区别
1.1当做标签来渲染, 不会覆盖Vue实例控制区域
1.2通过render方法来渲染, 会覆盖Vue实例控制区域


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>72-Vue-组件渲染方式title>
    <script src="js/vue.js">script>
head>
<body>


<div id="app">

div>
<template id="one">
    <div>
        <p>我是组件222p>
    div>
template>
<script>
    Vue.component("one", {
      
        template: "#one"
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
      
        el: '#app',
        render: function(createElement){
      
            let html = createElement("one");
            return html;
        },
        // 专门用于监听数据变化的
        watch: {
      
        },
        // 这里就是MVVM中的Model
        data: {
      
        },
        // 专门用于存储监听事件回调函数
        methods: {
      
        },
        // 专门用于定义计算属性的
        computed: {
      
        },
        // 专门用于定义局部组件的
        components: {
      
        }
    });
script>
body>
html>

Vue-CLI

1.什么是Vue-CLI(Command Line Interface)?
Vue-CLI是vue官方提供的脚手架工具,
默认已经帮我们搭建好了一套利用webpack管理vue的项目结构

2.如何安装Vue-cli和使用Vue-CLI?
安装脚手架工具: npm install -g @vue/cli
检查是否安装成功: vue --version
通过脚手架创建项目: vue create project-name

3.通过Vue-CLI生成的项目结构解读
3.1在Vue-CLI2.x中生成的项目结构中我们能够看到build文件夹和config文件夹
这两个文件夹中存储了webpack相关的配置, 我们可以针对项目需求修改webpack配置
3.2在Vue-CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹
这么做的目的是为了化繁为简, 让初学者不用关心webpack, 只用关心如何使用Vue

node_modules文件夹: 存储了依赖的相关的包
public文件夹: 任何放置在 public 文件夹的静态资源都会被简单的复制，
而不经过 webpack。你需要通过绝对路径来引用它们
一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库
src文件夹: 代码文件夹
|----assets文件夹: 存储项目中自己的一些静态文件(图片/字体等)
|----components文件夹: 存储项目中的自定义组件(小组件,公共组件)
|----views文件夹: 存储项目中的自定义组件(大组件,页面级组件,路由级别组件)
|----router文件夹: 存储VueRouter相关文件
|----store文件夹: 存储Vuex相关文件
|----App.vue:根组件
|----main.js:入口js文件

你可能感兴趣的:(vue,vue,前端)

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
vue3中el-table中点击图片放大时，被表格覆盖叫我小鹏呀 vue.js javascript 前端
问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
vue项目element-ui的table表格单元格合并酋长哈哈 vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
Vue中table合并单元格用法 weixin_30613343 javascript ViewUI
地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
vue+el-table 可输入表格使用上下键进行input框切换以对_ vue学习记录 vue.js javascript 前端
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
vue + Element UI table动态合并单元格我家媳妇儿萌哒哒 element UI vue.js 前端 javascript
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2 vue.js javascript 前端
vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。焚木灵 node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js 前端 javascript node.js npm
node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
vue2实现复制,粘贴功能周bro vue.js javascript 前端
一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
【vite 自动配置路由】 CODER-V 前端 javascript vue.js 前端软件构建
手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
knob UI插件使用换个号韩国红果果 JavaScript jsonp knob
图形是用canvas绘制的 js代码 var paras = { max:800, min:100, skin:'tron',//button type thickness:.3,//button width width:'200',//define canvas width.,canvas height displayInput:'tr
Android+Jquery Mobile学习系列(5)-SQLite数据库白糖_ JQuery Mobile
目录导航 SQLite是轻量级的、嵌入式的、关系型数据库，目前已经在iPhone、Android等手机系统中使用,SQLite可移植性好，很容易使用，很小，高效而且可靠。因为Android已经集成了SQLite，所以开发人员无需引入任何JAR包，而且Android也针对SQLite封装了专属的API，调用起来非常快捷方便。我也是第一次接触S
impala-2.1.2-CDH5.3.2 dayutianfei impala
最近在整理impala编译的东西，简单记录几个要点：根据官网的信息（https://github.com/cloudera/Impala/wiki/How-to-build-Impala）： 1. 首次编译impala，推荐使用命令： ${IMPALA_HOME}/buildall.sh -skiptests -build_shared_libs -format 2.仅编译BE ${I
求二进制数中1的个数周凡杨 java 算法二进制
解法一：对于一个正整数如果是偶数，该数的二进制数的最后一位是 0 ，反之若是奇数，则该数的二进制数的最后一位是 1 。因此，可以考虑利用位移、判断奇偶来实现。 public int bitCount(int x){ int count = 0; while(x!=0){ if(x%2!=0){ /
spring中hibernate及事务配置 g21121 Hibernate
hibernate的sessionFactory配置：  <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean"> <
log4j.properties 使用 510888780 log4j
log4j.properties 使用一.参数意义说明输出级别的种类 ERROR、WARN、INFO、DEBUG ERROR 为严重错误主要是程序的错误 WARN 为一般警告，比如session丢失 INFO 为一般要显示的信息，比如登录登出 DEBUG 为程序的调试信息配置日志信息输出目的地 log4j.appender.appenderName = fully.qua
Spring mvc-jfreeChart柱图（2）布衣凌宇 jfreechart
上一篇中生成的图是静态的，这篇将按条件进行搜索，并统计成图表，左面为统计图，右面显示搜索出的结果。第一步：导包第二步；配置web.xml(上一篇有代码) 建BarRenderer类用于柱子颜色 import java.awt.Color; import java.awt.Paint; import org.jfree.chart.renderer.category.BarR
我的spring学习笔记14-容器扩展点之PropertyPlaceholderConfigurer aijuans Spring3
PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。 PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java
maven 之 cobertura 简单使用 antlove maven test unit cobertura report
1. 创建一个maven项目 2. 创建com.CoberturaStart.java package com; public class CoberturaStart { public void helloEveryone(){ System.out.println("=================================================
程序的执行顺序百合不是茶 JAVA执行顺序
刚在看java核心技术时发现对java的执行顺序不是很明白了,百度一下也没有找到适合自己的资料,所以就简单的回顾一下吧代码如下; 经典的程序执行面试题 //关于程序执行的顺序 //例如： //定义一个基类 public class A(){ public A(
设置session失效的几种方法 bijian1013 web.xml session失效监听器
在系统登录后，都会设置一个当前session失效的时间，以确保在用户长时间不与服务器交互，自动退出登录，销毁session。具体设置很简单，方法有三种：（1）在主页面或者公共页面中加入：session.setMaxInactiveInterval(900);参数900单位是秒，即在没有活动15分钟后，session将失效。这里要注意这个session设置的时间是根据服务器来计算的，而不是客户端。所
java jvm常用命令工具 bijian1013 java jvm
一.概述程序运行中经常会遇到各种问题，定位问题时通常需要综合各种信息，如系统日志、堆dump文件、线程dump文件、GC日志等。通过虚拟机监控和诊断工具可以帮忙我们快速获取、分析需要的数据，进而提高问题解决速度。本文将介绍虚拟机常用监控和问题诊断命令工具的使用方法，主要包含以下工具: &nbs
【Spring框架一】Spring常用注解之Autowired和Resource注解 bit1129 Spring常用注解
Spring自从2.0引入注解的方式取代XML配置的方式来做IOC之后，对Spring一些常用注解的含义行为一直处于比较模糊的状态，写几篇总结下Spring常用的注解。本篇包含的注解有如下几个： Autowired Resource Component Service Controller Transactional 根据它们的功能、目的，可以分为三组，Autow
mysql 操作遇到safe update mode问题 bitray update
我并不知道出现这个问题的实际原理,只是通过其他朋友的博客,文章得知的一个解决方案,目前先记录一个解决方法,未来要是真了解以后,还会继续补全. 在mysql5中有一个safe update mode,这个模式让sql操作更加安全,据说要求有where条件,防止全表更新操作.如果必须要进行全表操作,我们可以执行 SET
nginx_perl试用 ronin47 nginx_perl试用
因为空闲时间比较多，所以在CPAN上乱翻，看到了nginx_perl这个项目(原名Nginx::Engine)，现在托管在github.com上。地址见：https://github.com/zzzcpan/nginx-perl 这个模块的目的，是在nginx内置官方perl模块的基础上，实现一系列异步非阻塞的api。用connector/writer/reader完成类似proxy的功能（这里
java-63-在字符串中删除特定的字符 bylijinnan java
public class DeleteSpecificChars { /** * Q 63 在字符串中删除特定的字符 * 输入两个字符串，从第一字符串中删除第二个字符串中所有的字符。 * 例如，输入”They are students.”和”aeiou”，则删除之后的第一个字符串变成”Thy r stdnts.” */ public static voi
EffectiveJava--创建和销毁对象 ccii 创建和销毁对象
本章内容： 1. 考虑用静态工厂方法代替构造器 2. 遇到多个构造器参数时要考虑用构建器（Builder模式） 3. 用私有构造器或者枚举类型强化Singleton属性 4. 通过私有构造器强化不可实例化的能力 5. 避免创建不必要的对象 6. 消除过期的对象引用 7. 避免使用终结方法 1. 考虑用静态工厂方法代替构造器类可以通过
[宇宙时代]四边形理论与光速飞行 comsci
从四边形理论来推论为什么光子飞船必须获得星光信号才能够进行光速飞行？一组星体组成星座向空间辐射一组由复杂星光信号组成的辐射频带，按照四边形-频率假说一组频率就代表一个时空的入口那么这种由星光信号组成的辐射频带就代表由这些星体所控制的时空通道，该时空通道在三维空间的投影是一
ubuntu server下python脚本迁移数据 cywhoyi python Kettle pymysql cx_Oracle ubuntu server
因为是在Ubuntu下，所以安装python、pip、pymysql等都极其方便，sudo apt-get install pymysql，但是在安装cx_Oracle（连接oracle的模块）出现许多问题，查阅相关资料，发现这边文章能够帮我解决，希望大家少走点弯路。http://www.tbdazhe.com/archives/602 1.安装python 2.安装pip、pymysql
Ajax正确但是请求不到值解决方案 dashuaifu Ajax async
Ajax正确但是请求不到值解决方案解决方案：1 . async: false , 2. 设置延时执行js里的ajax或者延时后台java方法！！！！！！！例如： $.ajax({ &
windows安装配置php+memcached dcj3sjt126com PHP Install memcache
Windows下Memcached的安装配置方法 1、将第一个包解压放某个盘下面，比如在c:\memcached。 2、在终端（也即cmd命令界面）下输入 'c:\memcached\memcached.exe -d install' 安装。 3、再输入： 'c:\memcached\memcached.exe -d start' 启动。（需要注意的: 以后memcached将作为windo
iOS开发学习路径的一些建议 dcj3sjt126com ios
iOS论坛里有朋友要求回答帖子，帖子的标题是：想学IOS开发高阶一点的东西，从何开始，然后我吧啦吧啦回答写了很多。既然敲了那么多字，我就把我写的回复也贴到博客里来分享，希望能对大家有帮助。欢迎大家也到帖子里讨论和分享，地址：http://bbs.csdn.net/topics/390920759 下面是我回复的内容：结合自己情况聊下iOS学习建议，
Javascript闭包概念 fanfanlovey JavaScript 闭包
1.参考资料 http://www.jb51.net/article/24101.htm http://blog.csdn.net/yn49782026/article/details/8549462 2.内容概述要理解闭包，首先需要理解变量作用域问题内部函数可以饮用外面全局变量 var n=999; 　　functio
yum安装mysql5.6 haisheng mysql
1、安装http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm 2、yum install mysql 3、yum install mysql-server 4、vi /etc/my.cnf 添加character_set_server=utf8
po/bo/vo/dao/pojo的详介 IT_zhlp80 java BO VO DAO POJO po
JAVA几种对象的解释 PO:persistant object持久对象,可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作. VO:value object值对象。通常用于业务层之间的数据传递，和PO一样也是仅仅包含数据而已。但应是抽象出的业务对象,可
java设计模式 kerryg java 设计模式
设计模式的分类：一、设计模式总体分为三大类： 1、创建型模式（5种）：工厂方法模式，抽象工厂模式，单例模式，建造者模式，原型模式。 2、结构型模式（7种）：适配器模式，装饰器模式，代理模式，外观模式，桥接模式，组合模式，享元模式。 3、行为型模式（11种）：策略模式，模版方法模式，观察者模式，迭代子模式，责任链模式，命令模式，备忘录模式，状态模式，访问者
[1]CXF3.1整合Spring开发webservice——helloworld篇木头.java spring webservice CXF
Spring 版本3.2.10 CXF 版本3.1.1 项目采用MAVEN组织依赖jar 我这里是有parent的pom，为了简洁明了，我直接把所有的依赖都列一起了，所以都没version，反正上面已经写了版本 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht
Google 工程师亲授：菜鸟开发者一定要投资的十大目标 qindongliang1922 工作感悟人生
身为软件开发者，有什么是一定得投资的？ Google 软件工程师 Emanuel Saringan 整理了十项他认为必要的投资，第一项就是身体健康，英文与数学也都是必备能力吗？来看看他怎么说。（以下文字以作者第一人称撰写））你的健康无疑地，软件开发者是世界上最久坐不动的职业之一。每天连坐八到十六小时，休息时间只有一点点，绝对会让你的鲔鱼肚肆无忌惮的生长。肥胖容易扩大罹患其他疾病的风险，
linux打开最大文件数量1,048,576 tianzhihehe c linux
File descriptors are represented by the C int type. Not using a special type is often considered odd, but is, historically, the Unix way. Each Linux process has a maximum number of files th
java语言中PO、VO、DAO、BO、POJO几种对象的解释衞酆夼 java VO BO POJO po
PO:persistant object持久对象最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作。 BO:business object业务对象封装业务逻辑的java对象