初学Vue，及有哪些坑

Vue框架精要

最新推荐文章于 2025-09-17 12:27:06 发布

原创最新推荐文章于 2025-09-17 12:27:06 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #react

Vue：
轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；
**双向数据绑定：保留了angular的特点，**在数据操作方面更为简单；
组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；
运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。
坑：
1.淘宝镜像快，npm,cnpm都可能出问题，多试几次
2.组件必须由同一个父及，就是一个最大的div包着所有自己写的东西，最容易错

<template>
错误！！！！！h1在外面
  <div>
    <h1>meng</h1>
</div>

    <h1>props:{{id}}</h1>
</template>

<template>
<!--  所有元素都要有标签抱着-->
  <div>
  
    <h1>meng</h1>
    <h1>props:{{id}}</h1>
    
   </div>
</template>

3.组件名不能大写，用横线隔开，dom会转小写！！

错误示范！！！！！！！！！！Todo-title
<Todo-title slot="todo-title" v-bind:title="title"></todo-title>
 Vue.component('Todo-title',{
        props: ['title'],
        template: '<h3>{{title}}</h3>',

    })

先控制台下载：

npm install cnpm -g #淘宝镜像
cnpm install vue-cli -g

淘宝镜像快，npm,cnpm都可能出问题，多试几次

ElementUI

创建新项目：

vue init webpack vueElement01

名字随便

下面一路no,运行时构建自己搞

在这里插入图片描述

cd vueElement01

#安装router

cnpm install vue-router --save-dev

#安装element-ui

cnpm ielement -ui -s

#安装依赖

cnpm install

#安装SASS加载器

cnpm install sass-loder node-sass --save-dev

#上面SASS加载器不行就

npm install --save-dev sass-loader
#因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

#启动测试

cnpm run dev

下载时间几分钟，耐心等
在这里插入图片描述

这时我写的简单界面，新式的不用webpack，非要自己写启动配置类，类名必须是webpack.config.js，并且要在项目的根目录级别，他不可在src里面如下
在这里插入图片描述
继续：
父组件向子组件传递数据，用prpos
下面 props:[“mzh”],对应v-bind:mzh="item"

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view-->
<div id="app">
<!--父子组件传值，mzh用props接,用也是mzh-->
<meng v-for="item in items" v-bind:mzh="item"></meng>

</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    Vue.component("meng", {
        props:["mzh"],
        template: '<li>{{mzh}}</li>'
    });

    //上下传值，最上面的是中间商
    var vm=new Vue({
        el:"#app",
        //model
        data:{
            items:["A","B","C"]
        }
    });
</script>
</html>

子组件向父组件传递事件，this.$emit(‘remove123’,index);
绑定时，v-on:remove123，你看子组件接收的 props:[‘item’,‘index’],可以获取当前index，实际调用父组件的removeItem，执行操作

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items"
                    v-bind:item="item"
                    @index="index" v-on:remove123="removeItem(index)" v-bind:key="index"></todo-items>
    </todo>
</div>


</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    Vue.component('todo',{
        template: "    <div>\n" +
            "               <slot name='todo-title'></slot>\n" +
            "               <ul>\n" +
            "                   <slot name='todo-items'></slot>\n" +
            "               </ul>\n" +
            "          </div>"
    })
    Vue.component('todo-title',{
        props: ['title'],
        template: '<h3>{{title}}</h3>',

    })
    //子组件
    Vue.component('todo-items',{
        props:['item','index'],
        template: '<li>{{index}}-------{{item}}   <button @click="remove">删除</button></li>',
        methods: {
            remove:function(index) {
				//子组件方法，和上面的v-on对应
                this.$emit('remove123',index);
            }
        }
    })
    var vm=new Vue({
        el: "#app",
        data:{
            title:"动态列表",
            items:["java","spring","mybatis","springboot"]
        },
        methods:{
            removeItem:function (index) {
                console.log(this.items[index]);
                this.items.splice(index,1);
            }
        }
    })
</script>
</html>