vue学习笔记

介绍

Vue是构建用户界面的渐进式框架，

一、基本使用

mvvm

• MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
• m model
  • 数据层 Vue 中 数据层 都放在 data 里面
• v view 视图
  • Vue 中 view 即 我们的HTML页面
• vm （view-model） 控制器 将数据和视图层建立联系
  • vm 即 Vue 的实例 就是 vm

 二、指令（以v-开头）

v-cloak:

能够解决插值表达式在未加载出来之前闪烁问题

v-text：

没有闪烁问题，会覆盖元素中原本的内容

      <h4 v-text=”msg”>++++++++</h4>只会显示msg的内容，不会显示++++++++

v-html：

会覆盖元素中原本内容，会把msg内容当做html解析后输出

           <div v-html=”msg”>+++++=====</div>

                   Msg=”<h1> 我是一级标题</h1>”

v-pre：

显示原始信息跳过编译过程，跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编译加这个指令可以加快渲染

v-bind：

• 绑定属性,可以简写为一个冒号：

      <input type=”button” value=”按钮” v-bind:title=”mytitle”>

      <input type=”button” value=”按钮”  :title=”mytitle”>

• 绑定对象

Vue中的样式：<h1 v-bind:class=sty01>我们都在学习Vue,在data中定义sty01样式</h1>

                          <h1 v-bind:style=”{color:’red’ ,’font-weight’=200}”>直接书写样式</h1>

v-on：

绑定事件，可以简写为@
                 

  <div id=app>
       <input type=”button” value=”按钮”  v-on:click=”show”>
       <input type=”button” value=”按钮”  @click=”show”>

   </div>

  <script>
       Var vm=new Vue({
               el:’#app’,
               data:{},
               Methods:{
                     Show:function(){
                               Alert(‘hello’)
                                }
                    }

            })
  </script>

• 事件修饰符：

 

.stop阻止冒泡             

 .prevent阻止默认行为

.capture捕获触发事件的机制  

.self实现只有点击当前元素才会触发事件处理函数

 .once事件触发一次

常用的按键修饰符

.enter =>    enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) =>  删除键
.esc => 取消键
.space =>  空格键
.up =>  上
.down =>  下
.left =>  左
.right =>  右

在Vue中可以通过config.keyCodes自定义按键修饰符别名

 

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。


<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--当点击enter或者space时  时调用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >


<script>
	var vm = new Vue({
        el:"#app",
        methods: {
              submit:function(){},
              alertMe:function(){},
        }
    })

</script>

 

v-model:

数据双向绑定，只能运用在表单元素中，<input>、<select>、<textarea>、components

v-for循环：

<p v-for=”item in list” >{{item}}</p>

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

key 的作用

    key来给每个节点做一个唯一标识
    key的作用主要是为了高效的更新虚拟DOM

v-if和v-else-if

• 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
• 2- 进行两个视图之间的切换

<p v-if=”flag”>这是v-if控制的元素</p>//每次重新删除或创建，不适合于频繁的切换

v-show：

<p v-show=”flag”>这是v-show控制的元素</p>

• v-show本质就是标签display设置为none，控制隐藏
  • v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
• v-if是动态的向DOM树内添加或者删除DOM元素
  • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

二、过滤器：

全局过滤器

Vue.filter(‘过滤器的名称’,function(参数1，){ }) 第一个参数永远都是过滤器管道符前面传递过来的数据

私有过滤器：在创建的vue对象内部，有一个filters：{ }对象，在此定义私有过滤器

调用时私有过滤器优先调用

调用：{{ 数据|过滤器名称}}

 

自定义指令

自定义全局指令：使用Vue.directive()定义全局的指令

<!-- 
  使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 
-->
<input type="text" v-focus>
<script>
// 注意点： 
//   1、 在自定义指令中  如果以驼峰命名的方式定义 如  Vue.directive('focusA',function(){}) 
//   2、 在HTML中使用的时候 只能通过 v-focus-a 来使用 
    
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  	// 当绑定元素插入到 DOM 中。 其中 el为dom元素
  	inserted: function (el) {
    		// 聚焦元素
    		el.focus();
 	}
});
new Vue({
　　el:'#app'
});
</script>

         Vue.directive(‘指令名称’，{

                   bind:function(el){ } //当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次

                   inserted:function(el){ }//元素插入到dom中，和js行为有关的操作放在此

                   updated:function(el){ }//vnode更新时

})

自定义私有指令：在创建的Vue对象中，directives:{ }定义私有指令

 

<input type="text" v-color='msg'>
 <input type="text" v-focus>
 <script type="text/javascript">
    /*
      自定义指令-局部指令
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'red'
        }
      },
   	  //局部指令，需要定义在  directives 的选项
      directives: {
        color: {
          bind: function(el, binding){
            el.style.backgroundColor = binding.value.color;
          }
        },
        focus: {
          inserted: function(el) {
            el.focus();
          }
        }
      }
    });
  </script>

 

声明周期函数：

 

数据请求：vue-resource和axios的第三方包

 

 

Vue动画：

自定义：1.<transition></transition>把需要被动画控制的元素包裹起来

                       2.自定义两组样式，控制transition内部元素.v-enter/.v-leava-to和.v-enter-active/.v-leave-active

Animated第三方库：

钩子函数：

列表需要动画效果时,如果是v-for循环渲染出来的，要使用<transition-group></transition-group>包裹

 

 

组件：不论哪种方式创建的组件，template属性指向的模板内容，必须有且仅有一个根元素

使用vue.extend创建组件

// 1.1使用vue.extend创建组件

              var com1=Vue.extend({

                       template:'<h3>这是使用vue.extend创建的组件</h3>'

              })

              //1.2使用vue.component('组件名称'，创建出来的模板对象),组件名称如果是驼峰命名，在使用时把大写的驼峰改为小写字母，同时两个单词见用-连接

              Vue.component('mycom1',com1)

              <!-- 1.3使用组件，直接把组件名称已html标签引入的页面中 -->

              <mycom1></mycom1>

使用vue.component创建组件

              Vue.component('mycom2',{

                       template:'<h1>这是使用vue.component创建的组件</h1>'

              })

使用template元素，定义组件的HTML模板结构

              Vue.component('mycom3',{

                       template:'#temp1'//在被控制的#APP外面，使用template元素，定义组件的HTML模板结构

              })

<template id="temp1">

              <div>

                       <h2>通过template元素在外部定义组件</h2>

                       <h4>这种方式结构清晰</h4>

              </div>

     </template>

实例内部私有组件：components:{  }

组件可以有自己的data和methods，组件中的data必须为一个方法且返回一个对象

 

组件切换：方法一：v-if和v-else根据flag值进行切换

         方法二：<component :is=”组件名称”></component>

                 Component是一个占位符，来展示对应名称的组件，is属性可以用来指定要展示的组件的名称