VueDay1

1.MVVM:

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

2.v-cloak v-text v-html指令的用法

• v-cloak 解决闪烁问题 (插值表达式不会覆盖标签里面其他内容)

• v-text v-html 则会覆盖 ，v-html可以解析html标签.

常用指令学习

1. v-bind: :是Vue中，用于绑定属性的指令

   • 可以简写为 :要绑定的属性

   • v-bind中可以写合法的js表达式。

2. v-on:click :Vue中提供的绑定事件指令 事件处理逻辑写在Vue对象中 methods对象中

   • 缩写为 @click=""

3. 事件修饰符：

   • .stop 阻止冒泡

   • .prevent 阻止默认事件

   • .capture 添加事件侦听器时使用事件捕获模式

   • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

   • .once 事件只触发一次

4. js两种事件机制：1.事件冒泡：从里向外开始执行 阻止事件冒泡 evt.stopPropagation();2.捕获 ：从外向内 3.阻止事件默认行为： e.preventDefault();

5. v-model:1.v-bind: 只能实现数据的单向绑定。从M -V2.v-model 可以实现数据双向绑定 ：(只能运用在表单元素中。)

3.使用class样式

1.数组

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

2. 数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

3. 数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

4. 直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

5. 使用内联样式： 直接绑定style属性 v-bind:style="{}or[]or variable"

4.v-for指令

1.遍历数组 <p v-for="(item,i) in list">{{item}}</p>2.遍历对象 <p v-for="(val,key,i) in list">{{val}}</p> :遍历对象值在前，键在后。3.迭代数字: <p v-for="count in 20"></p> :迭代数字从1开始。

4. v-for的注意事项:在特殊情况下或使用组件，需要指定唯一的字符串或数值形 key 属性

   
           <p v-for="item in list" :key='item.id'></p>

5.v-if v-show指令：

• v-if:切换是通过删除或创建实现切换的。(要较高的切换性能消耗)

• v-show：是通过切换display：none实现切换的。 （有较高的初始渲染消耗）

6.vue中的过滤器

1. 全局过滤器 ：

Vue.filter('过滤器名称',function(data){
    //data为过滤之前的数据
})

2. 私有过滤器：

var vm=new Vue({
    el"",
    data：{},
    methods:{},
    filters{
               dateFormat:function(data){
    
}    
               } 
})

3. 过滤器使用时就近原则，先查找私有过滤器，没有则继续在全局过滤器中查找.

7.ES6 数组 字符串扩展：

1. array.filter()：

array.filter(function(currentValue,index,arr), thisValue)

2. array.some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

3. ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

   有两个参数，第一个字符串的位数，2补全的字符串内容

8.按键修饰符：

1. 系统提供的有：.enter

2. .tab

3. .delete (捕获“删除”和“退格”键)

4. .esc

5. .space

6. .up

7. .down

8. .left

9. .right

   2.自定义全局按键修饰符：

   
   Vue.config.keyCodes.f1 = 112

9.定义指令

1. 定义全局指令：

   
   Vue.directive('name',{
       bind:function(el){},
       //当元素绑定时立即执行（1次） 和样式相关的操作，一般在bind中执行
       inserted:function(el){},
       //当元素插入到dom时执行（1次）
       update:function(){el}
      //当发生更新时就执行，可以执行多次.
   })

2. 定义私有指令：

   
     directives:{
      'fontWeight':{
          bind:function(el,binding){
              el.style.fontWeight=binding.value;
          }
      }
     }

3. 简写：如果你只想要在bind和update中定义指令:

   
   Vue.directive('color-swatch', function (el, binding) {
     el.style.backgroundColor = binding.value
   })

10.Vue实例生命周期

1. 创建生命周期： beforeCreated created beforeMount mounted

2. 运行生命周期： beforeUpdate updated

3. 销毁生命周期：beforeDestory destoryed

11.vue-resource的使用

1. 在引入vue之后，引入vue-resource文件

2. 相当于给添加 window.Vue.$http属性

3. 具体使用：

• get(url, [config])

• jsonp(url, [config])

• post(url, [body], [config]

this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

• 设置post提交数据为普通表单：

post的[config]={emulateJSON:true} 等价于设置request的Content-Type: application/x-www-form-urlencoded

4. 全局配置数据接口

Vue.http.option.root="http:studyit.io/" 配置根路径 （下面的请求路径为绝对路径，不要加 \）

5. 全局配置emulateJson:

Vue.http.options.emulateHTTP = true;

12.Vue动画

1.过渡动画

<transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
  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-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

2.使animate.css:

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" 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"
   :duration="{enter:200,leave:400}"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

3. 使用钩子函数定义动画

 <input type="button" value="快到碗里来" @click="flag=!flag">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>

 

 // 自定义动画
        beforeEnter(el) {
          //在动画开始之前执行
          el.style.transform = "translate(0,0)"
        },
        enter(el, done) {
          //初始化动画函数
          el.offsetWidth
          el.style.transform = "translate(200px,400px)"
          el.style.transition = "all 2s ease"
          done()
        },
        afterEnter(el) {
          // 让小球隐藏
          this.flag = !this.flag
        }

4.transition-group 动画需要加上特殊的css样式：

• 有两个特殊属性：

1. appear:页面初始加载会有过渡效果

2. tag="ul":会将transition-group渲染为ul标签，默认渲染为span标签.

.v-enter,.v-leave-to{
      opacity: 0;
      transform: translateY(80px);
    }
    .v-enter-active,.v-leave-active{
      transition: all 1s ease;
    }
//下面两个是为了效果更好的实现.
    .v-move{
      transition: all 1s ease;
    }
    .v-leave-active{
      position: absolute;
    }

13.v-if 和v-else指令:

可以实现两个组件的切换：通过定义一个标示falg

<login v-if="falg" @click="falg=true"></login>
<register v-else="falg" @click="falg=false"></register>
​
data:function(){
    return {
        flag:true
    }
}

• Vue提供的标签

temlpate  component   transition transition-group

<component :is="componentName"></component>

• 组件动画：只需要用transition把组件包裹起来

  • mode:设置过渡效果先出再进.

  <transition name="" mode="out-in">
    <component :is="componentName"></component>
  </transition>

• 定义组件的另一种方式

var login={
    template:"<h1>{{msg}}<h1>",
    data:function(){
        return {
            msg:'我是登录组件'
        }
    },
    mothods:{
        
    }
}
//注册全局组件,
Vue.component('login',login)
//注册私有组件
components:{
    login
}
//调用·
<login></login>