Vue_学习笔记
关注
分享
扫一扫
文章平均质量分 59
_dalianmiao
这个作者很懒，什么都没留下…
展开
-
Vue_ 组件的重要选项
一.初识Vue：     我们常规编写的页面时HTML、css、JavaScript，但是在Vue中，我们编写静态页面在.vue中，webpack打包工具帮助我们解析Vue成html,css,javascript. 学习Vue主要是学习template、script、style标签,他们的对应关系： 一个简单的例子： var hello...原创 2018-06-27 09:41:04 · 915 阅读 · 0 评论 -
Vue_给组件绑定原生事件
当我们使用组件的时候，想点击组件触发事件，要在子组件里定义触发事件，在父组件定义是没用的.只有从子组件往外触发自定义事件，父组件里定义的触发函数才有用。那么怎么样才能直接在父组件上定义触发函数，不需要经过子组件呢？ 在触发事件上加上.native eg：<counter @click.native="handerClick"></counter>hand...原创 2018-06-29 22:07:19 · 1323 阅读 · 0 评论 -
Vue_非父子组件间的传值（Vuex和发布订阅模式）
我们知道父子组件之间的传值，父向子用props传值，子向父用自定义事件传值，那么肥父子组件的传值如何实现？比如说1和3 ，3和3之间？ 通常来说，非父子组件的传值方法有两种。 一是用Vue的数据层框架vuex,二是使用总线机制（发布订阅模式、Bus、观察者模式）来解决非父子组件传值的问题。Vue.prototype.bus = new Vue();创建Vue实例的时候，每一个组件都...原创 2018-06-30 09:08:40 · 3061 阅读 · 0 评论 -
Vue_使用插槽（slot）
当父组件向子组件传值的时候，有时候，父组件传的并不是单纯的数值、字符串，有可能是带标签（DOM）的数据，那么如何传值呢？如果我们像正常父向子传值那样操作。 <slott content="<p>hello,slot</p>"></slott>子组件：<templ原创 2018-06-30 09:12:47 · 10958 阅读 · 7 评论 -
Vue_动态组件与v-once指令
一.component动态组件 动态组件是根据判断值决定是否显示该组件<component> 根据is的值来显示相应的组件是否应该显示使用的方法：<component :is='changeConponents'></component><button @click="changeclick"&原创 2018-06-30 09:13:00 · 457 阅读 · 0 评论 -
Vue_CSS动画原理
vue 实现动画效果是在某一时刻往标签上添加一些样式来实现的首先我们先写一个没有动画效果：<div v-if="cssanimate">hello css animate</div><button @click='cssclick'>css动画</button>给按钮添加toggle原创 2018-06-30 09:13:10 · 335 阅读 · 0 评论 -
Vue_使用animate.css库
一.@keyframs 动画 我们如何在Vue中使用@keyframs 动画？<transition name='fa'> <div v-if="cssanimate">hello css animate1</div></transition> <but原创 2018-06-30 09:13:23 · 2101 阅读 · 0 评论 -
Vue_同时使用过渡和动画
在上一节我们用animate动画库，在刷新页面时没有动画如何解决第一次就显示动画内容呢？在transform 上加上appear 和appear-active-class <transition name='fade' appear enter-active-class='animated swing' leave-active-cla...原创 2018-06-30 09:13:40 · 1987 阅读 · 0 评论 -
Vue_JS动画与Velocity.js动画
一.JS动画 前面我们用css实现动画效果，那可不可以用JS来实现动画效果么？可以的 在transition标签里定义触发事件@before-enter：在进入动画之前触发的函数，有一个参数，指的是要执行动画的元素@enter：在进入动画执行的函数，有两个参数，第一个指执行动画的元素，第二个是动画完成的参数@after-enter：在执行完enter之后执行的事件。有一个参数，指执...原创 2018-06-30 09:13:50 · 2067 阅读 · 0 评论 -
Vue_多个元素或组件的过渡
一.多元素动画 如果transition标签里有多个元素做动画，比如做个toggle切换的效果。<transition name='fade' mode='in-out'> <div v-if="cssanimate" key='hello'>hello css animate5</div> &am原创 2018-06-30 09:14:09 · 942 阅读 · 0 评论 -
Vue_列表过渡
如果是列表的话，想要做动画，让列表在包裹在transition-group里面<transition-group name='listcss'> <div v-for='item of listanimate' :key='item.id'>{{item.title}}</div></transition-group>原创 2018-06-30 09:14:24 · 384 阅读 · 0 评论 -
Vue_动画封装
我们写一个动画效果，如果在页面多处调用，就可以封装在一个组件里。使用插槽的形式。eg：<fade :show='showfade'> <div>hello world</div></fade><fade :show='showfade'> <h原创 2018-06-30 09:14:35 · 267 阅读 · 0 评论 -
Vue_的路由
什么是路由呢？路由就是根据网址的不同，返回不同的内容给用户router-view显示的是当前路由地址所对应的内容路由的配置都放在router文件下的index.js文件里。我们对我们新建的项目进行优化，我们所有的代码编写基本都是在src项目中，所以对里面的内容进行改写。当我们访问根文件的时候，希望返回的是首页。eg:我们建了一个home的Vue组件，也建了一个list的组件...原创 2018-07-01 10:28:41 · 155 阅读 · 0 评论 -
Vue_单页应用VS多页应用
当一个文件以.vue 结尾，它就被称为单文件组件 一.多页面应用 二.单页应用 实现页面跳转，在以前是使用a标签链接，在Vue中，使用的是<router-link to='路由配置地址'> 进行页面跳转，和a标签差不多 eg：<template><div> <div class='Home'> &原创 2018-07-01 10:29:09 · 9264 阅读 · 0 评论 -
Vue_组件参数校验与非Props特性
一.props 子组件接收父组件的参数的时候，props注册接收的参数props:['count']子组件可以对接收的参数校验。 例如规定接收的count参数要求是Stringprops:{ count:String}如果count是别的类型就会报错 当然也可以设置多种数据类型props:{ count:[String,Number]}也可以是很复杂...原创 2018-06-29 22:07:05 · 548 阅读 · 0 评论 -
Vue_组件使用的细节点
一.is 属性 解决模板标签使用出现bug的问题tbody里面只能识别tr标签 如果我们在tbody里面引用组件，例如自定义一个tablerow<table> <tbody> <tablerow></tablerow> <tablerow&am原创 2018-06-29 22:06:55 · 241 阅读 · 0 评论 -
Vue_入门
搭建环境 一.首先安装npm,直接安装nodeJS，nodejs自带npm，安装教程安装nodejsvue.js的安装方式有很多，但是做一个大型的项目最好是使用npm搭建一个项目二.安装好nodejs和npm，因为npm安装插件很慢，安装淘宝镜像来下载插件包npm install -g cnpm –registry=https://registry.npm.taobao.org三...原创 2018-06-27 09:40:33 · 173 阅读 · 0 评论 -
Vue_基础框架目录解析
当我们用npm生成一个项目的时候，我们要了解这个项目的文件 1.index.html 是所有HTML的入口，点开该index.html 可以看到：<!DOCTYPE html><html> <head> <meta charset="utf-8"> &原创 2018-06-27 09:41:22 · 454 阅读 · 0 评论 -
Vue_经验tips
1.指令v-text和指令v-html 的区别：     如果数据中含有HTML标签的话，v-text会直接将HTML标签当成文本输出，但是v-html会将数据中的HTML标签解析成标签 注意{{}}也识别不出来标签2.template标签下只能有一个包裹元素，否则会报错3.全局样式和局部样式 <style scoped >...原创 2018-06-27 09:41:44 · 526 阅读 · 0 评论 -
Vue_localStorage本地存储
html 的localStroage 可以将用户输入的信息存储在本地浏览器中 在控制台输入：window 可以看到window对象的属性和方法//设置localStroage值localStorage.setItem（'username','zhangsan'）;//获取localStroage值localStorage.getItem（'username'）;==>zhang...原创 2018-06-27 09:41:58 · 40740 阅读 · 0 评论 -
Vue_划分组件以及组件之间的通信
在Vue中，每个组件都是一个实例，组件可以看成是一个页面的区域。 1.组件划分： 作为一个功能模块系统，划分出一个个的组件，有两种划分模式：功能模块和页面区域：//如何划分组件功能模块：select,pagenation...页面模块：header,footer,sidebar... App.vue是项目的入口，我们分好的组件也是一个Vue文件，在APP.vue我们把各个组...原创 2018-06-27 09:42:23 · 552 阅读 · 0 评论 -
Vue_父向子组件传参
父向子组件传参经常用，比如说我们写了一个select组件，调用的时候需要向子组件传初始的数据。这就要父组件向调用的子组件传参 父向子传参 现在我们想要从当前页面往子组件传参，在标签中写上传参的数据：<button v-bind:content="msg"> 这时在子组件中调用this.msgfromfather是undefind 的，需要在子组件的export default ...原创 2018-06-27 09:42:52 · 1958 阅读 · 0 评论 -
Vue_子向父组件传参
子向父传递参数需要自定义事件 使用 on(eventName)监听事件使用on(eventName)监听事件使用on(eventName) 监听事件 使用 emit(eventName)触发事件 子向父传递参数： 在子组件中个设置一下触发函数，并将参数传给父组件。export default{ data(){ return{ msg:'Hello ...原创 2018-06-29 22:04:49 · 610 阅读 · 0 评论 -
Vue_实例、Vue实例的生命周期钩子
一.Vue实例：var vm= new Vue({});如何看生成的Vue实例呢？ 在控制台直接输：vm 敲回车。就会显示出vm的实例对象 vm.$data 敲回车 ，就可以看到实例中data中的信息。 vm.$el 敲回车 就可以将实例负责接管的DOM元素输出来 vm.$destroy 敲回车 Vue实例就会被销毁，怎么看Vue实例被销毁了呢？给Vue实例的...原创 2018-06-29 22:05:03 · 403 阅读 · 0 评论 -
Vue_模板语法
1.插值表达式：{{}}2.v-text=“name” ：该指令指向的“name”并不是字符串。它指的一定是JS的表达式3.v-html: 指向实例中的数据 和v-text的区别，v-text不会处理html标签4.v-bind:title=“name” 绑定的title属性因为Vue指令的值都是JS表达式。所以:v-text=“name + ‘11111111’”...原创 2018-06-29 22:05:47 · 107 阅读 · 0 评论 -
Vue_计算属性，方法和侦听器
一.计算属性： 我们在开发当中通常会遇到这种情况，需要返回的是两个变量的计算值 ，那我们就在computed属性中去定义计算的方法： eg： 我们现在有两个变量：fristname 和 lastname 。我们想要页面输出的是fullname 全名: 方法一：用computed计算属性来实现data(){return{ firstname:'hani', lastname:'...原创 2018-06-29 22:06:02 · 241 阅读 · 0 评论 -
Vue_样式绑定
1.v-bind：class=‘{activitded:isActivitded} ’ class的对象绑定      如果是是一个对象，{red:’isRed’} key 是class的名字，value是是否有这个class 变量是一个布尔值     &原创 2018-06-29 22:06:15 · 509 阅读 · 0 评论 -
Vue_条件渲染和列表渲染
一.条件渲染1.v-if： v-if=‘name’ ：name值的true 或 false ，决定着这个标签的是否显示2.v-show： v-show=‘show’ show的值true 或 false ，决定着这个标签的是否显示 两者的区别：当表达式中值是为false时，v-show是display为none；v-if是直接将这个DOM元素从网页中删除。3.v-else...原创 2018-06-29 22:06:32 · 776 阅读 · 0 评论 -
Vue_实战_安装less
首先，说明一点，如果是使用npm init webpack 项目名 的方式创建的项目,无需手动配置webpack所以再vue中使用less就非常简单了，只需要安装less, less-loader就行了npm install less less-loader --save //将less和less-loader安装到开发依赖npm run dev如果安装成功那么就可以再vue组件...原创 2018-07-10 15:16:58 · 3625 阅读 · 0 评论