Vue基础总结

属性

参数名	解释
el	el:’#app’.表示这是 id为app 的Vue示例
data	data:{} 放需要用到的参数数据
menthids	放需要用到的方法
router	将路由规则对象，注册到 该Vue实例上，用来监听 URL 地址的变化
watch	监视 data中数据的变化，然后触发这个 watch 中对应的function处理函数 'firstname':function(newVal，oldVal){ } firstname 为data中定义的字段名
computed	可以定义一些【计算属性】，计算属性的本质就是一个方法，使用时把它们的名称直接当做属性来使用。只要计算属性 function 方法内部人和data 中的数据发生了变化，就会重新计算这个属性的值 ’fullname’:function(){ return this.name+"-"+this.lastname 方法内必须return 一个值

标签表达式

表达式	代码	解释
v-clock	<p v-clock> ++{{msg}}++</p>	样式加[v-clock]{display：none}解决闪烁问题 作用： 替换{{msg}}
v-text	<p v-text="msg">=====</p>	默认没有闪烁问题 会覆盖元素中原本的内容
v-html	<p v-html="msg">1222</p>	替换元素内的内容。会显示解析为html 标签
v-bind: 简写（：）	:title="msg +'123'"	可简写为 ：要绑定的属性 可以写合法的js表达式 （“替换后123”）
v-on: 简写（@）	@click=“show”	事件 @后加指令
v-model	<input v-model="msg">	可以实现 表单元素和Model 中数据的双向数据绑定 只能运用到表单元素中如：inpunt(radio , text ,address , email…) select checkbox textarea
v-for	1.迭代数组： <li v-for="(item , i) in list"> 索引：{{i}} 姓名：{item.name} </h1> 2. 迭代对象上的属性： < div v-for="(val , key , i) in userInfo"> 值是{{val}} 键是{{key}} 索引是（可不加）{{i}}</div> 3.迭代数字： <p v-for="count in 10">这是第 {{count}} 个</p>（in 后可放 普通数组，对象数组，对象，数字从1开始）	循环 若需要选择 需要加 属性 ：key=“item.id” key 属性只能使用number或string
v-if	<h3 v-if='falg'> 123</h3> data:{falg:true},	1.每次都会重新删除或创建元素 2.有较高的切换性能消耗 3.如果元素可能永远不会被显示出来 推荐 v-if
v-else	<div v-if = "flag"></div> >div v-else="flag">	和v-if 一起用，表示 v-if 为 false时 显示 v-else中的内容
v-show	<h3 v-show='falg'> 123</h3> data:{falg:true},	1.每次不会重新进行dom的删除和创建操作，只是切换元素的 display ： none 样式 2.有较高的初始渲染消耗 3.如果元素频繁的切换 ，推荐使用v-show ，做好不要用 v-if
全局过滤器	{{ msg|nameFail }}or{{ msg |nameFail(‘疯狂’，‘123’)|test}} Vue.filter('nameFail',function(msg , arg ,arg2)	过滤器可以用那个在两个地方：mustachc插值 和 v-bind 表达式。 由‘管道符（|）’表示
私有过滤器
自定义全局键盘修饰符
自定义全局指令	<input type="text" v-focus>	自定义全局指令 1.和样式相关的操作，一般在 bind 中执行。 2.和js行为有关的操作，最好在 inserted 中去执行，防止js行为不生效
简写		自定义指令简写
定义私有指令
简写

事件修饰符

事件修饰符

代码	解释
.stop	阻止冒泡 加谁谁不显示 其他照常执行
.prevent	阻止默认事件 如：a标签 默认点击跳转页面效果
.capture	添加事件监听器时使用事件捕获模式
.self	只当时间在该元素本身（比如不是子元素）触发时触发回调 其他都不执行
.once	事件只触发一次

标签

标签	解释
<component :is=" 名称" >	用来展示对应名称的组件
<template id="templ">	在 被Vue控制的 #app外面，使用 template 元素，定义组件的HTML模板结构
<transition>	使用transition元素把需要被动画控制的元素，包裹起来
<transition-group>	把需要使用动画效果的通过遍历的元素 用它包裹起来