随笔分类 -  Vue.js

学习笔记
事件修饰符
摘要：实现： 阅读全文
posted @ 2018-06-06 11:27 谁说程序猿很猥琐 阅读(228) 评论(0) 推荐(0)
vue 组件的简单使用01
摘要：// 组件 自定义全局组件 Vue.component('mycom', { template: '自定义组件 +{{myMessage}} {{MyTitle}} {{count}} childarry:{{myChildarry}} myInfo:{{myInfo}}', // 在父组件中的写法必须是 my-Message（小写字母开始 + 与第一... 阅读全文
posted @ 2018-06-06 09:12 谁说程序猿很猥琐 阅读(174) 评论(0) 推荐(0)
vue 绑定 class 和 内联样式（style）
摘要：实现: 阅读全文
posted @ 2018-06-06 08:27 谁说程序猿很猥琐 阅读(907) 评论(0) 推荐(0)
input select 值得绑定与获取
摘要：{{ message }} {{ checked }} 选择框1 选择框2 选择3 {{ checkNames }} ... 阅读全文
posted @ 2018-06-05 16:25 谁说程序猿很猥琐 阅读(2985) 评论(0) 推荐(0)
computed 计算属性
摘要：{{ message }} {{ newMessage1 }} {{ newMessage() }} 调用： StudyComputed("#app14") 实现： //computed vs methods //我们可以使用 methods 来替代 computed， //效果上两个都是一样的，但是... 阅读全文
posted @ 2018-06-05 14:54 谁说程序猿很猥琐 阅读(1306) 评论(0) 推荐(0)
v-for 循环 绑定对象 和数组
摘要：{{ info.Name }} key:{{ key }} value:{{ value }} index:{{ index }} ... 阅读全文
posted @ 2018-06-05 14:36 谁说程序猿很猥琐 阅读(663) 评论(0) 推荐(0)
过滤器 filter
摘要：{{ message | filterA }} 调用： StudyFilter("#app10"); 实现： //过滤器 function StudyFilter(obj) { new Vue({ el: obj, data: { message: 'zheng' ... 阅读全文
posted @ 2018-06-05 13:37 谁说程序猿很猥琐 阅读(112) 评论(0) 推荐(0)
v-model 双向数据绑定以及修饰符
摘要：{{ message }} 调用： Study_V_Model("#app09"); 实现 function Study_V_Model(obj) { new Vue({ el: obj, data: { message:'' } ... 阅读全文
posted @ 2018-06-05 13:13 谁说程序猿很猥琐 阅读(181) 评论(0) 推荐(0)
v-on 绑定单个或多个事件
摘要：doSomething 调用： Study_On_Click("#app07") 实现： // v-on 绑定事件 function Study_On_Click(obj) { new Vue({ el: obj, methods: { ... 阅读全文
posted @ 2018-06-05 12:01 谁说程序猿很猥琐 阅读(6119) 评论(0) 推荐(0)
v-bin：href 绑定链接
摘要：我是百度 调用： StydyV_Bind_herf("#app06") 实现： } // v-bind:href 绑定一个链接 function StydyV_Bind_herf(obj) { new Vue({ el: obj, data: { URL: 'http://www.ru... 阅读全文
posted @ 2018-06-05 12:00 谁说程序猿很猥琐 阅读(2413) 评论(0) 推荐(0)
v-if-else 条件判断 是否插入元素指令
摘要：if else v-show 阅读全文
posted @ 2018-06-05 11:59 谁说程序猿很猥琐 阅读(898) 评论(0) 推荐(0)
给元素绑定 class
摘要：sasjadjagd > v-bind-id 调用： StudyChangeStyle("#app04"); 实现： function StudyChangeStyle(obj) { new Vue({ el: obj, data: { Class1: true, ... 阅读全文
posted @ 2018-06-05 11:57 谁说程序猿很猥琐 阅读(138) 评论(0) 推荐(0)
使用 v-html 绑定值
摘要：调用： StudyVue03("#app03"); 实现： // 使用 v-html 绑定值 function StudyVue03(obj) { new Vue({ el: obj, data: { message: 'This is v-html' } ... 阅读全文
posted @ 2018-06-05 11:56 谁说程序猿很猥琐 阅读(1465) 评论(0) 推荐(0)
属性绑定值和方法
摘要：{{ Name }} {{ Age }} {{ MethodInfo() }} 调用： StudyVue02(("#app02")); 实现： // Vue 构造器 02 function StudyVue02(obj) { // 定义一个对象 ，这里封装成了一个对象，只需要给对象赋值。面向对象的思想... 阅读全文
posted @ 2018-06-05 11:53 谁说程序猿很猥琐 阅读(156) 评论(0) 推荐(0)
属性绑定数据
摘要：{{ message }} // 调用 HelloVue(("#app")); 实现： // 简单定义一个Vue对象 function HelloVue(obj) { new Vue({ el: obj, data: { message: 'Hello Vue' } ... 阅读全文
posted @ 2018-06-05 11:52 谁说程序猿很猥琐 阅读(165) 评论(0) 推荐(0)