Vue2学习笔记
学习笔记666
这个作者很懒,什么都没留下…
展开
-
vue-loader
vue-loader的概念其他loader:css-loader、url-loader、html-loader等 先来了解一下模块的概念,比如在nodeJS中,有require和exports关键字。很早有个broserify,是个js模块加载器。 现在流行的是webpack,因为它不光你能加载js文件,还可以是css文件或图片等资源。 webpack,我们可以认为也是更加高级的模块假期,围绕原创 2017-02-04 15:49:46 · 17079 阅读 · 0 评论 -
自定义指令
除了核心指令(v-model和v-for)等外,Vue也允许我们自定义指令。 <div id="box"> <span v-text="msg"></span> </div> <script type="text/javascript"> var vm = new Vue({ data:{原创 2017-01-21 12:32:35 · 938 阅读 · 0 评论 -
Vue过渡(动画)- transition组件
Vue过度(动画),本质走的是CSS3:transtion,animation。控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div> <script原创 2017-01-21 14:58:49 · 32911 阅读 · 0 评论 -
Vue组件基础
new Vue() 就可以认为是一个大组件,但多个实例这样太low了,Vue为我们提供了Component。1.全局注册的组件 要注册一个全局组件,你可以使用 Vue.component(tagName, options),例如: //注册 Vue.component('my-component', { template: '<div>一个自定原创 2017-01-21 16:54:32 · 1271 阅读 · 1 评论 -
动态组件(可模拟选项卡)
<div id="box"> <input type="button" value="加载aaa组件" @click="a='aaa'"> <input type="button" value="加载bbb组件" @click="a='bbb'"> <components :is="a"></components> </div>主要代码:<co原创 2017-01-23 14:36:20 · 698 阅读 · 0 评论 -
父子组件
模板上: <div id="box"> <!-- 使用组件aaa --> <aaa></aaa> </div>我们给aaa组件里套一个子组件bbb: var vm = new Vue({ el:'#box', components:{ 'aaa':{原创 2017-01-23 15:23:18 · 2248 阅读 · 0 评论 -
父子组件通信
前面我们已经学习了子组件通过设置props接收父组件传递过来的data:http://blog.csdn.net/github_26672553/article/details/54693812这里,我们要来学习一下,父组件如何获取子组件的data。1.我们在父组件aaa中定义一个方法 get(msg){原创 2017-01-23 16:00:26 · 1352 阅读 · 1 评论 -
slot
文档:http://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容Slot用来占个位置。 <div id="box"> <!-- 使用组件aaa --> <aaa> <ul> <li>aaaaa</li> <li>bbbb原创 2017-01-23 16:34:18 · 844 阅读 · 0 评论 -
vue-router路由的基础使用
文档:http://router.vuejs.org/zh-cn/<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg原创 2017-01-23 17:11:30 · 6397 阅读 · 1 评论 -
vue-router: 嵌套路由
模板抽离我们已经学习过了Vue模板的另外定义形式,使用<template></template>。 <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template>然后js里定义路原创 2017-02-04 10:14:24 · 76908 阅读 · 3 评论 -
Vue实例的一些简单方法
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="box"> {{a}} </div>原创 2017-01-20 16:17:56 · 3947 阅读 · 0 评论 -
计算属性(computed)
需求:数据msg值为Hello,我们现在需要反向显示成olleH。 方式1:模板中绑定表达式 <div id="box"> {{msg}} <hr> {{ msg.split('').reverse().join('') }} </div> <script type="text/javascript"> new原创 2017-01-20 15:41:46 · 1706 阅读 · 0 评论 -
Vue的生命周期
http://cn.vuejs.org/v2/guide/instance.html#实例生命周期Vue实例(new出来)在被创建之前要经过一系列初始化过程,在这个过程中,实例也会调用一些生命周期钩子。 例如:created这个钩子在实例被创建之后就会自动调用:<!DOCTYPE html><html><head> <title></title> <meta charset="原创 2017-01-20 14:54:31 · 3126 阅读 · 0 评论 -
Vue-cli是何物
介绍Vue-cli是Vue的脚手架工具 主要作用:目录结构、本地调试、代码部署、热加载、单元测试地址:https://github.com/vuejs/vue-cli安装安装Vue-clinpm install -g vue-cli安装成功之后,可以执行vue list 命令查看: 举例出了我们可以用的哪些模板。然后我们来安装webpack模板vue init webpack sells原创 2017-02-16 16:09:15 · 25310 阅读 · 1 评论 -
v-model和v-for指令
http://cn.vuejs.org/v2/guide/ 1.基本雏形<!DOCTYPE html><html><head> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.o原创 2017-01-19 16:41:59 · 42467 阅读 · 0 评论 -
点击事件(v-on:click)
点击事件v-on:click<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window原创 2017-01-19 16:59:04 · 9605 阅读 · 0 评论 -
元素的隐藏和显示(v-show指令)
除了click单击事件,还有mouseover,mouseover等鼠标事件。 dbclick双击事件。v-on:click/mouseover/mouseover/mousedown/dbclick/...v-show指令v-show="true/false" 控制元素显示/隐藏示例代码:<!DOCTYPE html><html><head> <title></title>原创 2017-01-19 17:10:54 · 46485 阅读 · 0 评论 -
事件对象(event)、事件冒泡、默认行为
1.点击事件的event(事件对象) <div id="box"> <input type="button" value="按钮" @click="show($event)"> </div> var vm = new Vue({ el:'#box', methods:{原创 2017-01-20 10:02:11 · 1689 阅读 · 0 评论 -
键盘事件
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = func原创 2017-01-20 10:24:09 · 579 阅读 · 0 评论 -
Class和Style绑定
Vue的属性<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload原创 2017-01-20 11:43:58 · 747 阅读 · 0 评论 -
过滤器filters
http://cn.vuejs.org/v2/guide/syntax.html#Filters Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。 系统提供了一些过滤器<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.c原创 2017-01-20 13:09:32 · 1000 阅读 · 0 评论 -
vue与后端数据交互(ajax):vue-resource
必须引入一个库:vue-resource1.获取普通文本数据 比如:a.txt:welcomet to vue!!!<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script>原创 2017-01-20 14:11:09 · 37999 阅读 · 10 评论 -
vue-router: 路由传参
路由传参数。在很多时候我们需要路由上面传递参数,比如新闻列表页,我们需要传递新闻ID,给新闻详细页。 1.新闻列表页模板 <template id="news"> <div> <h2>新闻列表</h2> <ul> <li> <router-link to="原创 2017-02-04 10:53:02 · 45899 阅读 · 2 评论