web前端框架之vue---知识点

在vue中可以使用插值表达式{{}}:表达式中的值可以为：对象，字符串、判断后的布尔值、三元表达式

v-model实现双向绑定  只适用于有value属性标签  比如input标签

v-bind后可以跟标签的属性和自定义属性  比如<input type='text' v-bind:value='msg' /> ，可以简写，将v-bind省略：<input type='text' :value='msg' /> 

v-on后跟事件名称，如：v-on:click='change'，可以简写，将v-on省略：:click='change'

在2.2.0+的版本中，当在组件中使用v-for时，绑定key是必须的，而且key绑定的数据只能是***字符串或数字***

 

事件修饰符:

.stop:阻止冒泡

.prevent:阻止默认事件 比如：<a href="https://www.baidu.com @click.prevent='link'>阻止默认跳转百度</a> //如果时间方法后面有()表示要在方法里传参数，如:@click.prevent='link(id)'

.capture:添加事件侦听器时使用事件捕获模式，比如下面的stop修饰符示例中在外层div标签上对click事件做@click.capture后，那么事件的执行顺序为先执行div点击事件，然后再执行按钮执行事件

.self:只当事件在该元素本身(比如不是子元素)触发时触发回调。

#self修饰符示例：表示只有点击外层div元素的时候才会触发事件，如果点击按钮的话，不会触发div事件。
<div @click.self='divHandler'>
      <input type='button' @click='btnHandler' value='按钮' /> 
  </div>

.once:事件只触发一次。比如<a href="https://www.baidu.com @click.prevent.once='link'> //表示只对当前click.prevent事件只触发一次，下次点击将跳转
比如阻止事件冒泡，使用stop事件修饰符。示例如下：

<div @click='divHandler'>
   <input type='button' @click.stop='btnHandler' value='按钮' /> //使用stop修饰符后，当点击按钮时，只响应了按钮点击事件，而div点击事件就不会触发。
</div>

注意：stop和self区别：self只会阻止自己身上的冒泡行为，并不会真正阻止冒泡行为，比如按钮事件外层有两层div，里面一层div添加了self修饰符，这样在点击按钮的事件时候，
　　　先触发按钮事件，后触发最外层div事件，而里面一层添加self修饰符的div没有触发事件。
　　　如果只对按钮添加点击事件的stop修饰符，情况为外面两层div事件都将被阻止掉，实现阻止冒泡行为。

 

在监听键盘事件时，Vue允许为v-on在监听键盘事件时添加关键修饰符。比如<input @keyup.enter='add' /> //表示在点击enter键后触发add事件
vue自身提供的按键修饰符：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

至于vue以外的按键修饰符，需要自定义，自定义方式为根据键盘码来配置按键修饰符。比如自定义一个F2键的按键修饰符为：Vue.config.keyCodes.F2 = 113
要想自定义按键修饰符，就需要知道各个键盘码对应的值，参考文章 js里键盘事件对应的键码：http://www.cnblogs.com/wuhua1/p/6686237.html

 

解决插值表达式在网络速度慢时页面加载出现闪烁的问题：

在使用插值表达式的标签内添加v-cloak属性，如<p v-cloak>{{ msg }} </p>，并使用style让具有v-cloak属性的标签隐藏<style>[v-cloak]{display:none}</style>。
这样在慢速慢的时候页面显示的时候就不会出现{{msg}}的源代码显示。一般使用v-text或v-html指令就避免闪烁问题，但标签中的内容将被覆盖掉。

 

自定义指令,比如定义一个获取文本框焦点的指令：

Vue.directive('focus',{
  //当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
  bind:function(el){} //这里的el是dom元素，所以可以直接对dom元素进行操作
  //当元素插入到DOM中的时候，会执行inserted函数，只执行一次
  inserted: function(el){ el.focus() }
  //当VNode更新的时候，会执行updated,可能会触发多次
  updated: function(el){}
})

自定义好指令后，就可以在标签中使用这个指令了，使用的时要在指定名的前面加上v- 比如给input标签在页面加载后获取焦点<input type='text' v-focus />

 

动画效果transition:

是Vue官方提供的元素，作用为将需要实现控制动画的元素包裹起来，从而事项被包裹元素动画显示。然后设置进场、离场、过度阶段样式即可。如果不想用v-前缀来定义动画样式，可以在transiton元素中设置name属性的值为自定义前缀名还可以配合animate.css提供的样式来提供被包裹元素的动画。

<transition enter-active-class="bounceIn" leave-active-class="bounceOut"> 
     <h3 v-if='flag' class='animated'>这是个动画</h3>
</transition>

如果要对v-for循环的元素做动画渲染的话，需要用transition-group对v-for循环的元素做包裹处理。

 

如果一个标签使用多个class样式，可以在此标签中对class属性做v-bind绑定，然后对class属性的值传递数组或对象

1、直接传递一个数组  <h1 :class="['red','thin']">class样式</h1>
2、在传递的数组中使用三元表达式：<h1 :class="['red','thin',flag?'active':'']">class样式</h1> //读data数据中变量flag判断是否为true来使用active样式
3、在数组中嵌套对象：<h1 :class="['red','thin',{'active':flag}]">class样式</h1>
4、直接传递一个对象：<h1 :class="{red:true,thin:true,active:true}">class样式</h1>

 

父组件向子组件传递数据：通过父组件对子组件绑定自定义属性，然后在子组件中通过props:['父组件绑定的自定义属性名']属性调用自定义属性即可
子组件向父组件传递数据：通过在子组件中定义一个事件，然后在子组件定义的事件中通过this.$emit(父组件定义的事件名,传递的数据)来触发父组件定义的事件。

 

watch和computed:watch监控的是单个属性的变化，而computed可以监控多个属性的变化

 

<keep-alive> <app/> </keep-alive>:在app组件切换的过程中将状态保持在内存中，防止重新渲染DOM

 

npm install vue-router --save
$route:保存路由信息对象,挂载到vue实例化对象中，在容器中使用this.$route来查看路由信息
$router:挂载到vue实例化对象中，在容器中使用this.$router，主要用来做路由导航,比如页面的跳转、页面的向前或向后等操作。。。

 

发起ajax请求可以使用axios或vue-resource
npm install axios --save

 

如果需要在一个路由定义下展示多个组件的话，这时候需要使用命名视图方式，比如在实现一个经典布局(有header sidebox contendbox),首先定义这三个组件，
然后定义路由方式：routes:[{path:'/',components:{'default':header,'side':sidebox,'conten':contendbox}}],然后设置命名视图<router-view></router-view><router-view name='side'></router-view><router-view name='content'></router-view>,最后对这三个组件的内容设置样式即可。