vue学习笔记

最新推荐文章于 2024-05-30 13:09:09 发布

weixin_40314969

最新推荐文章于 2024-05-30 13:09:09 发布

阅读量94

点赞数

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 的过渡中切换

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
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 类名在节点插入 DOM 后不会立即删除，而是在 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

Toggle render

</button>

<transition

name="custom-classes-transition"

enter-active-class="animated tada"

leave-active-class="animated bounceOutRight"

<p v-if="show">hello</p>

</transition>

</div>

new Vue({

el: '#example-3',

data: {

show: true

}

})

和组件框架连用

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

weixin_40314969

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记

vue eslint关闭eslint是针对vue代码书写格式等的检测，由于在写项目的时候往往会因为一两个空格键等报错，一直在调整样式，所以这里直接将其先关闭，不然严重影响代码进度，特别是平常没有怎么注意代码书写格式的人：操作：找到webpack.base.conf.js 在里面搜索eslint 找到定义这个eslint的rules然后让其调用的方法注释就可以了vue的配...
复制链接

扫一扫