随笔分类 -  Vue.js

Vue.js-----轻量高效的MVVM框架（十二、组件动态切换）
摘要：在写html的过程中，我们经常会遇到要写tabs的切换，类似于这样： 在vue中，我们也有自己的组件和属性来实现这样的效果，这个东西我们叫做动态组件。 html: js: 步骤解释： 1、在html中定义三个template模板 2、在js中通过Vue.extend()中指定扩展组件的模板，在vue 阅读全文
posted @ 2016-05-26 17:26 Ember24 阅读(15332) 评论(7) 推荐(1)
Vue.js-----轻量高效的MVVM框架（十一、使用slot分发内容）
摘要：#单个slot html: js: 结果展示: #具名Slot（有名称的slot） html： js: 结果展示： #编译作用域 html: js: 结果展示： 阅读全文
posted @ 2016-05-26 15:54 Ember24 阅读(8342) 评论(0) 推荐(0)
Vue.js-----轻量高效的MVVM框架（十、父子组件通信）
摘要：#1、父链 html： js: dr01作为父代组件，child01作为子代组件，grandson01作为孙代组件 结果： #2、自定义事件 html: js: 结果： #3、使用v-on绑定自定义事件 html: js: 结果与上面类似，只是多了控制台的输出 #子组件索引 html: js: 结果 阅读全文
posted @ 2016-05-26 11:30 Ember24 阅读(6160) 评论(3) 推荐(3)
Vue.js-----轻量高效的MVVM框架（九、组件利用Props传递数据）
摘要：#使用props传递数据 html:传递普通的字符串 js: 结果展示： #camelCase vs. kebab-case html:在html中定义或者绑定属性的时候要符合kebab-case规则 js:在js中定义的属性名称如果是"camelCase"规则，则在html定义或者绑定value的 阅读全文
posted @ 2016-05-25 17:58 Ember24 阅读(18805) 评论(4) 推荐(6)
Vue.js-----轻量高效的MVVM框架（八、使用组件）
摘要：什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 #1、全局注册 html：  阅读全文
posted @ 2016-05-25 14:37 Ember24 阅读(1586) 评论(5) 推荐(0)
Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）
摘要：话不多说，先上完整代码： #1、Text 最常见的input示例： html 然后在js中定义data的message:"msg" 结果展示： #2、CheckBox html 第一个复选框没有value属性，绑定了model为"checked"，默认值是布尔类型，选中为true，未选中为false 阅读全文
posted @ 2016-05-23 16:29 Ember24 阅读(2151) 评论(5) 推荐(2)
Vue.js-----轻量高效的MVVM框架（六、Class与Style绑定）
摘要：这个相对来说简单，看一遍代码就懂。 一、完整片段： 二、结果展示： 三、渲染后的html代码 阅读全文
posted @ 2016-05-20 17:35 Ember24 阅读(1923) 评论(0) 推荐(0)
Vue.js-----轻量高效的MVVM框架（五、计算属性）
摘要：#基础例子 在js中定义组件dr01，初始化数据num01:10，computed中定义了num02（一个返回值为num01*5的方法）。 在页面中，{{num01}}为我们定义{{num02}}为计算出来的结果： #计算属性vue.$watch 双向数据绑定的时候我们经常会遇到这样的情况：数据3= 阅读全文
posted @ 2016-05-20 16:48 Ember24 阅读(914) 评论(0) 推荐(0)
Vue.js-----轻量高效的MVVM框架（四、指令）
摘要：Vue指令 指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。 在Vue中，常用的指令有v-text、v-html、v- 阅读全文
posted @ 2016-05-20 09:22 Ember24 阅读(2645) 评论(0) 推荐(0)
Vue.js-----轻量高效的MVVM框架（三、认识数据绑定）
摘要：插值 1、文本插值 （1）双向数据绑定 v-model="msg0101"，一旦v-model中的数值发生变化，所有用vue表达式{{msg0101}}的数据都会更新。 （2）单次插值 v-model="msg0102"，但是：如果我们仅仅需要显示msg0102初始化的值，则用{{#msg0102} 阅读全文
posted @ 2016-05-18 17:59 Ember24 阅读(4521) 评论(1) 推荐(0)
Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）
摘要：1、hello vue.js! （1）引入vue.js <script type="text/javascript" src="js/vue.js"></script> （2）创建要绑定vue组件的元素，这里制定为id为"dr01"的div （3）通过<script>标签创建vm实例 （4）结果 2 阅读全文
posted @ 2016-05-18 16:17 Ember24 阅读(1300) 评论(0) 推荐(2)
Vue.js-----轻量高效的MVVM框架（一、初识Vue.js）
摘要：1、什么是Vue.js？ 众所周知，最近几年前端发展非常的迅猛，除各种框架如：backbone、angular、reactjs外，还有模块化开发思想的实现库：sea.js 、require.js 、webpack以及前端上线部署集成工具如： grunt、gulp、fis等。 Vue.js与react 阅读全文
posted @ 2016-05-18 15:22 Ember24 阅读(8513) 评论(2) 推荐(2)