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 类名在节点插入 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

<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css"> <div id="example-3"> <button @click="show = !show"> 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

 

 

 

vue里面的响应式和非响应式实现  https://run.iviewui.com/woLuy4k9  这里顺便提供一个iview 的测试地址，有什么不太确定或者是看api需要实践的都可以先在这里演示一下

主要原因是在用v-model的时候不能绑定值，所以查了一下资料是由于响应式原理的问题

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的

1、在data里面设置一个对象   testFormData:{}

2、直接通过后台get或者post请求设置  this.testFormData.userName = "323233";可以看到当点击Submit按钮后input框是没有数据展示出来的，但是下面console.log()是可以展示出来的数据，这就是Vue不能检测到对象属性的添加和删除，因为刚开始你的对象formValidate是没有任何属性的，你只是在方法里面添加了，但是vue不能识别，这里解决办法有三个

a、在全局对象中设置需要改变赋值的属性 ,这样点击Submit的时候是有值的哦

b、像api里面写的一样  如果你需要改变的数据是json对象，可以使用 

var vm = new Vue({ data:{ a:1 } }) // `vm.a` 是响应的 vm.b = 2 // `vm.b` 是非响应的

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

Vue.set(vm.someObject, 'b', 2)

您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.someObject,'b',2)

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

c、如果是数字的时候

// Vue.set Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

 

vue过滤器

先设置过滤器的命名，然后在方法中设置filters的方法中设置capitalize这个过滤方法，默认过滤方法的参数就是下面message

这里pagelist，cc是在全局变量中设置的值，可以直接使用;可以在过滤条件中设置多个参数方便在过滤中实现更精确的过滤

<!-- 在双花括号中 --> {{ message | capitalize(pagelist,cc) }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>

filters: {
  capitalize: function (value,arg1,arg2) {
console.log(arg1);
console.log(arg2);

    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}