复盘-----vue

vue是一套用于构建用户界面的渐进式框架，简单、高效、生态丰富、插件多

1.vue文本渲染指令 v-html=“”

①.v-text指令
②.{{}}
③.简单运算{{2+2}}
④.简单的js
{{msg.split(‘’).resverse(‘’).jion(‘’)}}

        "des":"我爱祖国"
         <p v-html="des"></p>
1
2

三元运算符{{5>3?‘大于’:‘小于’}}

2.属性渲染指令 v-bind:title=“”

3.vue条件渲染指令 v-if v-show

①.v-if ----------通过移除dom隐藏
②.v-else-if
③.v-else
④.v-show -----通过css方式隐藏

4.列表渲染指令 v-for

<div v-for="item in list">
  <p>{{item}}</p>
</div>
1
2
3

5.属性渲染指令

①.v-bind

<p v-bind:title="msg">我我我</p>
//简写
<p :title="msg">wowowo</p>
1
2
3

②.v-model ----表单属性绑定
v-model 建立双向绑定
v-bind html中属性 css样式 对象 数组 number类型 bool类型

flag:true
<input type="checkbox" v-model="flag">女
<button type="button" v-bind:disabled="!flag">注册</button>
1
2
3

6.事件处理

①.事件处理及简写v-on:click=“” :click=“”
②.事件响应函数

7.事件修饰符

.once 执行一次
.stop 阻止事件冒泡
.prevent 阻止默认事件
.passive滚动即触发，不待滚动完成
.capture捕获

8.按键修饰符 @keyup.enter=“list.unshift($event.target.value)”

.enter回车
.space空格
.del删除
.esc取消
.up上
.down下
.left左
.right右

9.表单修饰符

①.v-model.lazy=“” 不实时更新
②.v-model.number=“” 实时更新

10.watch监听

handler(nval,oval){//handler是固定模式  nval是最新值 oval是修改前的值
 console.log("数据由"oval,"变化为"nval)
 deep:true;
}
1
2
3
4

11.管道与过滤 filter

①.filter过滤

<div id="app">
	<p>{{'wuhu'|hide}}</p>
	<p>{{'aha'|hide}}</p>
</div>
<script>
	var vm = new Vue({
	el:"#app",
	data(){
	return{
	 }
   },
   filters:{
     hide(val){
	     var str = val.split('');//分割字符串
	     str[1] = *;//把index为1设为*
	     return str.jion('');//转换为字符串返回
		}
	}
 })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

②.filter过滤小数点

12.类class与样式style的绑定

:class=""
:style=""
1
2

13.自定义指令