Vue
关注
分享
扫一扫
文章平均质量分 73
桃花扇J
前端女孩的自我修养
展开
-
vue_组件插槽详述
在使用组件时，在引用的组件标签中添加内容时，会自动被组件中的模板代替，如【例1】【例1】<my-comp>Have a happy Life</my-comp>Vue.component('my-comp',{ template:` <div> Life is a shit! </div> `})【结果】1.插槽的使用当不想要传递给组件的内容被替代，则可以使用组件插槽来解决这个问题，具体使用方法原创 2021-01-20 22:31:59 · 283 阅读 · 0 评论 -
vue_组件_监听组件事件
1.$emit 的使用在组件中注册自定义事件$emit(事件名, 参数) //该参数会当作第一个参数传入绑定的函数中下面用一个菜单栏例子来说明，如下图所示组件Vue.component('menu-cmp', { //注册prop props: { menu: Object, isActive: Boolean, menuIndex: Number }, template: ` &l..原创 2021-01-16 18:57:46 · 2481 阅读 · 0 评论 -
vue_组件_非prop特性
非prop特性指的是，一个未被组件注册的特性。当组件接收了一个非prop特性时，该特性会被添加到这个组件的根元素上。1.替换/合并已有的特性对于绝大多数特性来说，从外部供给组件的值会替换掉组件内部设置好的值，如【例1】【例1】<div id="app"> <my-cmp type='radio'></my-cmp></div>const vm = new Vue({ el: "#app", components原创 2021-01-08 20:10:41 · 301 阅读 · 1 评论 -
vue_prop单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单项下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行，如【例1】。这样会防止子组件意外改变父级组件的状态，从而导致应用的数据流向难以理解。【例1】<div id="app"> father: <button @click="count++">{{ count }}</button> <son-cmp :count='count'></son-c原创 2021-01-01 12:37:25 · 246 阅读 · 0 评论 -
vue_prop注册及验证
目录1.注册自定义特性2.prop的大小写3.传递给一个对象的所有属性4.prop验证1.注册自定义特性当我们在注册组件时，希望其结构、样式和行为是不变的，但是数据应该是可变的，也就是说，所使用的数据应该由外界传递给组件。为了实现数据的接收，组件需要注册props，将数据作为一个自定义特性传递给组件，如下例：div id="app"> <video-item title='羊村摇' poster="https://deve.原创 2020-12-29 22:41:09 · 477 阅读 · 0 评论 -
Vue_组件基础
1.组件基础（1）组件定义组件是可复用的Vue实例，以可作为自定义的元素使用。作为一个Vue实例，它可以接收与new Vue相同的选项，如data、computed、watch、methods以及生命周期钩子等，但是不能接收 el 这样根实例特有的选项。（2）组件注册A. 全局组件Vue.component( string, function | Object )利用Vue.component创建的组件是全局注册的，也就是说它们在注册之后可以用在任何新创建的 Vue 根实例的模板原创 2020-12-29 22:32:17 · 363 阅读 · 0 评论 -
Vue_template是什么
1.el是什么提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是css选择器，也可以是一个HTML元素实例。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显示调用vm.$mount()手动开启编译2.template是什么一个字符串模板作为Vue实例的标识使用。模板将会替换挂载的元素，挂载元素的内容都将被忽略。如下<body> <div id="app"> {{ }} </div> <script原创 2020-11-18 15:19:02 · 6984 阅读 · 1 评论 -
vue_axios详解
axios是一个基于promise的HTTP库，Chrome、Firefox、Safari、Opera、Edge、IE8+都支持1.APIaxios(config) axios(url,[config])2.config配置对象axios({ method:'get', //post、get、put…… baseURL:'', //请求的域名，基本地址 url: '', //请求的路径 params:{}, //会将请求的参数拼接在u原创 2020-11-17 16:21:48 · 1989 阅读 · 0 评论 -
Vue_异步加载_vue-resource（不再维护）
写在前面：vue-resource可以发送ajax，实现异步加载，但是Vue官方已经不再维护这个库了。vue-resource依赖于vue，因此要先引入vue，再引入vue-resource。正确引入vue-resource后，再vue全局上会挂载一个$http方法，其上有一系列方法，每个HTTP请求类型都会对应一个方法。且vue-resource使用了promise，所以$http中的方法的返回值是一个promise。1.请求方法（1）POST请求post请求用于提交数据常用data格原创 2020-11-02 22:35:45 · 740 阅读 · 0 评论 -
Vue属性篇_侦听器watch
作用：侦听属性，响应数据（data&computed）的变化，当数据变化时，会立即执行对应函数，其属性值可以为函数、字符串、对象和数组。1.属性值类型（1）函数类型函数类型中，被侦听的数据作为函数名，当数据改变时，执行 watch() 中对应的函数，该函数可以接受两个参数，第一个参数是 newVal（改动后的数据），第二个参数是 oldVal （改动前的数据），如下例<div id="app"> {{ bookName }}</div>con原创 2020-10-29 15:03:02 · 571 阅读 · 0 评论 -
Vue的响应式及相关问题
目录1.概念2.页面何时渲染3.vm.$nextTick 和Vue.nextTick4.不发生重新渲染的情况5. 响应式更新数组和对象1.概念Vue响应式指当数据变化时，页面会重新渲染，如下例<body> <div id="app"> {{ sentence}} </div></body><script src="./vue.js"></script><sc.原创 2020-10-20 08:12:37 · 571 阅读 · 0 评论 -
vue属性_computed(计算属性)&&methods(方法)
目录1.计算属性2.计算方法3.深入理解计算属性当需要使用大量逻辑时，若直接放在模板中会使得模板过重且难以维护，如下例<div id="app"> {{ message.split('').reverse().join('')}}</div>var vm = new Vue({ el: '#app', data: { message: "It's a joke!" }});【结果】这里是想要显示变量m原创 2020-09-25 19:14:33 · 1755 阅读 · 0 评论 -
Vue指令篇_v-model_数据双向绑定
小桃回来啦，忙一些别的事情，可有一段时间没有更新了，还是接着之前的内容写，v-model是语法糖，可以在表单元素上创建双向数据绑定，即数据更新——>元素更新，元素更新——>数据更新。1.input1）type = text（文本框）<div id="app"> <input v-model="message"> <p>Message为：{{ message }}</p></div>const vm原创 2020-09-25 09:20:27 · 748 阅读 · 0 评论 -
Vue指令篇_v-for_列表渲染
今天要写的是Vue很香的一个指令v-for，这个指令在结构中实现循环，基于数据多次渲染元素，在减少代码量的情况下，又使得逻辑关系一目了然，很奈斯。不多说啦，就开始吧。目录1.使用方法1）v-for中使用数组2）v-for中使用对象3）v-for中适用数字4）v-for中使用字符串2. key1.使用方法v-for指令中可以使用数组、对象、数字、以及字符串，下面我们一一举例，首先把vue.js文件引进来<script src="https://cdn.jsdel原创 2020-08-01 10:07:50 · 3000 阅读 · 0 评论 -
v-on指令修饰符大全
目录1.事件修饰符1）.stop2）.prevent3）.capture4）.self5）.once6）.passive2.按键修饰符3.系统修饰键4.鼠标按钮修饰符1.事件修饰符1）.stop作用：调用event.stop，阻止事件冒泡<div id="app"> <div @click="fatherClick"> <button @click.stop="childClick">cli原创 2020-07-28 15:25:58 · 5553 阅读 · 0 评论 -
Vue如何绑定事件
首先不管三七二十八引入 vue.js 文件再说<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>指令 v-on 用于监听 DOM 事件，并在触发时运行一些 JavaScript 代码，简写为 @ ，其事件类型由参数决定，与 v-bind 指令相同，冒号后面是参数，举个栗子如下<div id="app"> <button v-on:click='count++原创 2020-07-27 16:40:35 · 5200 阅读 · 0 评论 -
Vue指令篇_v-bind
目录1.基本用法2.class和style的绑定1）绑定class2）绑定style3.修饰符1) .camel2) .prop1.基本用法作用：动态地绑定一个或多个特性，也可以绑定动态特姓名，用法如下例<div id="app"> <!-- 绑定一个属性, : 后的为传递的参数 --> <img v-bind:src="imageSrc"> <!-- 动态特性名 (2.6.0+) -->原创 2020-07-27 09:27:46 · 527 阅读 · 0 评论 -
Vue指令篇_v-if、v-else、v-else-if
1.v-if作用：条件性的渲染一块内容，这块内容只会在指令的表达式为真值时被渲染。2.v-else3.v-else-if原创 2020-07-21 16:10:25 · 1396 阅读 · 0 评论 -
VUE指令篇_不常用指令
标题没错，就是几个不常用指令，T_T，先来说一下什么是指令，vue的指令是指以 v- 为前缀，具有特殊含义、拥有特殊功能的特性，可以直接使用data中的数据1.v-prev-pre的作用是跳过这个元素和它的子元素的编译过程。可以用来显示原始的Mustache(插值表达式)标签，跳过大量没有指令的节点会加快编译<div id="app"> <div>{{ name }}</div> <div v-pre>{{ age }}</原创 2020-07-19 16:25:29 · 311 阅读 · 0 评论 -
VUE如何操作DOM
最近有些自闭，life is a shit，但是学习不能停，也开始继续健身了，试图让自己好一点.这是学习VUE的第一篇博客，先来说一下准备工作。我们需要在谷歌商店安装vue-devtools插件，打不开的话，点击这里，按照步骤操作后，就可以在谷歌商店下载插件了，下载插件的步骤：点击谷歌浏览器的更多工具 -> 扩展程序 -> 打开chrome网上应用商店 -> 搜索vue devtools -> 添加至chrome，之后打开哔哩哔哩的官网，右上角出现这个图标，则表示已经生效了V原创 2020-07-10 16:47:01 · 2814 阅读 · 0 评论