Vue基础

最新推荐文章于 2023-08-23 14:36:51 发布
最新推荐文章于 2023-08-23 14:36:51 发布
阅读量465 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45988641/article/details/103774281
版权

Vue基础

一、VUE

  • 开源的基于MVC、MVVM模式的Javascript框架
  • 开源:开放源代码
  • MVC：Model(模型),View(视图),Controller(控制器)
  • MVVM: Model(模型),View(视图),VM(视图模型合体)是监听器,数组绑定 -> 双向绑定

https://note.youdao.com/yws/public/resource/69c44ce4623f3e85a39ba16979d62ba2/9137DE7859914CD1A5E54D39B6ECCF75/18AF7FBB370B44BB96E85CA7B9BEDC0D?ynotemdtimestamp=1577694843833

二、NodeJS&NPM

  • NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架（包括Jquery、Angular、Vue）
  • Idea支持nodejs需要安装插件

在这里插入图片描述

1.查看node版本命令：node -v

2.查看npm版本命令：npm -v

3.升级npm版本命令：npm install npm@latest -g

NPM常用命令：

  • 初始化（相当于建了一个maven工程）：npm init -y

  • 安装模块：

    • 全局安装(所有项目都能用)

      ​ npm install -g vue

    ​ npm -g root 安装路径

    • 局部安装(当前项目使用）

      ​ npm install vue或者npm i vue

  • 查看模块：

    • 查看某个模块

      ​ npm list vue

    • 列表模块

      ​ npm ls

  • 卸载模块：npm uninstall vue

  • 更新模块：npm update vue

  • 运行工程：npm run dev或者npm run test或者npm run online

  • 编译工程：npm run build

三、ECMAScript6

  • ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范，是浏览器脚本语言的规范
  • ECMAScript6是javascript用的最多语言规范

新特性：

1.申明变量

（1）let

相同点：申明变量

不同点： let是申明块级的变量（简单理解就是在某个代码块中生效，离开该代码块就没有效果了）

<script type="text/javascript">
    var a = 1;
    let b = 2;
    console.debug(a, b);
    for(let i=0;i<5;i++){
        console.debug(i);
    }
    //console.debug("i=", i);//ReferenceError: i is not defined
</script>

（2）const

相同点：申明变量

不同点： 声明常量，一旦赋值之后该值是不能被更改的

<script type="text/javascript">
    const c = 3;
    //c = 4;// invalid assignment to const `c'
    console.debug(c);
</script>
2.解构表达式

（1）数组解构

<script type="text/javascript">
    let arr = ["A", "B", "C"];
    //解构数组
    let [a, b,c] = arr;
    console.debug(a,b,c);//a,b,c和A,B,C一一对应
</script>

（2）对象解构

<script type="text/javascript">
    //解构对象：方法1
    var p = {
        name:"金木研",
        age:14,
        sex:true
    }
    function show({name,age,sex}){
        console.debug(name, age, sex);
    }
    //调用函数（把对象作为参数进行传递）
    show(p);

    //解构对象：方法2
    var {name, age, sex} = p;
    console.debug(name, age, sex);
</script>
3.箭头函数

语法：

  • 参数只有一个可以省略()
  • 函数内容只有一句代码可以省略{}
var 函数名 = (参数列表) => {函数内容}
var 函数名 = function(参数列表){
	函数内容
}

<script type="text/javascript">
    var p = {
        name:"金木研",
        age:14,
        //以前申明函数的方式
        show:function(msg){
            console.debug(this.name + "   " + this.age);
        },
        /*箭头函数this是属于当前创建环境this是一致的
          如果箭头函数外面还有函数，那箭头函数的this是和外层函数this一致，如果外层没有函数，该this就是window*/
        show2:(msg)=>{
            console.debug(p.name +"   " + p.age);
        },
        //简写
        show3(msg){
            console.debug(this.name + "   " + this.age);
        }
    }
    p.show();
    p.show2();
    p.show3();
</script>
4.Promise对象
  • 异步编程的一种解决方案
<script type="text/javascript">
    const p = new Promise((resolve, reject) =>{
        //用定时任务模拟异步
        const num = Math.random();
        // 随机返回成功或失败
        if (num < 0.5) {
            resolve("成功！num:" + num)
        } else {
            reject("失败！num:" + num)
        }
    },1000)

    // 调用promise
    p.then(function (msg) {//如果调用成功执行该function函数中的内容
        console.log(msg);
    }).catch(function (msg) {//如果调用失败执行cat代码块中的内容提供
        console.log(msg);
    })
</script>
5.模块化

  • 是一种思想

  • 把代码进行拆分，方便重复利用

  • export命令用于规定模块的对外接口

    import命令用于导入其他模块提供的功能

  • 浏览器目前不能直接解析运行ES6的导入和导出功能。除非借助于工具，把ES6 的语法进行编译降级到ES5

    比如：Babel-cli工具

四、使用Vue三步曲

  1. 引入Vue.js
  2. 准备被挂载的元素
  3. JS完成挂载
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <!-- 引入vue的js文件:有vue的功能支持 -->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!--准备一个div，用做和vue产生关系-->
    <div id="app">
        <span style="color: pink">{{msg}}</span><br/>
        {{msg}}<br/>
        {{person}}<br/>
        {{person.name}}<br/>
        {{person.sex}}<br/>
        {{sayHello()}}<br/>
    </div>
</body>
<!--写js ：让准备的div和vue产生关系-->
<script type="text/javascript">
    var vue = new Vue({
        /*el：申明挂载的视图*/
        el:"#app",
        /*准备的数据*/
        data:{
            msg:"喰种",
            person:{
                name:"金木研",
                sex:true
            },
            sayHello(){
                return "emmmm.......";
            }
        }
    });
</script>
</html>

五、Vue的重要元素

（一）Vue实例挂载el

  • el是用于完成挂载功能

  • 挂载可以使用id,class,标签

    • id挂载:el:"#id"

      class挂载：el:".class"

    • 不管使用哪些方式都只能挂载一个

    • 建议使用id进行挂载

  • 只有挂载成功的元素，才能使用vue的功能(表达式等)

<body>
    <div id="app" class="app">
        {{msg}}<!--el-->
    </div>
    <div class="app">
        {{msg}}<!--{{msg}}-->
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:".app",
        data:{
            msg:"el"
        }
    });
</script>

（二）Vue中的数据data

  • Vue实例的数据保存在配置属性data中
  • data自身也是一个对象
  • 获取数据有两种方式
    • 直接在js中获取/设计
    • 在表达式中来获取
  • 通过Vue实例直接访问和修改data对象中的数据会及时同步的页面上
<body>
    <div id="app">
        {{msg}}<br/>
        {{person.name}}<br/>
        {{person.age}}<br/>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"喰种",
            person:{
                name:"金木研",
                age:14
            }
        }
    });
    alert(vue.person.name);/*金木研*/
    //当数据发生变化后,表达式中的数据也会同时变化
    vue.person.name = "独眼";
    alert(vue.person.name);/*独眼*/
</script>

（三）Vue中的方法methods

  • Vue实例的方法保存在配置属性methods中
  • methods自身也是一个对象
  • 调用方法的位置
    • 在js中直接调用
    • 可以用表达式调用
  • 可以直接使用this获取到data中的数据
<body>
    <div id="app">
        {{sayHello1("A")}}<br/>
        {{sayHello2()}}<br/>
    </div>
</body>
<script type="text/javascript">
    /* methods:当前vue实例中所有的方法都放在methods中*/
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"方法",
            name:"猪皮",
            sex:true
        },
        methods:{
            sayHello1(msg){
                alert(msg);
                return "emmmm.....";
            },
            sayHello2(){
                return "姓名：" + this.name + "  性别：" + this.sex;
            }
        }
    });
    console.debug(vue.sayHello1());//undefined
</script>

六、Vue表达式

  • Vue表达式写在双大括号内：{{ expression }}
  • Vue表达式把数据绑定到 HTML
  • Vue将在表达式书写的位置"输出"数据
  • Vue表达式很像JavaScript表达式：它们可以包含文字、运算符和变量

1.简单表达式

  • 在{{ }}中可以进行简单的运算
<body>
    <div id="app">
       {{num1}}+{{num2}}={{num1+num2}}<br/><!--10+3=13-->
        {{num1}}-{{num2}}={{num1-num2}}<br/><!--10-3=7-->
        {{num1}}*{{num2}}={{num1*num2}}<br/><!--10*3=30-->
        {{num1}}/{{num2}}={{num1/num2}}<br/><!--10/3=3.3333333333333335-->
        {{num1}}%{{num2}}={{num1%num2}}<br/><!--10%3=1-->
        num1+num2={{num1+num2}}<br/><!--num1+num2=13-->
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            num1:10,
            num2:3,
        }
    });
</script>

2.三目操作符

<body>
    <div id="app">
     	<!--   vue三目运算中    表示false的值：  0 null  NaN  undefined   false  ""  
			其它值全部为true-->
        {{sex?"男":"女"}}<!--女-->
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            sex:0,
        }
    });
</script>

3.字符串操作

<body>
    <div id="app">
        {{str}}<br/><!--tongyao-->
        {{str.length}}<br/><!--7-->
        {{str.substring(2,5)}}<br/><!--ngy-->
        {{str.substr(1,2).toUpperCase()}}<br/><!--ON-->
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           str:"tongyao"
        }
    });
</script>

4.对象操作

<body>
    <div id="app">
        {{person}}<br/>
        {{person.name}}<br/>
        {{person.sex}}<br/>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            person:{
                name:"金木研",
                sex:true
            }
        }
    });
</script>

5.数组操作

<body>
    <div id="app">
        {{hobbys}}<br/>
        {{hobbys[0]}}<br/>
        {{hobbys.length}}<br/>
        {{hobbys.toString()}}<br/>
        {{hobbys.join("      ")}}<br/>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
			hobbys:["动漫","猫",'狗']
        }
    });
</script>

七、Vue指令

指令名称指令作用备注
v-html显示与解析HTML代码
v-text原封不动的展示
v-for遍历与循环功能遍历数字，字符串,对象,数组
v-bind绑定属性简单形式 :属性名=“值”
v-model数据双向绑定只支持input,select,textarea
v-if判断v-if/v-else-if/v-else
v-on绑定事件简写 @事件名=方法名()
v-show显示与隐藏隐藏只是样式:style=“display=none”

1.v-html与v-text

  • html会解析HTML标签(相当:innerHTML)
  • text不会解析HTML标签(相当:innerText)
    在这里插入图片描述
<body>
    <div id="app">
        <div v-text="text">
            A
        </div>
        <div v-html="html">
            B
        </div>
    </div>
</body>
<script type="text/javascript">
    /*
    v-text：在指定的标签进行设置值，如果设置的代码有html代码，会覆盖原来内容当成一个纯文本进行展示
    类似于js中的innerText

     v-html：在指定的标签进行设置值，如果设置的代码有html代码，会覆盖原来内容被浏览器所解析
    类似于js中的innerHTML
    */
    var vue = new Vue({
        el:"#app",
        data:{
           text:"<h1>测试text</h1>",
           html:"<h2>测试html</h2>"
        }
    });
</script>

2.v-for

  • 遍历数据(数字,字符串,对象,集合)

  • 数字就是普通的循环 for(var i=1;i<=数字;i++)

  • 字符串是拿到每一个字母

  • 对象循环

    <span v-for="(v,k,i) in 对象"></span>

    • v:代表对象的属性值
    • k:代表对象的属性名
    • i:代表索引

  • 数组循环

    <span v-for="(v,i) in 数组"></span>

    • v:代表对象的属性值
    • i:代表索引

语法:

<标签 v-for="元素 in 数据源"></标签>
  数据源:   数组,
    元素:   数组中的一个元素,
    
  数据源:   对象,
    元素:   对象中的一个属性名,

<标签 v-for="(元素,索引) in 数据源"></标签>

    当数据源是数组时,  ()的第二个参数值索引
    当数据源是对象时,  ()的第二个参数值键
    
<标签 v-for="(元素,键,索引) in 对象"></标签>

在这里插入图片描述

<body>
    <div id="app">
        <!--遍历数字 for(var i=1;i<=5;i++)-->
        <ul>
            <li v-for="v in num">{{v}}</li>
        </ul>

        <!--遍历字符串:拿到字符串中的每一个值-->
        <ul>
            <li v-for="v in str">{{v}}</li>
        </ul>

        <!--
            遍历对象
                (v) 如果只写一个值,只获取value的值
                (v,k) v:是value的值，k:是key(属性)
                (v,k,i) v:是value的值，k:是key(属性) ,i：索引
        -->
        <ul>
            <li v-for="(v,k,i) in person">{{k}} - {{v}} -{{i}}</li>
        </ul>

        <!--遍历数组
            (v,i) ： v:当前的数据值  i:当前遍历索引
        -->
        <ul>
            <li v-for="(v,i) in hobbys">{{v}}==={{i}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    /**
     * 在vue中循环迭代支持的元素：
     *      数字  字符串  对象  数组
     */
    var vue = new Vue({
        el:"#app",
        data:{
            num:5,
            str:"tong",
            person:{
                name:"金木研",
                age:14,
            },
            hobbys:["吃饭","睡觉","打豆豆"]
        }
    })
</script>

3.v-bind

  • bind主要是用于绑定相应的属性 <标签 v-bind:属性名="属性值">
  • bind有一种简写形式 <标签 :属性名="属性值">
  • 如果直接把整个对象进行属性绑定 <标签 v-bind="对象">

语法:

<标签 v-bind:标签属性名字="表达式"></标签>

简写形式:

<标签 :标签属性名字="表达式"></标签>

	为一个标签绑定一个对象作为该标签的多个属性

<标签 v-bind="对象"></标签>


<body>
    <div id="app">
       <!-- 最原生的方式来获取图片-->
        <img src="imgs/1.jpeg" width="100">

        <!--使用v-bind的方式来取图片  方式1-->
        <img v-bind:src="src" v-bind:width="width">

        <!--使用v-bind的方式来取图片（简写方式）  方式2-->
        <img :src="src" :width="width">

        <!--使用v-bind的方式来取图片（简写方式 直接绑定对象）  方式3-->
        <img v-bind="options">
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            src:"imgs/1.jpeg",
            width:200,
            options:{
                src:"imgs/1.jpeg",
                width:300,
            }
        }
    });
</script>

4.v-model

  • 主要是用于完成双向的绑定
  • 支持的标签:<input>,<select>,<textarea>

在这里插入图片描述

<body>
    <div id="app">

        <!--绑定到type=text的input表单元素-->
        <input type="text" v-model="username"><br/>
        {{username}}
        <hr>

        <!--绑定到type=checkbox的input表单元素-->
        爱好：
        <input type="checkbox" v-model="hobbys" value="lq">篮球
        <input type="checkbox" v-model="hobbys"  value="zq">足球
        <input type="checkbox" v-model="hobbys"  value="pq">排球<br/>
        {{hobbys}}
        <hr>

        <!--绑定到type=radio的input表单元素-->
        性别：
        <input type="radio" v-model="sex" value="1">男
        <input type="radio" v-model="sex" value="0">女<br/>
        {{sex}}
        <hr>

        <!--绑定到单选的select的元素-->
        国家：
        <select v-model="country">
            <option value="-1">-- 请选择 --</option>
            <option value="ch">中国</option>
            <option value="us">美国</option>
            <option value="jp">日本</option>
        </select>
        <br/>
        {{country}}
        <hr>

        <!--绑定到textarea的元素-->
        <textarea v-model="intro" rows="5" cols="20"></textarea><br/>
        {{intro}}

    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            username:"用户名",
            hobbys:["lq"],
            sex:1,
            country:"-1",
            intro:"我叫某某某"
        }
    });
</script>

5.v-if

  • v-if根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定或组件 被销毁或者重建
  • v-else-if是需要赋值的，必须与v-if搭配起来使用
  • v-else是一个单独的属性是不需要赋值的，必须也v-if搭配起来使用
<body>
    <div id="app">
        <!--如果满足条件，页面会显示-->
        <span style="color: darkslateblue;" v-if="age>60&&age<=100">老年人啦</span>
        <span style="color: orangered;" v-else-if="age>30&&age<=60">中年啦</span>
        <span style="color: peru;" v-else-if="age>16&&age<=30">长大啦</span>
        <span style="color: rosybrown;" v-else-if="age>=0&&age<=16">成长阶段</span>
        <span style="color: burlywood;" v-else>非正常年龄</span>
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           age:19
        }
    });
</script>

6.v-on

  • 事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
  • 写表达式或者触发的函数
  • 调用的方法可以不加()
  • v-on有一种简写形式 <标签 @事件名=方法名>
<body>
    <div id="app">

        <!--完整写法-->
        <input type="button" v-on:click="num++" value="按钮">
        {{num}}
        <input type="button" @click="show('咻~')" value="按钮2">
        <hr/>
        <input type="button" @mouseover="over" @mouseout="out" value="移进移出">
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           num:0
        },
        methods:{
            show(msg){
                alert("emmm...."+msg);
            },
            over(){
                console.debug("移进")
            },
            out(){
                console.debug("移出")
            }
        }
    });
</script>

7.v-show

  • v-show用于展示和隐藏 <标签 v-show="true/false">
  • 当v-show的值为false时, 会在标签的css中添加 display:none
<body>
    <div id="app" >
        <div v-show="isShow">咻~</div>
        <input type="button" @click="show" value="显示和隐藏">
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            show(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>
EstherLty
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
const,let,var
易碎的_骄傲着
07-11 182
const,let,var都可以用来声明变量
前端工作小结78-点击按钮报错
qq_41632427的博客
09-03 102
总结
ERROR: Invalid assignment target：v-model中使用可选链操作符报错。
最新发布
youyudehan的博客
08-23 1740
v-model中使用可选链操作符报错：ERROR: Invalid assignment target
invalid array assignment什么意思_你为什么看不懂源码之Vue 3.0
weixin_39876856的博客
01-02 1456
先唠会儿嗑记得很早之前，有个人说过，看源码就像武侠小说里的 学习武林秘籍。会耍刀耍剑那是外力，学习武功秘籍才是内力，才能和别人在对波或战前拼气时更升一筹。在实际开发中，想象这样一个场景：小A：我这儿遇到一个bug，不知道是不是浏览器兼容？也可能是网络问题？会不会是框架问题！你：（轻蔑的一瞥），这块儿呀，我之前撸过它的源码，是XX导致了XX，让你这块儿代码产生了XX的影响。（讲完后背着手头也不回的去...
ES6极简入门指南
Java技术工坊
09-25 279
ES6自学可参考 http://es6.ruanyifeng.com/ 一、ECMAScript 6 简介 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 1. ECMAScript 和 JavaScript 的关系 要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司
Vue基础1
01-07
基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的...
vue基础知识-菜鸟入门
01-03
vue基础
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基础项目
09-11
本资源是vue项目基本需要用到的依赖，有axios、babel-polyfill、jquery、vue-wechat-title、sass-loader、url-search-params-polyfill等
webpack打包时中遇到的问题
qq_34183451的博客
11-26 671
在进行打包时遇到如下问题： ERROR in static/js/1.cfcab24bbc3a028f94bf.js from UglifyJs Invalid assignment [./~/@antv/g6/build/g6.js:9,98863][static/js/1.cfcab24bbc3a028f94bf.js:17729,98914 ERROR in static/js/23.1c...
vue3.2关于“TypeError: Assignment to constant variable”的问题解决方案
qq_50883920的博客
09-02 9624
vue3.2关于“TypeError: Assignment to constant variable”的问题解决方案
VUE编辑弹框赋值错误
lmy_loveF的博客
03-31 359
VUE编辑弹框赋值错误 文章目录VUE编辑弹框赋值错误前言一、为什么会出现这个问题？二、解决方式总结 前言 提示：VUE页面点击编辑弹框，展示上一次编辑时候的数据 提示：以下是本篇文章正文内容 一、为什么会出现这个问题？ VUE双向绑定 二、解决方式 深度拷贝： var data= JSON.parse(JSON.stringify(this.model)) 。 总结 每天进步一点点 ...
ES6_var、let与const
weixin_33862041的博客
02-15 135
var，let 与 const var 申明变量。 let 申明变量，更完美的 var。 const 申明常量（物理指针不可以更改的变量）。 在新的 javascript 规范 ES6 中，新增了 let 和 const 命令，let 用来声明变量，const 用来声明常量，用法类似于 var，但不同的是 let/const 所声明的变量/常量，只在当前代码块内有效。 什么是代码块？可以简...
Vue常见报错整理 （从此报错不害怕）
热门推荐
nnjjn的博客
03-23 1万+
整理一下Vue中一些常见的报错和bug，以及解决办法 示例1（文件名/路径发生错误） Compiled with problems:———编译问题： ERROR in ./src/router/index.ts 10:19-57 错误发生在 ./src/router/index.ts 第10行第19个字符到57字符 Module not found: Error: Can't resolve '../views/admin/AdminVeiw.vue' in 'C:\myel\src\..
VITE + VUE3 项目,突然报 Invalid left-hand side in assignment 错误
wwf1225的博客
12-08 1019
基本都是打包配置的问题，注释掉没用的打包配置，vue.config.js 里面的打包配置，
vue3常见错误和解决方法
weixin_57180500的博客
03-23 3656
错误1： Compiled with problems: 编译问题 C:\myel\src\views\HomeView.vue 错误出现文件 3:1 error Mixed spaces and tabs no-mixed-spaces-and-tabs 4:1 error Mixed spaces and tabs no-mixed-spaces-and-tabs 第3行的第一个字符 第4函的第一个字符 Mixed spaces and tabs 错误原因：混合的空格与tab no-
【Vue3】报错处理合集
Qxn530的博客
09-14 3224
Vue3遇到的报错合集
60个Vue常见问题汇总及解决方案
web前端开发
12-02 2782
来源 |https://www.fly63.com/Q1：安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本 /* cnpm website: ...
Vue基础、vue实战
05-17
Vue是一种流行的JavaScript框架，用于构建交互式Web应用程序。它非常易于学习和使用，并且有许多强大的功能，使其成为Web开发人员的首选框架之一。 以下是Vue的基础知识： 1. 数据绑定：Vue使用双向数据绑定来实现视图和数据的同步更新。 2. 组件化：Vue允许开发人员将应用程序拆分成多个可重用的组件。 3. 指令：Vue提供了一系列指令，用于操作DOM元素的属性和事件。 4. 生命周期钩子函数：Vue提供了许多生命周期钩子函数，使开发人员能够在组件的不同阶段执行自定义逻辑。 Vue实战包括以下内容： 1. 创建一个Vue应用程序 2. 使用Vue组件化开发 3. 使用Vue指令操作DOM元素 4. 使用Vue路由实现单页应用程序 5. 使用Vue和Axios实现数据请求和响应 6. 使用Vue和Vuex实现状态管理 7. 使用Vue和Webpack实现项目构建和打包 8. 使用Vue和ElementUI实现UI组件的开发 总之，Vue是一个非常强大且易于使用的JavaScript框架，可以帮助开发人员快速构建交互式Web应用程序。Vue实战是一个非常好的学习Vue的方式，可以帮助开发人员了解如何实现实际项目中的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值