vue
入门小站
这个作者很懒,什么都没留下…
展开
-
Vue双向数据绑定
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaS.原创 2020-09-18 21:59:51 · 125 阅读 · 0 评论 -
Vue三大核心之三(插槽)
1.具名组件我们一个组件里需要多个插槽,就需要用到slot的name属性<!--子组件定义--><div> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="foote原创 2020-09-14 19:35:54 · 457 阅读 · 0 评论 -
Vue三大核心概念之二(事件)
1.普通事件@click,@input,@change,@xxx等事件,经过this.$emit(‘xxx’,…)触发写法案例:<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button></div>new Vue({ el: '#exam原创 2020-09-14 19:28:54 · 227 阅读 · 0 评论 -
Vue三大核心概念之一(属性)
1.自定义属性props:即组件中声明的属性,子类接受父类的值2.原声属性attrs:没有声明的属性,默认自动挂在到组件根元素上,设置inheritAttrs为false能够关闭自动挂载3.特殊属性class,style挂载到组件根元素上,支持字符串,对象,数组等多种语法.定义属性的两种方式1.props: [‘title’, ‘likes’, ‘isPublished’, ‘commentIds’, ‘author’] 无法对属性值进行校验2.可以对属性值进行校验props: { //原创 2020-09-14 19:23:05 · 403 阅读 · 0 评论 -
Vue插槽(solt)简单案例
当前页面向子组件传递的值带有HTML标签等特殊的字符时,传统的标签是无法解析的,这时候就需要用插槽(solt)功能来传递变量值ItemOne.vue子组件中通过solt定义一个插槽<template> <li class="item"> <input type="checkbox" v-model="checked" /> <!--插槽的名称和下面的属性名要对应--> <!--插槽.原创 2020-09-12 20:39:06 · 600 阅读 · 0 评论 -
Vue单文件项目自定义组件入门
1.安装vue-cli工具,全局安装vue-clinpm install -g @vue/cli或者yarn global add @vue/cli2.创建一个项目//创建一个名字为rumenz-demo的项目➜ vue vue create rumenz-vueVue CLI v4.5.4? Please pick a preset: (Use arrow keys)❯ Default ([Vue 2] babel, eslint) Default (Vue 3 Previ原创 2020-09-10 21:16:48 · 263 阅读 · 0 评论