01-vue入门

最新推荐文章于 2024-04-10 08:30:31 发布
最新推荐文章于 2024-04-10 08:30:31 发布
阅读量1.1k 收藏
点赞数 1
文章标签： vue.js 前端 javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70847086/article/details/127034725
版权

学习Vue最好的方式：查看官网文档  Vue.js - 渐进式 JavaScript 框架 | Vue.js

1.1-Vue介绍

  • (1)Vue是什么？

    • js框架

  • (2)Vue干什么用的?

    • 构建用户页面(数据渲染到页面)

  • (3)有什么特点？

    • 渐进式

1.2-Vue两个重要特点

1-数据驱动

1.数据驱动 ：Vue会根据数据，自动渲染页面

  • 无需DOM操作，修改了对象中的数据，页面会自动渲染

  • Vue的底层使用了一种叫做虚拟DOM的技术，能够实时监听js对象的属性变化从而自动更新页面DOM元素

    • 虚拟DOM本质是一个js对象

2-组件化开发(盒子复用)

2.组件化开发 ： 网页中的某一个部分,可能需要在多个地方被重复使用，就可以定义成一个组件

      组件化开发好处:   a. 一次定义，多处使用   便于开发维护

类似于我们之前的函数封装解决代码冗余问题。Vue.js可以把网页的某一个部分(HTML+CSS+JS)封装成一个组件

1.3-Vue基本使用

  • 官方文档传送门：Vue官方文档

  • 第三方框架通用的使用步骤

    • 1.导包

    • 2.写HTML结构

    • 3.js中初始化配置

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导包 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 2.HTML结构 -->
    <div id="app">
        {{ message }}
        <br>
        {{ name }}
        <br>
        {{ age }}
        <br>
        {{ sex }}
    </div>

    <script>
        /* 3.初始化配置 */
        /* 
        (1)Vue是导入vue.js之后得到的一个全局构造函数
        (2)调用Vue构造函数 创建一个vue实例对象
        */
        let app = new Vue({
            //el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
            el: '#app',
            //data: 要渲染的数据
            /* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作) */
            data: {
                message: 'Hello Vue!',
                name:'小白',
                age:22,
                sex:'女'
            }
        })
    </script>
</body>

</html>

1.4-Vue的挂载点介绍

  • el挂载点官方文档传送门：https://cn.vuejs.org/v2/api/#el

  • 1.挂载点el作用 ： 告诉vue实例，你要将data中的数据渲染到哪一个视图

  • 2.注意点

    • (1)挂载点可以使用 id选择器（vue推荐使用） 类选择器 标签选择器

      • 开发中基本上都是id选择器，保证HTML标签唯一性

      • 如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中

    • (2)如果选择器选中了多个元素，只会选择第一个元素

    • (3)挂载点不能设置为html和body标签 （程序报错）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导包 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 2.HTML结构 -->
    <div id="xb">
        <div id="app">
            {{ message }}
        </div>

        <hr>
        <div id="box" class="container">
            {{ message }}
        </div>

        <hr>
        <div class="container">
            {{ message }}
        </div>
    </div>

    <script>
        /* 3.初始化配置 */
        /* 
        (1)Vue是导入vue.js之后得到的一个全局构造函数
        (2)调用Vue构造函数 创建一个vue实例对象
        */
        let app = new Vue({
            //el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
            /* 
            (1)挂载点可以使用  id选择器（vue推荐使用）  类选择器  标签选择器
            (2)如果选择器选中了多个元素，只会选择第一个元素
            (3)挂载点不能设置为html和body标签 （程序报错）
            */
            el: '#xb',
            //data: 要渲染的数据
            /* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作) */
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

</html>

1.5-Vue的插值表达式介绍

插值表达式(模板语法)官网文档传送门：模板语法 — Vue.js

1.Vue会自动将data对象中的数据渲染到视图

2.在视图中,使用插值表达式来告诉vue，你想把数据渲染在什么位置

3.关于插值表达式一些注意点

      (1) {{ }} : 插值表达式，也叫胡子语法

      (2) 插值表达式作用：将数据渲染到页面

      (3) 支持二元运算 {{ age + 1 }}

      (4) 支持三元运算 {{ age>30?'老男人':'小鲜肉' }}

      (5) 支持数组与对象的取值语法

      (6) 不支持分支语法与循环语法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导包 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 2.HTML结构 -->
    <div id="app">
        名字： {{ name }}   <br>
        年龄： {{ age + 1 }} <br>
        介绍： {{ age>30?'大叔':'欧巴' }}  <br>
        女朋友：{{ girlFried[1] }} <br>
        女儿： {{ daughter.name }} <br>

    </div>

    <script>
        /* 3.初始化配置 */
        /* 
        (1)Vue是导入vue.js之后得到的一个全局构造函数
        (2)调用Vue构造函数 创建一个vue实例对象
        */
        let app = new Vue({
            //el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
            /* 
            (1)挂载点可以使用  id选择器（vue推荐使用）  类选择器  标签选择器
            (2)如果选择器选中了多个元素，只会选择第一个元素
            (3)挂载点不能设置为html和body标签 （程序报错）
            */
            el: '#app',
            //data: 要渲染的数据 
            /* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作)
            (1)  {{ }} : 插值表达式，也叫胡子语法
            (2)  插值表达式作用：将数据渲染到页面
            (3)  支持二元运算   {{ age + 1 }}
            (4)  支持三元运算   {{ age>30?'老男人':'小鲜肉' }}
            (5)  支持数组与对象的取值语法
            (6)  不支持分支语法与循环语法
            */
            data: {
                message: 'Hello Vue!',
                name: 'xiaobai',
                age: 22,
                sex: '女',
                girlFried:['代码','学生','咖啡'],
                daughter:{
                    name:'嘟嘟',
                    age:1
                }
            }
        })
        
    </script>
</body>

</html>

02-Vue指令

指令名称指令作用示例简写形式
v-text设置元素的innerTextv-text="111"无
v-html设置元素的innerHTMLv-html="<p>111</p>"无
v-on给元素绑定事件v-on:click="doClick"@click="doClick"
v-bind设置元素的原生属性v-bind:src="./logo.png":src="./logo.png"
v-for列表渲染<li v-for=(item,index) in list></li>无

1.1-Vue指令介绍

Vue指令官网文档传送门：https://cn.vuejs.org/v2/api/#v-text

1.Vue指令的本质是 ： Vue为HTML标签新增的一些属性

      a. 每一个HTML标签都有自己的原生默认属性

            HTML标签的每一个属性都有自己独特的功能

            例如 img标签的src属性，a标签的href属性

      b. Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能

2.在Vue中每一个指令都是以v-开头 （用于区分HTML标签原生属性）

语法 ： 指令名=“指令值” 例如 v-text = msg

3.使用Vue的指令，就像使用HTML标签原生的属性一样去使用即可。

<img src="./images/logo.png" alt="图片不存在时的文本" title="鼠标悬停文本" v-on:click = "doClick">
src" : 原生属性，设置图片的路径
alt : 原生属性 ，设置图片不存在时的文本
title：原生属性，设置鼠标悬停文本
v-on:click:vue给img标签新增的属性, 给元素绑定点击事件

1.2-v-html指令

v-html指令官方文档传送门：https://cn.vuejs.org/v2/api/#v-html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <p v-text="msg">张三</p>
        <p v-text="msg1">李四</p>
        <p v-html="msg1">王五</p>
    </div>
    <!-- 
         v-html 指令 
         作用： 设置元素的innerHTM
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我是xb!',
                msg1:'<h1>哈哈哈</h1>'
            }
        })
    </script>
</body>
</html>

1.3-v-on指令（绑定事件）

1.3.1- v-on基本使用

v-on指令官方文档传送门:https://cn.vuejs.org/v2/api/#v-on

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <button v-on:click="doClick">点我</button>
        <div class="box" v-on:mouseenter="doEnter" v-on:mouseleave="doLeave"></div>
        <hr>
        <div class="box" @mouseenter="doEnter" @mouseleave="doLeave"></div>
    </div>
    <!-- 
         v-on 指令
            a.作用： 给元素绑定事件
            b.语法： 
                标准语法：v-on:事件名 = "方法名"
                简洁语法：@事件名 = "方法名"
            c.注意点
                事件名就是原生事件名去掉on
                事件方法定义在vue实例的methods对象中
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {

            },
            //method:注册事件的方法名
            methods: {
                doClick() {
                    alert('我被点击了')
                },
                doEnter() {
                    console.log('鼠标移入我了')

                },
                doLeave() {
                    console.log('鼠标移出我了')
                }
            },
        })
    </script>
</body>

</html>

1.3.2- vue事件修饰符

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>

    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: #f00;
        }

        .son{

            width: 100px;
            height: 100px;
            background-color: #0f0;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <div class="father" @click.once="fatherClick">
            我是father
            <div class="son" @click.stop="sonClick">我是son</div>
        </div>

        <form action="http://www.itheima.com">
            <button @click.prevent="doSubmit">点我啊</button>
        </form>

        <!-- 输入框 ： enter键 -->
        <!-- <input type="text" @keyup.13="doUp"> -->
        <!-- 用enter,易读 -->
        <input type="text" @keyup.enter="doEnter">
    </div>
    <!-- 
        事件修饰符
            a.作用： 限定事件触发行为（例如阻止冒泡，阻止默认行为等）
            b.语法： @事件名.修饰符 = "方法名"
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {

            },
            //method:注册事件的方法名
            methods: {
                fatherClick () {
                    console.log('我是父元素');
                },
                sonClick () {
                    console.log('我是子元素');

                },
                doSubmit () {
                    console.log('提交按钮');
                },
                doEnter(){
                    console.log('按了enter键')
                }
            },
        })
    </script>
</body>

</html>

1.3.3- vue方法中的this

  • 1.vue事件方法中的this指向 ： vue实例

  • 2.vue事件方法中访问data对象中的成员 : this.属性名

    • vue会将data对象与methods对象中的成员 平铺到 vue实例中

  • 3.注意点： 如果事件处理代码没有写到methods中，而是写在行内则不需要this 就可以访问data对象中的成员

1.3.4- vue事件传参

1.vue中每一个事件方法都有一个默认参数 ， 就是事件对象

2.如果主动给事件传参，则传递的参数 会 覆盖默认参数

3.如果希望同时传入事件对象 + 自定义参数，则可以使用 $event 

       v-on:click="doClick($event,自定义参数)"

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        {{ msg }}
        <div class="box" @click="boxClick(10)"></div>
        <br>
        <span v-text="news.title"></span>
        <button @click="deleteClick(news.id)">删除</button>
        <button @click="editClick($event,news.id)">编辑</button>
    </div>

    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                msg: '我是zyx!',
                news:{
                    title:'嘟嘟嘟',
                    id:10
                }
            },
            methods: {
                /* 
                1.vue中每一个事件方法都有一个默认参数 ， 就是事件对象
                2.如果主动给事件传参，则传递的参数 会 覆盖默认参数
                3.如果希望 传递事件对象 + 自定义参数， 则可以使用 $event
                */
                boxClick(e){
                    console.log(e)
                },
                deleteClick(id){
                    console.log(`id为${id}的文章被删除`);
                },
                editClick(e,id){
                    console.log(e)
                    console.log(id)
                }
            },
        })
    </script>
</body>
</html>

1.4-v-bind指令 (绑定标准属性的值)

v-bind指令官网文档传送门：https://cn.vuejs.org/v2/api/#v-bind

      默认情况下，HTML标签原生属性无法获取vue中的数据

      如果希望原生属性也可以获取vue中的数据，就可以使用v-bind指令

1.4.1-v-bind指令基本使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <!--
            默认情况下，HTML标签原生属性无法获取vue中的数据 
            如果希望原生属性也可以获取vue中的数据，就可以使用v-bind指令
         -->
        <img v-bind:src="imagePath" v-bind:title="imageTitle"  alt="">
    </div>
    <!-- 
         v-bind 指令
        
            a.作用： 设置HTML标签原生属性的值
            b.语法： 
                标准语法：v-bind:原生属性名 = "属性值"
                简洁语法：:原生属性名 = "属性值"
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                imagePath:'./images/logo.png',
                imageTitle:'早早早'
            }
        })
    </script>
</body>

</html>

1.4.2-vue样式绑定

class与style样式绑定官方文档传送门：Class 与 Style 绑定 — Vue.js

v-bind 可以简写成 :

v-bind:class="{ '类名': bool, '类名': bool ......}"
如果值为true 该类样式就会被应用在元素身上, false则不会
注意点：如果类名有 - ，则需要使用引号包起来

1.5-v-for指令(列表渲染)

v-for指令官方文档传送门：列表渲染 — Vue.js

遍历数组语法：v-for="(value,index) in arr"

       value:数组元素

       index:数组下标

遍历对象语法：v-for="(value,key,index) in obj"

  • 该语法使用较少，了解即可

  • value:对象属性值

  • key:对象属性名

  • index:下标

1.6-v-model指令(双向数据绑定)

1.6.1-双向数据绑定基本使用

v-model指令官方文档传送们：https://cn.vuejs.org/v2/api/#v-model

`v-model只能用于表单元素!` `v-model只能用于表单元素!` `v-model只能用于表单元素!`

双向数据绑定

      表单元素的值进行了修改，这个变量的值也会跟着修改

      这个变量的值进行了修改，表单元素的值也会跟着修改

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
    <style>
        span{
            font-size: 20px;
            color: red;
        }
    </style>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <input type="text"  v-model="name">
        <p>我的名字是: <span>{{ name }}</span></p>
        <button @click="doClick">点我修改model</button>
    </div>
    <!-- 
        v-model 指令
            双向数据绑定
                a. 表单元素的值进行了修改，这个变量的值也会跟着修改
                b. 这个变量的值进行了修改，表单元素的值也会跟着修改

              v-model="变量名"
                a.   v-model只能用于表单元素
                b.   变量名要定义在data对象中
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                name:''
            },
            methods: {
                doClick(){
                    this.name = 'zzz'
                }
            },
        })
    </script>
</body>
</html>

1.6.2-双向数据绑定的意义

双向数据绑定的意义

可以让我们快速的得到表单元素的值

可以让我们快速的设置表单元素的值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        登陆框： <input type="text" v-model="username" placeholder="请输入用户名">
        <br>
        密码框： <input type="password" v-model="password" placeholder="请输入密码">
        <br>
        <button @click="loginClick">登录</button>
    </div>
   
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                username:'',
                password: ''
            },
            methods: {
                loginClick(){
                    //修改了表单元素 ->  修改了password
                    if(this.password != '123456'){
                        alert('密码错误，请重新输入')
                        //修改password  ->   修改了表单元素的值
                        this.password = ''
                    }
                }
            },
        })
    </script>
</body>
</html>

喜欢的可以点个赞哟!

ifreen
关注
electron-vue 入门
qq_36248539的博客
05-27 2140
electron-vue 简要介绍 vue只是在renderer进程里使用的框架，不涉及到main进程。如下图： 大体的项目结构如下，根据选择的不同设置结构会有所不同： my-project ├─ .electron-vue │ └─ <build/development>.js files ├─ build │ └─ icons/ ├─ dist │ ├─ electron/ │ └─ web/ ├─ node_modules/ # npm install ├─ src │ ├─
Vue 的 data 函数里的 this 用法
落叶无声的专栏
10-26 1万+
代码示例 const app = new Vue({ el: '#app', props: { id: { type: String, default: '10000' } }, data(vm) { console.log('data', this) // ==> #1. 当前 Vue 实例 console.log('data', vm) // ==> #2. 当前 Vue 实例 return { ne
vue基础 指令篇
shjd_J的博客
07-09 328
Vue.js 1.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架Vue是一个Vue是一个用于的框架Vue是一个用于构建用户界面得2.渐进式框架介绍a. Vue.js提供了很多的功能，但是这些功能并不是集成在一起的，而是分开的类似于Nodejs,拆分成很多个小模块b. 在项目中我们用到什么，就导入什么这样可以保证我们用到的最少c. 说人话：Vue相当于是一个五星级自助餐，我们想要用什么就拿什么，这样可以最大限度避免浪费资源(1)Vue是什么？js框架(2)Vue干什么用
Vue中data的this指向问题
热门推荐
qq_124917348的博客
08-11 1万+
最近在做自己的项目时遇到一个问题： export default { data(){ return{ id:this.$route.params.id, musicMessage:[], musiclist:{ title:null, ...
vue data中的this指向问题
s4944315的博客
09-15 3366
在data里定义Object类型的变量时，会发现Object中访问不到vue的this属性。 例如： export default { data(){ return { a: "123", b: { c: this.a } }; }, created() { console.log("b: ", this.b.c); // undefined } } 这种情况可以用到Object的get属性进行属性定义。
【Vue】不能在data里用this从data拿值
lklalmq的博客
02-20 796
sl-vue-tree-Vue.js的一个简单的可定制的可拖动树组件-Vue.js开发
05-27
快速入门sl-vue-tree组件，你需要在Vue实例中注册该组件，并在模板中使用。组件的属性（如数据源、默认展开节点等）可以通过props传递，而交互逻辑（如点击事件、拖放操作等）则可以通过监听事件或使用组件提供的...
uni-preset-vue-master uniapp项目模板
12-02
uni-preset-vue-master则是一个专为uni-app量身定制的项目模板，它旨在提供一个高效、便捷的开发起点，帮助开发者快速搭建项目，降低入门难度，提高开发效率。 uni-app是由H5开发者社区DCloud推出的开源框架，支持...
uni-preset-vue模板
12-24
- 在线课程：网络上也有不少uni-app相关的视频教程，适合初学者入门。 总的来说，uni-preset-vue模板为uni-app开发提供了便利，减少了项目初始化的复杂度，使得开发者能够更专注于业务实现，提高开发效率。通过...
laravel-sanctum-vue-spa:Laravel7-Sanctum-Vue SPA入门项目模板
05-24
Laravel-Sanctum-Vue SPA入门项目模板。 这个项目启发了 特征 Laravel 7.0与圣所 Vue + VueRouter + Vuex + VueI18n + ESlint 具有动态导入和自定义布局的页面 登录，注册，电子邮件验证和密码重置均在气闸中起...
Vue中的this.$options.data()和this.$data用法说明
11-20
问题 项目里遇到一个问题，用this.$options.data()重置组件data时，data()里用this获取的props或method都为undefined，代码简化如下： export default { props: { P: Object }, data () { return { A: { a: this.methodA }, B: this.P }; }, methods: { resetData () { // 更新时调用 Object.assign(thi
【Vue】this代表什么含义
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
05-19 3535
vuejs中this代表的含义：1、vue组件或者实例中，this代表调用它的Vue实例；2、回调函数中，this代表父级组件；3、箭头函数中，this代表定义它时所处的对象，即宿主对象。 Vuejs中的this变量 1 vue组件中 在Vue所有的生命周期钩子方法（如beforeCreate，created，beforeMount，mounted，beforeUpdate， updated，beforeDestroy以及destroyed）里使用this，this指代调用它的Vue实例，即（new V.
VUE data内 THIS 各种情况
weixin_30879833的博客
02-21 474
var vm = new Vue({ /* 在方法中，this 表示该方法所属的对象。 如果单独使用，this 表示全局对象。 在函数中，this 表示全局对象。 在函数中，在严格模式下，this 是未定义的(undefined)。 在事件中，this 表示接收事件的元素。 类似 cal...
【vue】this指向的问题，函数中获取不到data定义的变量
weixin_41747256的博客
12-29 965
ps：如果对象函数是箭头函数得话，那this会指向父级作用域。所以还可以有一种写法可以解决这个问题，比中间变量好。所以在函数的内部并没有声明hisDataList，this.hisDataList就会报错。对于vue的this指向问题，一直都是学了忘，忘了学。forEach函数里面获取不到data里面定义的变量。此时虽然可以根据报错解决问题，但是对于本质一知半解。查了些资料，这个的知识点应该是。今天完全是讨论记录贴。
为什么 Vue2 this 能够直接获取到 data 和 methods ? 源码揭秘！【文末留言送书】
u012384510的博客
08-19 924
大家好，我是若川。我倾力持续组织了两年多源码共读，感兴趣的可以加我微信lxchuan12参与。之前送过N次书，可以点此查看回馈粉丝，现在又和清华大学出版社合作再次争取了几本书，具体送书规则看文末。写相对很难的源码，耗费了自己的时间和精力，也没收获多少阅读点赞，其实是一件挺受打击的事情。从阅读量和读者受益方面来看，不能促进作者持续输出文章。所以转变思路，写一些相对通俗易懂的文章。其实源码也不是想...
Vue中避免滥用this去读取data中数据，疯狂涨知识
最新发布
m0_57541068的博客
04-10 303
在计算属性d中就存在滥用this去读取data数据。其中this.a是个数组，此时Dep.target的值为计算属性d这个依赖，在循环this.a中使用this去获取中abcef的数据，使这些数据进行一系列复杂的逻辑运算来重复地收集计算属性d这个依赖。导致获取计算属性d的值的速度变慢，从而产生性能问题。其中，举一个例子来说明一下渲染函数render是什么。例如template模板：{{a}}{{b}}通过vue-loader会生成渲染函数render，如下所示：attrs: {})其中。
vue源码分析 - 为什么通过this可以访问到data中的数据
记录点滴
01-30 2089
讲data之前，先来看下在new Vue() 时，发生了什么？ 当通过 import Vue from ‘vue’方式来引入vue，此时在new 之前 ，Vue的原型上已经挂载了许多初始化的属性及方法，通过 initMixin(Vue) stateMixin(Vue) eventsMixin(Vue) lifecycleMixin(Vue) renderMixin(Vue) 当我们new ...
Vue 入门基础知识
FellAsleep的博客
02-12 1026
01-Vue入门 学习Vue最好的方式：查看官网文档 https://cn.vuejs.org/ 1.1-Vue介绍 Vue介绍 描述 1.Vue是一个JavaScript框架 框架：别人写好的js文件 2.作用 ： 构建用户页面 将数据渲染到页面 3.特点：渐进式 组件式开发 1.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架 Vue是一个JavaScript框架 Vue是一个用于构建用户页面的框架 Vue是一个用于构建用
vue学习-vue入门
08-25
如果你想学习 Vue.js 并入门的话，以下是一些步骤和资源可以帮助你开始： 1. 首先，确保你已经安装了 Node.js。你可以在官方网站上下载并按照指示进行安装。 2. 之后，你可以使用 Vue 的官方脚手架工具 Vue CLI 来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值