vue的介绍与学习

最新推荐文章于 2023-09-16 16:53:49 发布
最新推荐文章于 2023-09-16 16:53:49 发布
阅读量390 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45526725/article/details/110507398
版权

Vue

html+css+js

vue是JavaScript的框架

简化了dom操作

网络通信：axios

页面跳转：vue-router

状态管理：vuex

vue-ui：ICE

ES6语法

let和var

let可以看成更完美的var

var的作用域没有限制，导致使用var变量时数值不准确（例如for循环中i直接会遍历到最大值），使用函数闭包可以解决这个问题，因为函数有作用域。

ES5之前因为if和for都没有块级作用域的概念，所以很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题

而ES6中加入了let，let它是由if和for的块级作用域

const

在js中，使用const修饰的标识符为常量，不可以再次赋值

当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性

使用const必须赋值

如果const修饰的是对象，则不能修改它的指向，可以修改它的属性

vue基础

第一个vue程序

实现了双向绑定，所有都是响应式的，不用刷新页面就可以做。

vue不用jsp，直接在html上，引入vue.js后在script里写响应式代码即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            message: "hello,vue!"
        }
    });
    
</script>
</body>
</html>

总结：

  1. 导入开发版本的vue.js
  2. 创建vue实例对象，就是script中的new Vue，设置el属性和data属性
  3. 使用简洁的模板语法把数据渲染到页面上

el挂载点

vue实例的作用范围是什么？

​ 在el元素标签的内部都可以使用

是否可以使用其他的选择器？如类选择器。

​ 可以，尽量使用id选择器。

是否可以设置其他的dom元素？除了div。

都支持，要双标签，但是不能是html，和body上

data数据对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{message}}
    <h2>{{school.name}}</h2>
    <h2>{{school.mobile}}</h2>
    <ul>
        <li>{{campus[0]}}</li>
        <li>{{campus[1]}}</li>
        <li>{{campus[2]}}</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hhhhh",
            school: {
                name: "黑马",
                mobile: "1111111"
            },
            campus: ["北京校区","福建校区","南昌校区","年末校区"]
        }
    })
</script>
</body>
</html>

data中的数据按照代码中的实例来取。

总结：

  1. vue中用到的数据定义在data中
  2. data中可以写复杂类型的数据
  3. 渲染复杂类型数据时，遵守js的语法即可

vue基础指令

v-text指令

​ 总结：

  1. v-text指令的作用是设置标签的内容(textContent)
  2. 默认写法替换全部内容，使用差值表达式{{}}可以替换指定内容
  3. 在绑定了v-text标签中，在去写内容已经被绑定的全部替换掉了。所以要是想实现灵活的还是要用差值。

<div id="app">
    <h2 v-text="message">深证</h2>//这里的深证不显示了
    <h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "sssssss",
            info: "前端"
        }
    })
</script>
</html>

v-html指令

​ 总结：

  1. v-html指令的作用是设置元素的innerHTML
  2. 内容中有html结构会被解析为标签
  3. v-text指令无论内容是什么，只会解析为文本
<body>
    <div id="app">
        <h2 v-text="message"></h2>
        <h2 v-html="message"></h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "<a href='www.baidu.com'>ssss</a>"
        }
    })
</script>

主要在data中的a标签，因为外层用了双引，所以href处用单引！

v-on指令

dom属性说的就是html的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        
        <h2 @click="changeFood">{{message}}</h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "稀烂"
        },
        methods: {
            doit:function(){
                alert("dddd")
            },
            changeFood:function(){
                console.log(this.message)
            }

        }
    })
</script>
</html>

总结：v-on也可以绑定参数，也可以用事件修饰符

  1. v-on指令的作用就是为元素绑定事件，或者简写为@。例：**v-on:click=“fff”**这里click是事件类型，双引号里面的才是事件名称！
  2. 事件名不需要写on
  3. 绑定的方法定义在methods属性中
  4. 方法内部通过this关键字可以访问定义在data中的数据

补充总结：

  1. 事件绑定的方法写成函数调用的形式，可以传入自定义参数
  2. 定义方法时需要定义形参来接收传入的实参
  3. 事件的后面跟上.修饰符可以对事件进行限制，如.enter可以限制触发的按键为回车键
  4. 事件修饰符有很多种，去百度把！

在事件定义时，使用方法时省略了小括号，但是定义的方法本身是需要一个参数的，这个时候，vue会默认将浏览器生产的event事件对象作为参数传入到方法。

<button @click="btn">按钮</button>
btn:function(event){
	console.log(event);
}

如果又有参数，又要有event事件的话

<button @click="btn('ddd',$event)">按钮</button>
btn:function(abc,event){
	console.log(event);
}

如果代码中的’ddd’没有单引号，则回去data里面找变量。$event就解决了绑定到浏览器获取事件上

v-on修饰符

出现冒泡现象

<div @click="divClick">
        aaaaaa
        <button @click.stop="btnClick">按钮</button>
</div>

如果按照上面的代码，不加入stop，那么点击按钮，则div中的事件也会发生，加上后则只会触发button里面的事件

计数器

this.数据属性 就是取到data中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="sub">
            -
        </button>
        <span>{{num}}</span>
        <button @click="add">
            +
        </button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            add:function(){
                if(this.num<10){
                    this.num++;
                }else{
                    alert("我要爆了");
                }
            },
            sub:function(){
                if(this.num>0){
                    this.num--;
                }else{
                    alert("我不行了");
                }
            }
        }
    })
</script>
</html>

v-show

当v-show里面的值是true的时候，相关绑定元素才显示，这个不是绑定方法了，和v-text这种一样，绑定的只是元素，但这个只有true和false两种值

本质是display的有否

总结：

  1. v-show指令的作用是：根据真假切换元素的显示状态
  2. 原理是修改元素的display来实现显示和隐藏
  3. 指令后面的内容最终都会解析为布尔值
  4. 值为true显示，值为false隐藏
<body>
    <div id="app">
        <img src="https://i0.hdslb.com/bfs/face/64c1dcd3e98a6976bf0e59ac9e7eaafa35b033a9.jpg@96w_96h_1c.webp" alt="" v-show="isShow">
        <button @click="changeIsShow">222</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isShow: false
        },
        methods: {
            changeIsShow:function(){
                this.isShow = !this.isShow
            }
        }
    })
</script>

这里直接一个！取反，我学到了！

v-if v-else

​ 这个功能和v-show一样，不过这个的本质是操作dom元素

总结：

  1. v-if指令的作用是：根据表达式的真假切换元素的显示状态
  2. 本质是通过操纵dom元素来切换显示状态
  3. 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
  4. 频繁的切换用v-show，反之使用v-if，前者切换的消耗较小，毕竟只改了css元素。

v-else就是当v-if不正确的时候执行的

在v-if作用中，input中会出现复用问题，原因时vue底层的虚拟dom

即两个id不同的输入框，在输入一些值后，切换后不会清空，而会保留。

解决方法：在input中加个key，作为唯一标识符，如果两个key不一样，则不会复用。

v-bind

这个绑定的是属性，也就是比如img中的src，title，class等


<style>
    .active{
        border: 1px solid red;
    }
</style>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActiv}" @click="changeIsShow">
        <br>

    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            imgSrc: "https://i0.hdslb.com/bfs/face/64c1dcd3e98a6976bf0e59ac9e7eaafa35b033a9.jpg@96w_96h_1c.webp",
            imgTitle: "HEIMA",
            isActiv: false
        },
        methods: {
            changeIsShow:function(){
                this.isActiv = !this.isActiv
            }
        }
    })
</script>

一定要注意，这里的class选择使用对象的方式的话，对象在前，判断在后，就如这里的{active:isActiv}

总结：

  1. v-bind指令的作用是为元素绑定属性
  2. 完整的写法v-bind:属性名，简写就 :属性名
  3. 需要动态的增删class，建议使用对象的方式

v-bind动态绑定style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <h2 :style="{fontSize:'50px'}">{{message}}</h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "54545"
        },
        methods: {
        }
    })
</script>
</html>

第一种用类属性名的形式，一定是驼峰命名！

:style="{fontSize:‘50px’}">{{message}}

而且参数如果是常量参数，那要加单引。

要动态绑定多个样式，则可以使用函数方法来组合。

应该的是要在data里面加变量来动态，后面好像还有props傻了。

图片切换v-bind数组语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="sub" v-show="index!=0">-</button>
        <img :src="imgArr[index]" alt="">
        <button @click="add" v-show="index<imgArr.length-1">+</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            index: 0,
            imgArr: [
                "./lucy美照.jpeg",
                "./1.jpg",
                "./2.jpg"
            ]
        },
        methods: {
            sub:function(){
                this.index--;
            },
            add:function(){
                this.index++;
            }
        }
    })
</script>
</html>

这里的逻辑和计数器没什么区别，加了一个v-show，是否隐藏按钮

总结：列表的数据使用数组保存

v-for

这个就像foreach一样

在v-for绑定中 是item in 数据，也可以结合其他指令使用

push()，添加，这是js的用法

pop(),最后一个元素删除

shift()删除最左边的第一个元素

unshift()，在数组最前面添加元素

splice(),删除、插入、替换元素

sort()排序

reverse()反转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">
                {{index}}、{{item}}
            </li>
        </ul>
        <ul>
            <li v-for="item in vs" :title="item.name">
                {{item.name}}
            </li>
        </ul>
        <button @click="add">+</button>
        <button @click="sub">-</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            arr: ["北京","到底","嗯嗯","上回"],
            vs: [
                {name: "dd"},
                {name: "er"}      
            ]          
        },
        methods: {
            add:function(){
                this.vs.push({name:"gt"})
            },
            sub:function(){
                this.vs.shift();
            }
        }
    })
</script>
</html>

这里面，item，index要联合绑定时使用括号！

绑定对象数组的时候，是用对象.属性名

总结：

  1. v-for指令的作用是：根据数据生成列表结构
  2. 数组经常和v-for结合使用
  3. 语法是（item，index） in 数据
  4. item和index 可以改名，然后可以结合其他指令一起使用
  5. 数组长度的更新会同步到页面上，是响应式的

获取key和value也是一样，

v-for="(value,key) in info"

这就是把info中的key和value取出了，要用就{{key}}{{value}}

v-for中使用key，会增强虚拟dom的效率

v-model

用于表单元素，双向数据绑定！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: " "
        },
        methods: {
        }
    })
</script>
</html>

总结：

  1. v-model指令的作用是便捷的设置和获取表单元素的值
  2. 绑定的数据 和表单元素的值双向绑定

v-model其实是一个语法糖，原理：

  1. v-bind绑定一个value属性
  2. v-on指令给当前元素绑定input事件

和radio结合使用的时候，v-model绑定了互斥的两个元素，则可以不用写name属性来实现互斥

和checkbox结合可以实现数组的即时显示（如选几个标签，可以显示出来）

和select结合使用的时候，v-model写在select里面而不是option里面。而且只能选一个，若想多选要加multiple属性

在真实开发中，input中的值可能时从网络获取或定义在data中的

所以我们可以通过v-bind:value动态的给value绑定值

修饰符

v-model.lazy就可以实现非实时绑定，敲回车或失去焦点时才会更新

v-model默认绑定成string类型，想要绑定成number类型就v-model.number

v-model.trim去掉前后空格

v-once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <h2 >{{message}}</h2>
       <h2 v-once>{{message}}</h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "54545"
        },
        methods: {
        }
    })
</script>
</html>

用了v-once的元素在console中修改值的时候，不会发生改变

v-pre

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <h2 >{{message}}</h2>
       <h2 v-pre>{{message}}</h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "54545"
        },
        methods: {
        }
    })
</script>
</html>

用了v-pre指令，就把标签中的内容原封不动的显示，如{{message}}就是显示{{message}}

v-cloak基本不会用到

就是在渲染的时候如果卡，就会先显示语法，用这个标签配合css来弄没这个效果。

计算属性

计算属性的关键字computed和data，methods同级

里面也是使用函数来计算属性

基本操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <h2>{{fullName}}</h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            firstName: 'ss',
            lastName: 'ff'
        },
        computed: {
            fullName:function(){
                return this.firstName + ' ' +this.lastName;
            }
        },
        methods: {
        }
    })
</script>
</html>

复杂操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <h2>{{allPrice}}</h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            books: [
                {id: 110, name: "ddddddd", price: 119},
                {id: 111, name: "ccccccc", price: 120},
                {id: 112, name: "aaaaaaa", price: 116},
                {id: 113, name: "eeeeeee", price: 188}
            ]
        },
        computed: {
            allPrice:function(){
                let result = 0;
                for (let i=0;i<this.books.length;i++){
                    result += this.books[i].price;
                }
                return result;
            }
        },
        methods: {
        }
    })
</script>
</html>

回到了学c的感觉

计算属性的完整写法是

computed: {
            fullName: {
                set:function(){

                },
                get:function(){
                    
                }
            }
        },

不过一般只用到了get方法

计算属性和methods的对比

计算属性的性能高，若是methods方法，每次调用都要执行一次，而computed整个vue声明周期下来只用执行一次（如果值没有发生变化则直接返回，发生了变化就执行再返回，这是computed的缓存），省了很多性能

过滤器filters

和methods同级

图书购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-if="books.length">
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(book,index) in books">
                    <td>{{book.id}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.date}}</td>
                    <td>{{book.price | showPrice}}</td>
                    <td>
                        <button @click="sub(index)" v-bind:disabled="book.count <=1">-</button>
                        {{book.count}}
                        <button @click="add(index)">+</button>
                    </td>
                    <td><button @click="removeBtn(index)">移除</button></td>
                </tr>
            </tbody>
        </table>
        <h2>总价格：{{allPrice | showPrice}}</h2>
    </div>
    <h2 v-else>购物车为空</h2>
   </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
           books: [
                {id: 1, name: '《算法导论》', date: '2222-03', price: 85.00, count: 1},
                {id: 2, name: '《java》', date: '1999-03', price: 57.00, count: 1},
                {id: 3, name: '《c++》', date: '2000-03', price: 37.00, count: 1},
                {id: 4, name: '《python》', date: '2231-03', price: 55.00, count: 1},
           ]
        },
        methods: {
            sub:function(index){
                this.books[index].count--;
            },
            add:function(index){
                this.books[index].count++;
            },
            removeBtn:function(index){
                this.books.splice(index,1);
            }
        },
        filters: {
            showPrice:function(price){
                return '￥'+price.toFixed(2);
            }
        },
        computed: {
            allPrice:function(){
                let result = 0;
                for (let i = 0; i < this.books.length; i++){
                    result += this.books[i].price * this.books[i].count;
                }
                return result;
            }
        }
    })
</script>
</html>

这里面用到的知识点

v-for 这里想要操作v-for里面的元素的话，要用到index

@click 这里绑定的方法如果下面有参数的话，一定要在使用时也加上参数

filter过滤器，里面也是一个函数，使用的话就是{{}}里面加 ‘|’ 和过滤器里函数的名字

methods，这里面的方法要操作相对应的对象，必须要用到index

axios

基本使用

总结：

  1. axios必须先导入才可以使用
  2. 使用get或post方法即可发送对应的请求
  3. then方法中的回调函数会在请求成功或失败时触发
  4. 通过回调函数的形参可以获取响应内容，或错误信息
axios.get("https://autumnfish.cn/api/joke/list?num=3")
        .then(function(response){
            console.log(response);
        }),function(err) {
            console.log(err);
        }

这一段是最重要的，.then后面的函数是请求成功的回调函数，第二个是失败的回调函数

一般都是axios.get或post来请求url

axios+vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="getJoke">获取笑话</button>
        <h2>{{joke}}</h2>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            joke: "很好笑"
        },
        methods:{
            getJoke:function(){
                var that = this;
                axios.get("https://autumnfish.cn/api/joke")
                .then(function(response){
                    console.log(response.data);
                    that.joke = response.data;
                },function(err){
                    console.log(err)
                }
                )
            }
        }
    })
</script>
</html>

axios请求数据的方法写在methods里，

然后this中的数据在回调函数中会变，所以不能直接使用，需要定义一个变量来存储这个this，代码中用的是that

总结：

  1. axios回调函数中this已经改变，无法访问到data中的数据
  2. 把this保存起来，回调函数中直接使用保存的this即可
  3. 和本地应用的最大区别就是改变了数据的来源！

vue生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6tE2hpG3-1606924890337)(D:\学习生涯从未止步\vue的学习\vue自主笔记.assets\lifecycle-1606708750442.png)]

生命周期钩子函数：

beforeCreated

created:多用于网络请求

beforemounted

mounted

updated

distroy

组件化

组件化是vue.js中的重要思想

​ 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用

​ 任何的应用都会被抽象成一颗组件树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nF2blJza-1606924890339)(D:\学习生涯从未止步\vue的学习\vue自主笔记.assets\image-20201202233654808.png)]

组件的使用分为三个步骤

  1. 创建组件构造器
  2. 注册组件
  3. 使用组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9rrezAVz-1606924890340)(D:\学习生涯从未止步\vue的学习\vue自主笔记.assets\image-20201202233926667.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    //3.使用组件
   <my-cpn></my-cpn>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //1.创建组件构造器
    const cpnC = Vue.extend({
        template: '<div><h2>我是标题</h2><p>我是内容</p></div>'
    })
    //2.注册组件
    Vue.component('my-cpn',cpnC)
    const app = new Vue({
        el: "#app",
        data: {
          
        }
    })
</script>
</body>
</html>

Vue.extend():

  1. 调用Vue.entend()创建的是一个组件构造器
  2. 通常在创建组件构造器时，传入template代表我们自定义组件的模板
  3. 该模板就是在使用到组件的地方，要显示的HTML代码
  4. 事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

组件注册的第二种写法，局部组件，也是后面开发经常用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
   <cpn></cpn>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    const cpnC = Vue.extend({
        template: `
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容</p>
                </div>`
    })
    
    const app = new Vue({
        el: "#app",
        data: {
          
        },
        components: {
            cpn: cpnC
        }
    })
</script>
</body>
</html>

cript>

~~~

Vue.extend():

  1. 调用Vue.entend()创建的是一个组件构造器
  2. 通常在创建组件构造器时，传入template代表我们自定义组件的模板
  3. 该模板就是在使用到组件的地方，要显示的HTML代码
  4. 事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

组件注册的第二种写法，局部组件，也是后面开发经常用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
   <cpn></cpn>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    const cpnC = Vue.extend({
        template: `
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容</p>
                </div>`
    })
    
    const app = new Vue({
        el: "#app",
        data: {
          
        },
        components: {
            cpn: cpnC
        }
    })
</script>
</body>
</html>
言念君子~
关注
专栏目录
VUE介绍与应用.pptx
10-20
Vue的优点包括易于学习、性能优秀、良好的生态系统和社区支持。相比jQuery，Vue更注重数据的管理，降低了DOM操作的复杂性，更适合处理动态内容和复杂交互。然而，Vue也存在一些潜在的缺点，例如在某些场景下，对于不...
如何使用React更换背景颜色
TianXuab的博客
09-23 1304
React作为一种流行的JavaScript库，为我们构建交互式Web应用程序提供了强大的工具和技术。在本文中，我们将探讨如何使用React更换背景颜色的代码示例，帮助您快速上手并实现自定义的背景颜色效果。
什么是vue？为什么用vue？
风的专栏
04-06 1万+
综合：https://segmentfault.com/a/1190000015560315 https://blog.csdn.net/liang377122210/article/details/71545459 https://blog.csdn.net/xutongbao/article/details/77870989 这几篇都写得非常好 1.Vue.js是什么？ vue就是一个js库...
Vue.js 是什么？以及它与 HTML 文件的区别在哪
weixin_61822791的博客
09-16 1071
而Vue.js 是一个 JavaScript 框架，通过在 HTML 文件中使用 Vue.js 的语法和指令，可以实现数据驱动的页面更新和交互效果。总结起来，Vue.js 是一个现代化的前端框架，通过与 HTML 文件配合使用，可以实现动态的网页应用，提供了更丰富的功能和开发体验。
vue速学
前方的路在刚开始
05-23 901
没有html、css、js基础的同学可以不用看了 vue和html的区别，html可以直接通过浏览器访问，而vue需要编译后，编译成html才能访问（并且他只能用npm去启动） npm是什么，npm是node.js的包管理器，node.js是什么，node.js是javascript的运行环境。 类似 魔兽对战平台(npm)和魔兽争霸（node.js）的关系，类似 pipy和python的关系 类似Maven 与 java的关系。 大家知道，像python的django、java的spring
vue的概要介绍与分析
07-02
通过上述资源的学习与实践，无论是前端新手还是经验丰富的开发者，都可以逐步掌握Vue.js，构建出高效、可维护的前端应用。Vue的轻量级、灵活性和高性能使其在现代Web开发中占据了重要地位，是前端工程师不可或缺的...
vue入门学习介绍
08-09
vuejs基础入门PPT，非常适合初学者及有PPT制作需求的同学。
vue3的概要介绍与分析
最新发布
08-17
官方文档与指南：Vue 3 的官方文档是了解和学习 Vue 3 的首选资源。文档详细介绍了 Vue 3 的新特性、API 变更、性能改进以及最佳实践。无论是从 Vue 2 迁移到 Vue 3 的开发者，还是完全的新手，都能从官方文档中找到...
jsp中使用vue，jsp中使用elementUI
qbbhgn的博客
05-12 7621
jsp中使用vue，jsp中使用element UI jsp中是无法直接使用element UI的，因为elementUI是基于Vue的，所以必须先集成Vue 首先要导入以下文件，这边建议下载而不是直接使用链接 这里有一点必须注意，vue.js必须在element的上面，因为element是基于vue的 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> &lt
Vue路由
m0_53151031的博客
11-02 992
目录 一、SPA介绍 二、Vue路由的简介 三、无痕浏览 一、SPA介绍 1、SPA是什么？ 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 2、单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由...
vue项目中 子路由是JSP页面
Future1994的博客
06-10 1709
第一步： 把JSP子路由的页面直接当成 (iframe)浮动框架 第二步： 在router.js中 设置子路由（JSP浮动框架）路径 第三步：地址栏直接访问 对应的路由 页面呈现成功 而且 是JSP页面 注意： iframe的src路径应该是服务器的IP+端口号 这里是本地启动的服务器 与实际现场不同 ...
vue-router理解及使用(基于vue2.x)--01
weixin_43431123的博客
01-27 445
vue-router理解及使用 为什么会有前端路由？ 1.在我们最开始开发的时候，可能前后端是一体化的，需要我们后端人员使用jsp模板引擎渲染出我们的页面，直接返回给浏览器。 2. 到了后期，又前端人员，编写html+js+css，客户通过浏览器请求这些静态文件，访问数据时，可以使用ajax等技术，向后端请求数据，再通过js动态的把数据插入到html中，这样也不太好，每个页面我们都要对应的写一套html+css+js。 3.现在我们通过vue框架，也可以动态的显示数据了，因为vue存在了一个核心，叫做组件
React基础知识总结
qq_40046544的博客
09-21 797
React 是一个用于构建用户界面的 JavaScript 库React 主要用来写 HTML 页面，或构建 Web 应用如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是指负责视图的渲染，而并非提供了完整的 M 和 C 的功能React 起源于 Fecebook 的内部项目，后来用来架设 Instagram 的网站，并于 2013 年 5 月开源JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML）格式的代码。
初学者，学习vue应该从何下手？
weixin_51812604的博客
04-21 4160
学习 Vue 之前，需要具备：HTML, CSS, JavaScript 基础知识，最好还拥有使用这些技术开发过网站的经验。
vue 用jsp 还是html,如何在jsp页面里使用vue
weixin_39608509的博客
07-10 3078
## 只针对需要的### 以下各类同学可以直接跳过- 不推荐jsp和vue加一起写的- 说直接用jq写的- 。。。。。的- 吐槽的- 各种解决方案的##### 总结以上说的都是对的，但是已经写完了页面，所以 emmmm。。。。。### 申明楼主只是个前端自己写的大部分也都是前后的分离的，不懂java不懂jsp，而且页面也是用vue写完了才知道要加入原有的jsp页面，所以记录一下全当教训了。### ...
传统jsp与Vue对比，涉及Nuxt，jq与Vue混合使用
热门推荐
qq_21561833的博客
07-21 1万+
概要： jsp代表了传统的开发服务模式，让数据在服务端渲染完毕发送给浏览器。Vue代表着现代化的前端开发模式。对比两者的不同可以更好的理解web前端开发。本文开始将从目录结构，代码复用，路由，增删改查等方面进行对比。然后简单的了解下Nuxt(服务端渲染)。最后写当项目中遇到jq和vue 共同使用时候的解决方法。 一.对比目录结构 1.jsp jsp传统页面目录结构 2.vue 目录结构 2.复用代码的对比 2.1 jsp复用 <%@include file="/WEB-INF/include-he
不要再学 JSP 了，学 SpringBoot + Thymeleaf + Vue吧
沉默王二
08-30 6532
加油！
如何设置好看的form表单样式_React form 表单组件的解决方案
weixin_39924307的博客
11-20 1987
来源 |https://imweb.io/topic/5ca03c119239213a22d7549d一直以来，表单对于前端来说都是一个不得不面对的坑。而对于设计一个表单组件来说，主要需要考虑以下三点：各个元素如何排版布局管理各个元素的值表单验证(即时校验及提交的全部校验)目前已经有了一批优秀的 form 表单解决方案，但是要解决上述的三大问题，都比较费劲，于是搞了个react-fo...
react 项目 计算列表金额 数据 汇总并实时变更
lzfengquan的博客
04-14 820
来，先看需求， 总体来说简单归纳一下需求： 就是表头数据的一些特定值变更后会影响明细的税率值，实时变更，明细变更后影响会总行数据，然后表头也变更。如果单独改了明细的数据值，那么相应的汇总，和表头都要自动进行计算。 明细行和会总行是可编辑表格，这个直接用公司封装的组件就行。编辑表格的需求就是： 明细行可编辑的字段涉及到计算的就是：数量。单价。含税单价。 需要注意的是，会总行数据来源源自于明细，且明细行相同的商品带出的数据，（也就是相同商品所在的数据，每个金额计算以及数量都要相加后赋值到会总行展示）要计算结
Vue框架学习与常用指令总结
课程重点在于介绍Vue的基本使用方法和内置指令。首先，为了在HTML页面中使用Vue，需要引入Vue.min.js库，这通常通过`<script>`标签完成。例如： ```html <script src="./js/vue.min.js"> ``` 接下来，通过Vue构造...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值