vue 知识精简
zm-open
这个作者很懒,什么都没留下…
展开
-
8.2、props
1、Prop 类型 https://cn.vuejs.org/v2/guide/components-props.html#Prop 类型 String Number Boolean Array Object Date Function Symbol props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 不指定类型,则为String props: { title: String, likes: Number,原创 2020-06-19 10:15:29 · 106 阅读 · 0 评论 -
8.1、组件
文章摘录于https://cn.vuejs.org/v2/guide/components-registration.html 为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别 组件名 Vue.component('my-component-name', { // ... options ... }) 该组件名就是Vue.component的第一个参数。 组件名大小写 定义组件名的方式有两种: 使用 kebab-case Vue.component('my-compon...原创 2020-06-19 09:16:06 · 165 阅读 · 0 评论 -
7、过滤器
https://cn.vuejs.org/v2/guide/filters.html#ad 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示 Vue.filter('formatId',function(rawId){ //处理内容 }) <div v-bind:id="rawId | formatId"></div> 过滤器传参 Vu...原创 2020-06-18 09:59:37 · 113 阅读 · 0 评论 -
6、数据请求
vue-resource/ axios 请求数据 https://www.jianshu.com/p/c2e1a07bd1f7 https://www.bootcdn.cn/vue-resource/ this.$http({ url: '/Home/Login', method: "POST", body: { "AccountName": "administrator", "AccountPassword": "1", },.原创 2020-06-18 09:53:14 · 105 阅读 · 0 评论 -
5、生命周期钩子
https://cn.vuejs.org/v2/api/#选项-生命周期钩子 beforeCreate: function () {//在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用 console.log('在初始化内部变量,并且添加了事件功能后被触发'); }, created: function () {//在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (d.原创 2020-06-18 09:49:16 · 143 阅读 · 0 评论 -
4、按键修饰符
https://cn.vuejs.org/v2/guide/events.html#按键修饰符 <input v-on:keyup.13="submit"> 13为别名 全部的按键别名: .enter .tab .delete(捕获“删除”和“退格”键) .esc .space .up .down .left .right 自定义全局按键修饰符 Vue.config.keyCodes.f2=113; <input v-on:keyup.f2="su...原创 2020-06-18 09:41:04 · 139 阅读 · 0 评论 -
3、事件修饰符
.stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身触发时触发回调 .once 事件只触发一次 el: @click.stop="方法"原创 2020-06-18 09:36:04 · 140 阅读 · 0 评论 -
2、数据绑定
v-bind 单向绑定 v-model 实现表单元素和Model中数据的双向绑定原创 2020-06-18 09:34:30 · 68 阅读 · 0 评论 -
1、vue指令的基本使用
v-cloak //设置v-cloak样式,防止样式优先级被高级的样式覆盖掉,处理方式,添加 !important; [v-cloak] { display:none !important; } v-text 都能够解决 插值表达式闪烁的问题 <div> <p>{{msg}}</p> <p v-text="msg"></p> </div> v-text会覆盖元素原本的内容,但插值表达式只能替换表达式的占位符 若内容原创 2020-06-18 09:30:08 · 125 阅读 · 0 评论