前端vue2

已于 2023-04-11 23:19:54 修改
阅读量337 收藏 1
点赞数 2
分类专栏： 前端 文章标签： vue
于 2023-03-27 20:27:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43472934/article/details/129803188
版权

第一章：Vue核心

1.1 Vue简介

1.2 初识Vue

1.2.1 正常情况（一个容器对应一个Vue实例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>
</head>
<body>
    
    <!-- 
        初识Vue
        1.想让Vue工作，就必须创建一个Vue实例，且传入一个配置对象
        2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
        3.root容器里的代码被称为【Vue模板】
        4.Vue实例和容器是一一对应的
        5.真实开发中只有一个Vue实例，并且配合着组件一起使用
        6.{{xxx}}中的xxx要写js表达式,并且xxx可以自动读取到data中的所有属性
        7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

        注意区分：js表达式与js代码（语句）
                1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
                    (1).a
                    (2).a+b
                    (3).demo(1)
                    (4).x === y ? 'a':'b'
                2.js代码（语句）
                    (1).if(){}
                    (2).for(){}
     -->


     <!-- 准备好一个容器 -->
     <div id="root">
        <h1>Hello {{name}}，{{name.toUpperCase()}}</h1>
        <h1>{{Date.now()}}</h1>
     </div>

     <!-- 
        引入Vue之后能怎么办？当年引入jQuery，全局多了两个人，一个是$，一个是jQuery关键词
        那引入了Vue就多了一个人， Vue内置对象，也可以叫函数，因为函数本身就两个身份，一个是当作函数，一个当作对象
        如果你引用了Vue，全局就多了一个Vue构造函数
      -->
     <script type="text/javascript">
        // 
        // 
        new Vue({
            el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                name:'zhangsan'
            }
        })
     </script>
</body>
</html>

结果图

在这里插入图片描述

1.2.2 异常情况（两个容器对应一个Vue实例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>
</head>
<body>
    
    <!-- 
        初识Vue
        1.想让Vue工作，就必须创建一个Vue实例，且传入一个配置对象
        2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
        3.root容器里的代码被称为【Vue模板】
        4.Vue实例和容器是一一对应的
        5.真实开发中只有一个Vue实例，并且配合着组件一起使用
        6.{{xxx}}中的xxx要写js表达式,并且xxx可以自动读取到data中的所有属性
        7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

        注意区分：js表达式与js代码（语句）
                1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
                    (1).a
                    (2).a+b
                    (3).demo(1)
                    (4).x === y ? 'a':'b'
                2.js代码（语句）
                    (1).if(){}
                    (2).for(){}
     -->


     <!-- 准备好一个容器 -->
     <div id="root">
        <!-- <h1>Hello {{name}}，{{name.toUpperCase()}}</h1>
        <h1>{{Date.now()}}</h1> -->
        <h1>Hello {{name}} 1</h1>
     </div>

     <div id="root">
        <h1>Hello {{name}} 2</h1>
     </div>

     <!-- 
        引入Vue之后能怎么办？当年引入jQuery，全局多了两个人，一个是$，一个是jQuery关键词
        那引入了Vue就多了一个人， Vue内置对象，也可以叫函数，因为函数本身就两个身份，一个是当作函数，一个当作对象
        如果你引用了Vue，全局就多了一个Vue构造函数
      -->
     <script type="text/javascript">
        new Vue({
            el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                name:'zhangsan'
            }
        })
     </script>
</body>
</html>

结果图

在这里插入图片描述

虽然控制台不会报错，但是第二个div无法解析
上面是多个容器对应一个Vue实例，结果就是下方那个容器是无法解析到

1.2.3 异常情况（一个容器对应多个容器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>
</head>
<body>
    
    <!-- 
        初识Vue
        1.想让Vue工作，就必须创建一个Vue实例，且传入一个配置对象
        2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
        3.root容器里的代码被称为【Vue模板】
        4.Vue实例和容器是一一对应的
        5.真实开发中只有一个Vue实例，并且配合着组件一起使用
        6.{{xxx}}中的xxx要写js表达式,并且xxx可以自动读取到data中的所有属性
        7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

        注意区分：js表达式与js代码（语句）
                1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
                    (1).a
                    (2).a+b
                    (3).demo(1)
                    (4).x === y ? 'a':'b'
                2.js代码（语句）
                    (1).if(){}
                    (2).for(){}
     -->


     <!-- 准备好一个容器 -->
     <div id="root">
        <h1>Hello {{name}} - {{address}}</h1>
     </div>

     <!-- 
        引入Vue之后能怎么办？当年引入jQuery，全局多了两个人，一个是$，一个是jQuery关键词
        那引入了Vue就多了一个人， Vue内置对象，也可以叫函数，因为函数本身就两个身份，一个是当作函数，一个当作对象
        如果你引用了Vue，全局就多了一个Vue构造函数
      -->
     <script type="text/javascript">
        new Vue({
            el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                name:'zhangsan'
            }
        })

        new Vue({
            el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                address:'zhangsan'
            }
        })
     </script>
</body>
</html>

结果图

在这里插入图片描述

会报找不到address这个属性或者方法名

1.2.4 正常情况（一对一，多个容器的使用方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>
</head>
<body>
    
    <!-- 
        初识Vue
        1.想让Vue工作，就必须创建一个Vue实例，且传入一个配置对象
        2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
        3.root容器里的代码被称为【Vue模板】
        4.Vue实例和容器是一一对应的
        5.真实开发中只有一个Vue实例，并且配合着组件一起使用
        6.{{xxx}}中的xxx要写js表达式,并且xxx可以自动读取到data中的所有属性
        7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

        注意区分：js表达式与js代码（语句）
                1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
                    (1).a
                    (2).a+b
                    (3).demo(1)
                    (4).x === y ? 'a':'b'
                2.js代码（语句）
                    (1).if(){}
                    (2).for(){}
     -->


     <!-- 准备好一个容器 -->
     <div id="root1">
        <h1>Hello {{name}} - {{address}}</h1>
     </div>

     <div id="root2">
        <h1>Hello {{name}} - {{address}}</h1>
     </div>

     <!-- 
        引入Vue之后能怎么办？当年引入jQuery，全局多了两个人，一个是$，一个是jQuery关键词
        那引入了Vue就多了一个人， Vue内置对象，也可以叫函数，因为函数本身就两个身份，一个是当作函数，一个当作对象
        如果你引用了Vue，全局就多了一个Vue构造函数
      -->
     <script type="text/javascript">
        new Vue({
            el:'#root1',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                name:'zhangsan',
                address:'湖南'
            }
        })

        new Vue({
            el:'#root2',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                address:'guangdong',
                name:'李四'
            }
        })
     </script>
</body>
</html>

结果图

在这里插入图片描述

总结

a.{{}}
  1. 可以获取data里的数据
  2. 可以使用js表达式，如{{Data.now()}}，{{1+1}}，{{name.toUpperCase()}}等。注意区分js表达式和js语句（代码）

注意区分：js表达式与js代码（语句）
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1).a
(2).a+b
(3).demo(1)
(4).x === y ? ‘a’:‘b’
2.js代码（语句）
(1).if(){}
(2).for(){}

b.el

el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。

el:'#root1'
c.data

data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。

data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
      address:'guangdong',
     name:'李四'
}

1.13 内置指令与自定义指令

1.13.1 常用的内置指令

1.13.2 自定义指令

1.13.2.1 自定义指令-函数式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

</head>
<body>

    <!-- 
        需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
     -->
    
    <!-- 准备好一个容器 -->
    <div id="root">
        {{name}}
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                n:1,
                name:'vue'
            },
            directives:{
                //big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时。
                big(element,binding){
                    element.innerText = binding.value * 10;
                    console.log(element,binding);
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

会发现name发生变化时，big函数还是被调用了。因为big函数对应的指令的模板发生了重新解析，big函数就会被重新调用

1.13.2.2 自定义指令-对象式

我们知道input默认是不获取焦点的，所以有如下的需求
实现功能：需求2：定义一个v-fbind指令,和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点

使用函数式是无法实现的

fbind(element,binding){
    element.value = binding.value
    element.focus()
}

因为vue它有加载顺序的，而函数式的只是指令与元素成功绑定了，但是元素还未插入页面上，所以需要使用对象式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

</head>
<body>

    <!-- 
        需求2：定义一个v-fbind指令,和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
     -->
    
    <!-- 准备好一个容器 -->
    <div id="root">
        {{name}}
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr/>
        <input type="text" v-fbind:value="n">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                n:1,
                name:'vue'
            },
            directives:{
                //big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时。
                big(element,binding){
                    element.innerText = binding.value * 10;
                    // console.log(element,binding);
                },
                fbind:{
                    //当指令与元素成功绑定时（一上来）
                    bind(element,binding){
                        element.value = binding.value
                    },
                    //指令所在元素被插入页面时
                    inserted(element,binding){
                        element.focus()
                    },
                    //指令所在的模板被重新解析时
                    update(element,binding){
                        element.value = binding.value
                    }
                }
            }
        })
    </script>
</body>
</html>
1.13.2.3 注意事项：
a.命令不支持驼峰命令法

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

尽管写了bigNumber函数仍然是无效的

在这里插入图片描述

只有按照它报错的指令写就可以

在这里插入图片描述

在这里插入图片描述

b.建议使用短横线命令法

在这里插入图片描述

在这里插入图片描述

注意：短横线命令法一定要写单引号

c.directives里的函数的this是window

在这里插入图片描述

在这里插入图片描述

d.全局指令

在这个小章节之前的自定义指令都是局部指令，只能在root容器中使用，如果新建了一个id为footer的容器，这个容器是无法使用big指令的

全局指令代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令-注意事项</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

</head>
<body>

    <!-- 
        
     -->
    
    <!-- 准备好一个容器 -->
    <div id="root">
        {{name}}
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <!-- <h2>放大10倍后的n值是：<span v-big="n"></span></h2> -->
        <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <input type="text" v-fbind:value="n">
    </div>

    <div id="footer">
        <input type="text" v-fbind:value="x">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。
        //定义全局的自定义指令-对象式
        // Vue.directive('fbind',{
        //     //当指令与元素成功绑定时（一上来）
        //     bind(element,binding){
        //         element.value = binding.value
        //     },
        //     //指令所在元素被插入页面时
        //     inserted(element,binding){
        //         element.focus()
        //     },
        //     //指令所在的模板被重新解析时
        //     update(element,binding){
        //         element.value = binding.value
        //     }
        // })

        //全局的自定义指令-函数式
        Vue.directive('fbind',function(element,binding){
            element.value = binding.value
        })

        const vm = new Vue({
            el:'#root',
            data:{
                n:1,
                name:'vue'
            },
            directives:{
                //big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时。
                big(element,binding){
                    element.innerText = binding.value * 10;
                    console.log(element,binding);
                },
                'big-number'(element,binding){
                    // console.log(this);
                },
                // fbind:{
                //     //当指令与元素成功绑定时（一上来）
                //     bind(element,binding){
                //         element.value = binding.value
                //     },
                //     //指令所在元素被插入页面时
                //     inserted(element,binding){
                //         element.focus()
                //     },
                //     //指令所在的模板被重新解析时
                //     update(element,binding){
                //         element.value = binding.value
                //     }
                // }
            }
        })

        new Vue({
            el:'#footer',
            data:{
                x:1,
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

1.13.2.4 总结
    自定义指令总结：
        一、定义语法：
            （1）.局部指令
            （2）.全局指令
        二、配置对象中常用的3个回调
            (1).bind:指令与元素成功绑定时调用
            (2).inserted:指令所在元素被插入页面时调用
            (3).update:指令所在模板结构被重新解析时调用
        三、备注：
            1.指令定义时不加v-，但使用时需要加v-
            2.指令名如果时多个单词，要使用kebab-case（短横线命令法）命令方式，不要用camelCase（驼峰命令法）命令

1.14 Vue实例生命周期

1.14.1 生命周期流程图

在这里插入图片描述

1.14.2 beforeCreate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析生命周期</title>

    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue2.js"></script>

</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                n:1
            },
            methods: {
                add(){
                    this.n++;
                }
            },
            beforeCreate() {
                console.log('beforeCreate');
                console.log(this);
                debugger
            },
        })

    </script>
</body>
</html>

在这里插入图片描述

第3章：使用Vue脚手架

3.1 初始化脚手架

3.1.1 说明

  1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
  2. 最新的版本是 4.x。
  3. 文档: https://cli.vuejs.org/zh/。

3.1.2 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx(项目名)

第三步：启动项目

npm run serve

备注：

  1. 如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry
    https://registry.npm.taobao.org

3.1.3 模板项目的结构

3.1.4 入门案例

main.js
// 该文件是整个项目的入口文件

//引入Vue
import { createApp } from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'

createApp(App).mount('#app')
App.vue
<template>
  <div>
    <img src="./assets/logo.png" alt="图标">
    <School></School>
    <Student></Student>
  </div>
</template>

<script>

    //引入组件
    import School from './components/School.vue'
    import Student from './components/Student.vue'

    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>

<style>

</style>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值