vue学习笔记

vue eslint关闭

eslint是针对vue代码书写格式等的检测，由于在写项目的时候往往会因为一两个空格键等报错，一直在调整样式，所以这里直接将其先关闭，不然严重影响代码进度，特别是平常没有怎么注意代码书写格式的人：

操作：

找到webpack.base.conf.js      在里面搜索eslint  找到定义这个eslint的rules然后让其调用的方法注释就可以了

vue的配置安装

npm安装指定版本的vue配置用@版本号

vue2相对vue1的改动

<template>
<div class="header">
<h1 class="style">hello,我是头部标题{{fmsg}}</h1>
<input type="button" value="click" @click="getparentinfo">
</div>
</template>

//里面必须要一个根元素才行写多个html标签的话

2. 关于组件定义
Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——废弃

Vue.component(组件名称,{在2.0继续能用
data(){}
methods:{}
template:
});


2.0推出一个组件，简洁定义方式：
var Home={
template:'' ->   Vue.extend()
};
3. 生命周期
之前:
init 
created
beforeCompile
compiled
ready √->     mounted
beforeDestroy 
destroyed
现在:
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替之前ready  *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后

4. 循环
2.0里面默认就可以添加重复数据


arr.forEach(function(item,index){


});


去掉了隐式一些变量
$index $key


之前:
v-for="(index,val) in array"
现在:
v-for="(val,index) in array"




5 track-by="id"
变成
<li v-for="(val,index) in list" :key="index">

6. 自定义键盘指令
之前：Vue.directive('on').keyCodes.f1=17;

现在:  Vue.config.keyCodes.ctrl=17

6. 过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能，自己通过js实现


到了2.0， 内置过滤器，全部删除了




lodash 工具库 _.debounce(fn,200)




自定义过滤器——还有
但是,自定义过滤器传参


之前: {{msg | toDou '12' '5'}}
现在:  {{msg | toDou('12','5')}}

------------------------------------------------------
组件通信:
vm.$emit()
vm.$on();


父组件和子组件:


子组件想要拿到父组件数据:
通过  props


之前，子组件可以更改父组件信息，可以是同步  sync
现在，不允许直接给父级的数据，做赋值操作


问题，就想更改：
a). 父组件每次传一个对象给子组件, 对象之间引用√
b). 只是不报错, mounted中转
------------------------------------------------------
可以单一事件管理组件通信: vuex
var Event=new Vue();


Event.$emit(事件名称, 数据)


Event.$on(事件名称,function(data){
//data
}.bind(this));
------------------------------------------------------
debounce ---》  延迟时间 废弃  
->   lodash
_.debounce(fn,时间)

vue2路由的更改

<script src="js/vue.js"></script>
<script src="vue-router/dist/vue-router.min.js"></script>

<div id="demo">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻页</router-link>
</div>
<div>
<!-- 展示页-->
<router-view></router-view>
</div>
</div>
<script>
//设置组件
const   Home = {
template:'<h2>我是主页</h2>'
    };
const  News = {
template:'<h2>我是新闻页</h2>'
    };
//配置路由
const routes = [
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',redirect:'/home'}//表示默认页
];
//生成路由  （缩写）相当于 routes: routes
const router = new VueRouter({routes});
new Vue({
router,
el: '#demo'

    })
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
/*  const app = new Vue({
router
}).$mount('#app')
*/
</script>

transition  用于页面切换中的时候属于单页面的东西

深入响应式原理

在new Vue中定义的data里面的参数数据是响应的，只有在Vue里面才会被响应，在外面的不会被响应

由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值:

var vm = new Vue({

data: {

// 声明 message 为一个空值字符串

message: ''

},

template: '<div>{{ message }}</div>'

})

// 之后设置 `message`

vm.message = 'Hello!'

vm.$nextTick()?????

过渡效果

过渡

过渡的-CSS-类名

的-CSS-类名

过渡的-CSS-类名

会有 4 个(CSS)类名在 enter/leave 的过渡中切换

1. v-enter

   : 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

2. v-enter-active

   : 定义进入过渡的结束状态。在元素被插入时生效，在 

   transition/animation

    完成之后移除。

3. v-leave

   : 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

4. v-leave-active

   : 定义离开过渡的结束状态。在离开过渡被触发时生效，在 

   transition/animation

    完成之后移除。

5. v只是前缀可以切换成下面的

.slide-fade-enter-active, .slide-fade-leave-active {
transition: opacity .5s
}
.slide-fade-enter, .slide-fade-leave-active {
opacity: 0
}

/*CSS 动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。*/
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-active {
transform: translateX(10px);
opacity: 0;
}

CSS 动画

CSS 动画用法同 CSS 过渡，区别是在动画中 

v-enter

animationend

.bounce-enter-active {

animation: bounce-in .5s;

}

.bounce-leave-active {

animation: bounce-out .5s;

}

@keyframes bounce-in {

0% {

transform: scale(0);

}

50% {

transform: scale(1.5);

}

100% {

transform: scale(1);

}

}

@keyframes bounce-out {

0% {

transform: scale(1);

}

50% {

transform: scale(1.5);

}

100% {

transform: scale(0);

}

}

自定义过渡类名

我们可以通过以下特性来自定义过渡类名：

• enter-class

• enter-active-class

• leave-class

• leave-active-class

和组件框架连用

elementUI:
如何使用


官网:http://element.eleme.io/
使用:
1. 安装 element-ui
npm i element-ui -D


npm install element-ui --save-dev


//   i ->    install
//   D     ->    --save-dev
//   S ->    --save