vue零基础——vue2基础知识

已于 2022-11-19 20:10:52 修改
阅读量318 收藏
点赞数
文章标签： vue.js javascript 前端
于 2022-11-19 20:04:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liveon_/article/details/127941140
版权

Vue 技术栈

文章目录

1. vue基础知识和原理

1.1 初识Vue

  • 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
  • demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
  • demo容器里的代码被称为【Vue模板】
  • Vue实例和容器是一一对应的
  • 真实开发中只有一个Vue实例，并且会配合着组件一起使用
  • { {xxx}}是Vue的语法：插值表达式，{ {xxx}}可以读取到data中的所有属性
  • 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新(Vue实现的响应

初识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/vue.js"></script>
</head>
<!-- 
    初识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(){}
 -->

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 通过{
  {}}这个包裹着表达式 实现动态改变文字内容 -->
        <h1>hello, {
  {name.toUpperCase()}}, {
  {address}}</h1>
    </div>
    <script type="text/javascript">
        // 设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false;

        // 创建Vue实例   不需要接收这个vue对象值，直接在vue里配置对象即可
        new Vue({
            el: '#root',  // el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
            data: { // data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name: 'world',
                address:'beijing'
            }
        });
    </script>
</body>

</html>
1.1.1. 官网

  1. 英文官网: https://vuejs.org/

  2. 中文官网: https://cn.vuejs.org/

1.1.2. 介绍与描述

  1. 动态构建用户界面的渐进式 JavaScript 框架

  2. 作者: 尤雨溪

1.1.3. Vue 的特点

  1. 遵循 MVVM 模式

  2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

  3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

1.1.4. 与其它 JS 框架的关联

  1. 借鉴 Angular 的模板和数据绑定技术

  2. 借鉴 React 的组件化和虚拟 DOM 技术

1.1.5. Vue 周边库

  1. vue-cli: vue 脚手架

  2. vue-resource

  3. axios

  4. vue-router: 路由

  5. vuex: 状态管理

  6. element-ui: 基于 vue 的 UI 组件库(PC 端)

    ……

1.2 vue模板语法

1.2.1 Vue模板语法有2大类：

1.插值语法：

  • 功能：用于解析’‘标签体’'内容。
  • 写法：{ {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法：

  • 功能：用于解析’‘标签’'（包括：标签属性、标签体内容、绑定事件…）。
  • 举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
  • 备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

模板语法代码

<!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>
    <script src="../js/vue.js"></script>
</head>
<!-- 
    Vue模板语法有2大类：
			1.插值语法：
					功能：用于解析''标签体''内容。
					写法：{
  {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
			2.指令语法：
					功能：用于解析''标签''（包括：标签属性、标签体内容、绑定事件.....）。
					举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
					备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
 -->

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{
  {name}}</h3>
        <hr>
        <h1>指令语法</h1>
        <!--  读取到data中的所有属性 -->
        <a :href="school.url.toUpperCase()" target="_blank" :x="school.hello">百度查找一下</a>
        <!--  读取到data中的所有属性 查找到下一级的内容 -->
        <a :href="name" target="_blank" :x="school.hello">百度查找一下</a>
    </div>
</body>
<script>
    // 设置为 false 以阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data: {
            name: 'rose',
            school: {
                url: 'http://www.baidu.com',
                hello: '你好哇'
            }
        }
    })
</script>

</html>
1.2.2. 模板的理解

html 中包含了一些 JS 语法代码，语法分为两种，分别为：

  1. 插值语法（双大括号表达式）
  2. 指令（以 v-开头）
1.2.3. 插值语法

  1. 功能: 用于解析标签体内容

  2. 语法: { {xxx}} ，xxxx 会作为 js 表达式解析

1.2.4. 指令语法

  1. 功能: 解析标签属性、解析标签体内容、绑定事件

  2. 举例：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析

  3. 说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

1.3 数据绑定

1.3.1 Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

数据绑定代码

<!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>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!-- 
    Vue中有2种数据绑定的方式：
        1.单向绑定(v-bind)：数据只能从data流向页面。
        2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
            备注：
                1.双向绑定一般都应用在表单类元素上（如：input、select等）
                2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
 -->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 普通写法 -->
        <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name"> -->

        <!-- 简写 -->
        单向数据绑定：<input type="text" :value="name"><br>
        双向数据绑定：<input type="text" v-model="name">

        <!-- 如下代码时错误的，因为model只能应用在表单类元素（输入类元素）上 -->
        <!-- <h2 v-model:x="name">你好哇</h2> -->
    </div>
</body>
<script>
    // 设置为 false 以阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            name:'ahh'
        }
    })
</script>
</html>
1.3.2. 单向数据绑定

  1. 语法：v-bind:href =“xxx” 或简写为 :href

  2. 特点：数据只能从 data 流向页面

1.3.3. 双向数据绑定

  1. 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”

  2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data

1.4 el和data的两种写法

data与el的2种写法

1.el有2种写法

​ (1).new Vue时候配置el属性。

​ (2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。

2.data有2种写法

​ (1).对象式

​ (2).函数式

​ 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则：

​ 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是指向全局的window。

<!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>4.el和data的两种写法</title>
    <script src="../js/vue.js"></script>
</head>
<!-- 
    data与el的2种写法
        1.el有2种写法
            (1).new Vue时候配置el属性。
            (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
        2.data有2种写法
            (1).对象式
            (2).函数式
            如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
        3.一个重要的原则：
            由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是指向全局的window。
 -->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>你好，{
  {name}}</h1>
    </div>
</body>
<script>
    // 设置为 false 以阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false;
    // el的两种写法
    /* 
    const x = new Vue({
        // el: '#root',     // 第一种写法
        data: {
            name:'rose',
        }
    });
    console.log(x);
    x.$mount('#root');     // 第二种写法 
    */

    // data的两种写法
    new Vue({
        el: '#root',
        // data的第一种写法：对象式
        /* data: {
            name:'rose',
        } */
        // data的第二种写法：函数式
        // data: function(){ 
        // 简单函数可以简写成下面的形式省略function
        data(){
            console.log(this);  // 此处的this是vue实例对象
            return {
                name:'rose',
            }
        }
    });
</script>
</html>

1.5 mvvm模型

MVVM模型

  1. M：模型(Model) ：data中的数据
  2. V：视图(View) ：模板代码
  3. VM：视图模型(ViewModel)：Vue实例

在这里插入图片描述

观察发现：

  1. data中所有的属性，最后都出现在了vm身上。
  2. vm身上所有的属性 及 Vue原型上所有属性，在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中的MVVM</title>
    <script src="../js/vue.js"></script>
</head>
<!-- 
    MVVM模型
        1. M：模型(Model) ：data中的数据
        2. V：视图(View) ：模板代码
        3. VM：视图模型(ViewModel)：Vue实例
    观察发现：
        1.data中所有的属性，最后都出现在了vm身上。
        2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
 -->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>学校名称：{
  {name}}</h1>
        <h1>学校地址：{
  {address}}</h1>
    </div>
</body>
<script>
    // 设置为 false 以阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false;
    
    const vm = new Vue({
        el:'#root',
        data:{
            name:'wolowiz',
            address:'China'
        }
    });
    console.log(vm)
</script>
</html>

1.6 数据代理

1.6.1 回顾object.defineProperty方法
<!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>回顾object.defineProperty方法</title>
</head>
<body>
    <script>
        let number = 18;
        let person = {
            name:'张三',
            sex:'男',
        };
        // Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
        // Object.defineProperty(obj, prop, descriptor)
        // obj:要定义属性的对象;
        // prop:要定义或修改的属性的名称或 Symbol；
        // descriptor：要定义或修改的属性描述符。
        Object.defineProperty(person, 'age', {
            // value:18,
            // enumerable:true,   // 可枚举的，控制属性是否可以枚举，默认值是false
            // writable:true,     // 可写的，控制属性是否可以被修改，默认值是false
            // configurable:true, // 可配置的，控制属性是否可以被删除，默认值是false

            /* 
            getter:有时需要允许访问返回动态计算值的属性，或者你可能需要反映内部变量的状态，而不需要使用显式方法调用。在 JavaScript 中，可以使用 getter 来实现。
            setter:在 javascript 中，如果试着改变一个属性的值，那么对应的 setter 将被执行。setter 经常和 getter 连用以创建一个伪属性 
            */

            // 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
            get:function() {
                console.log('正在读取age属性');
                return number;
            },
            // 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
            set:function(value) {
                console.log('修改了age属性，且值是',value);
                number= value;
            }

        });
        // Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。
        // console.log(Object.keys(person));
        console.log(person);
    </script>
</body>
</html>
1.6.2 何为数据代理
<!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>Document</title>
</head>
<body>
    <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -->
    <script>
        let obj = {x:100};
        let obj2 = {y:200};

        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x;
            },
            set(value){
                obj.x = value;
            }
        })
    </script>
</body>
</html>
1.6.3 vue中的数据代理

1.Vue中的数据代理：

  • 通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：

  • 更加方便的操作data中的数据

3.基本原理：

  • 通过Object.defineProperty()把data对象中所有属性添加到vm上。

  • 为每一个添加到vm上的属性，都指定一个getter/setter。

  • 在getter/setter内部去操作（读/写）data中对应的属性。

    在这里插入图片描述

<!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>Document</title>
    <script src="../js/vue.js"></script>
</head>
<!-- 
    1.Vue中的数据代理：
        通过vm对象来代理data对象中属性的操作（读/写）
    2.Vue中数据代理的好处：
        更加方便的操作data中的数据
    3.基本原理：
        通过Object.defineProperty()把data对象中所有属性添加到vm上。
        为每一个添加到vm上的属性，都指定一个getter/setter。
        在getter/setter内部去操作（读/写）data中对应的属性。
 -->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>学校名称：{
  {name}}</h2>
        <h2>学校地址：{
  {address}}</h2>
    </div>
</body>
<script>
    // 设置为 false 以阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            name:'sanxia',
            address:'ychang'
        }
    })
</script>
</html>

1.7 事件处理

1.7.1.事件的基本使用

事件的基本使用：

​ 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

​ 2.事件的回调需要配置在methods对象中，最终会在vm上；

​ 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

​ 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

​ 5.@click=“demo” 和 @click=“demo($event)” 效果一致（都可以传递event），但后者可以传参；

<!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>Document</title>
    <script src="../js/vue.js"></script>
</head>
<!-- 
    事件的基本使用：
        1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
        2.事件的回调需要配置在methods对象中，最终会在vm上；
        3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
        4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
        5.@click="demo" 和 @click="demo($event)" 效果一致（都可以传递event），但后者可以传参；
 -->

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{
  {name}}学习</h2>
        <button v-on:click="showInfo">点我提示信息</button>
        <!-- 简写形式 -->
        <button @click="showInfo1">点我提示信息1(不传参)</button>
        <button @click="showInfo2(66,$event)">点我提示信息2(传参)</button>
    </div>
</body>
<script>
    // 设置为 false 以阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data: {
            name: '三峡大学',
        },
        methods: {
            showInfo(event) {
                // console.log(event.target.innerText);
                // console.log(this===vm);     // true  此处的this是vm：vue的实例对象
                // alert('同学你好yaaaaa~');
            },
            showInfo1(event) {
                // console.log(event.target.innerText);
                // console.log(this===vm);     // true  此处的this是vm：vue的实例对象
                alert('同学你好ya~');
            },
            showInfo2(number, a) {
                // console.log(event.target.innerText);
                // console.log(this===vm);     // true  此处的this是vm：vue的实例对象
                alert('同学你好yaaaaa~');
                console.log(number, a);
            }
        },
    })
</script>

</html>
1.7.2.事件修饰符

Vue中的事件修饰符：

​ 1.prevent：阻止默认事件（常用）；

​ 2.stop：阻止事件冒泡（常用）；

​ 3.once：事件只触发一次（常用）；

​ 4.capture：使用事件的捕获模式(事件发生的顺序是先捕获后冒泡)；

​ 5.self：只有event.target是当前操作的元素时才触发事件；

​ 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!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>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            margin-top: 20px;
        }
        .demo1 {
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            padding: 5px;
            background-color: skyblue;
        }
        .box2{
            padding: 5px;
            background-color: salmon;
        }
        .list {
            width: 200px;
            height: 200px;
            background-color: khaki;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<!-- 
    Vue中的事件修饰符：
        1.prevent：阻止默认事件（常用）；
        2.stop：阻止事件冒泡（常用）；
        3.once：事件只触发一次（常用）；
        4.capture：使用事件的捕获模式(事件发生的顺序是先捕获后冒泡)；
        5.self：只有event.target是当前操作的元素时才触发事件；
        6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
 -->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{
  {name}}学习</h2>
        <!-- 阻止默认事件（常用） -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
        
        <!-- 阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
            <!-- 修饰符可以连续写 -->
            <!-- <a href="http://www.baidu.com" @click.stop.prevent="showInfo">点我提示信息</a> -->
        </div>
        
        <!-- 事件值触发一次（常用） -->
        <button @click.once="showInfo">点我提示信息</button>
        
        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
<script>
    // 设置为 false 以阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data: {
            name: '三峡大学',
        },
        methods: {
            showInfo(e) {
                // e.preventDefault();  // 阻止默认行为
                alert('同学你好鸭~')
                // console.log(e.target);
            },
            showMsg(msg) {
                // alert('hello你好哇~');
                console.log(msg);
            },
            demo() {
                // console.log('@');
                for (let i = 0; i < 10000; i++) {
                    console.log('#');
                };
                console.log('可把我累坏了~');
            }
        },
    })
</script>
</html>
1.7.3.键盘事件

1.Vue中常用的按键别名：

​ 回车 => enter

​ 删除 => delete (捕获“删除”和“退格”键)

​ 退出 => esc

​ 空格 => space

​ 换行 => tab (特殊，必须配合keydown去使用)

​ 上 => up

​ 下 => down

​ 左 => left

​ 右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

​ (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

​ (2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<!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>Document</title>
    <script src="../js/vue.js"></script>
</head>
<!-- 
    1.Vue中常用的按键别名：
        回车 => enter
        删除 => delete (捕获“删除”和“退格”键)
        退出 => esc
        空格 => space
        换行 => tab (特殊，必须配合keydown去使用)
        上 => up
        下 => down
        左 => left
        右 => right

    2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

    3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
        (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
        (2).配合keydown使用：正常触发事件。

    4.也可以使用keyCode去指定具体的按键（不推荐）

    5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
 -->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{
  {name}}学习</h2>
        <input type="
最低0.47元/天 解锁文章
从百草园学到三味书屋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 学习——基础知识学习与项目实操
敲代码的小李同学的博客
07-15 830
Vue 基础学习与项目实操。包括创建 Vue 组件、实现各组件间交互、路由跳转等基础 Vue 知识的介绍与实现。
Vue2 基础知识点
Fziha的博客
08-31 920
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。2、所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数等、promise的回调函数）最好写成箭头函数。且要给标签配置value值。4、methods中配置的函数，都是被Vue所挂你的函数，this的指向是vm 或 组件实例对象。
VUE基础知识——事件与消息
ybb_ymm的专栏
04-27 624
自定义事件说的直白点就是在组建中进行通信的一种方式，就是子组件向父组件传递参数定义本文下方提到：A组件定义为父组件，B组件定义为子组件。
Vue 组件基础——动态组件
qq_40930841的博客
05-05 568
链接：https://pan.baidu.com/s/16Iy3bNzoQUNiS8D0qOYtOw?其中<KeepAlive></KeepAlive>用于实现组件缓存。，当该属性值发生变化时，页面中渲染的组件也会发生变化。动态组件可以动态切换页面中显示的组件。标签可以定义动态组件，语法格式如下。函数只处理对象最外层属性的响应，它比。时，如果要实现组件的切换，需要调用。属性的属性值表示要渲染的组件。组件保存为响应式数据。
Vue2基础——Tap栏切换案例
小hu同学
08-01 1785
本篇文章需要有一丢丢的Vue基础 ，或者可以参考Vue官网，本篇文章会用到的知识点有 v-on,v-bind,v-if,v-for 业务需求： 点击tab 栏内容去切换相对应的显示内容 比如：点击栏目一 内容区域显示栏目一 内容一 可以自己先敲一下，想想该怎么实现这个业务需求呢？ 下面我会提供静态代码，只需要在这个基础上进行修改即可 我也会在文章的最后，写一遍demo HTML静态代码 <div id="app" class="vertical-tab"> <!-- 左侧.
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue基础知识——父子组件通讯
qq_28695495的博客
10-07 167
Vue基础
vue 基础 —— html版的 Vue 入门基础
猎人在吃肉
09-16 4398
数据驱动视图数据的变化会驱动视图自动更新好处：程序员只把数据维护好，那么页面结构会被Vue自动渲染出来。双向数据绑定js数据的变化，会被自动渲染到页面上页面上表单采集的数据发生变化的时候，会被Vue自动获取，并更新到js数据中。 2、vue指令 **指令（Directives）**是Vue为开发者提供的 模板语法，用于 辅助开发者渲染页面的基本结构。Vue中的指令按照不同的用途，可分为6大类：指令是Vue开发中最基础、最常吸入、最简单的知识点。内容渲染指令 用来辅助开发者 渲染 DOM 元素的文本内容
Vue基础知识：Vue路由——404详解
我就知道你会来，我们一起进步吧！
04-06 142
语法：path："*"(任意路径)—前面不匹配就命中到最后一个。作用：当路径找不到匹配时，给的一个提示页面。Vue路由中404的相关知识点。位置：匹配在路由最后。
Vue基础知识——生命周期
qq_28695495的博客
10-07 665
1、首先父组件由beforeCreated 执行到 beforeMount。2、然你后子组件由beforeCreated执行到mounted。不同点：created获取不到el，mounted可以获取到。相同点：都能获取到props和data的数据。有两个组件，一个是父组件一个子组件。3、最后父组件执行mounted。4个阶段，8个钩子。
vue面试——2021最全面的vue基础面试题.pdf
12-14
本资源提供了Vue基础知识点的面试题，涵盖了Vue的基本原理、双向数据绑定的原理、MVVM、MVC、MVP等软件架构设计模式的区别等知识点。 1. Vue的基本原理 Vue实例创建时，Vue会遍历data中的属性，使用Object....
VUE基础知识26张脑图.zip
06-17
"VUE基础知识26张脑图.zip"包含的资源显然是为了帮助初学者或者开发者系统地理解Vue的核心概念。下面我们将逐个解析这些脑图所涵盖的关键知识点。 1. **前端开发的模块化进化史**：这个话题介绍了前端从简单的脚本...
Vue基础知识记录
09-20
本篇文章将深入探讨Vue基础知识，涵盖指令、属性及其基本应用。 首先，我们要了解Vue的核心概念——数据绑定。Vue采用MVVM（Model-View-ViewModel）模式，通过双向数据绑定实现了视图与数据模型的同步。这主要依赖...
Vue购物车——组件化.rar
05-01
总结，"Vue购物车——组件化"案例展示了Vue如何利用组件化思想构建一个购物车功能，涵盖了组件注册、父子组件间通信和数据单向绑定的关键知识点，这些是理解和掌握Vue.js框架的基础。通过学习和实践这个案例，开发者...
Vue多用途电子商务商店网站模板源代码
07-05
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面，尤其适合开发单页应用...如果你熟悉以上提到的Vue.js相关知识，那么这个模板将是一个很好的起点，可以在此基础上定制出符合自己需求的电子商务网站。
输入框输入值之后，检索表格中是否存在输入框中的值，存在就让当前文字为红色
weixin_46631078的博客
07-05 429
span v-html="createKeywordHtml_content(scope.row.date)">日期this.searchValue为输入框的值。
Vue的学习之class与style绑定
人生苦短
07-07 251
本节对class与style的绑定内容就学习完毕了！
Vue的常见指令
最新发布
m0_63624484的博客
07-09 493
它的作用就是我们可以动态的定义属性的值，比如常见的<img src = "1.jpg">我们如果想要修改图片就需要获取到DOM对象，然后再重新填充，但是如果使用v-bind，v-show作用和v-if一样，只是当它为true或者false都会生成DOM对象；style表示样式，同样我们也可以用vue绑定style，实现样式属性的动态生成。接下来，我们实现经常在网页上看见的多选项选择时，选到哪个，哪个就会高亮显示。所以说，vue主要是实现对数据的操作，而js是对DOM对象的操作。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 414
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值