VUE是个MVVM框架(没完全遵循),即 M <-> VM <-> V
先来介绍一下MVC
model M 数据 ajax/jsonp/数据解析 可以复用
view V 视图表现层 展示数据、创建元素,变色,运动 可以复用
control C 控制层(串业务,事件驱动) 一般不复用
new Vue({
el:‘选择器’ 要控制的那片html代码
data:{key:value}数据
methods:{fnName:fn} 方法
})
<!-- view层 V -->
<div id="app">
//{{数据名}} 模板 mustche 插值表达式 声明式渲染
<h3>{{title}}</h3>
<p>{{duanluo}}</p>
</div>
<script>
//vm 是new出来的Vue实例
let vm = new Vue({//配置选项
// key:value 选项
// el:'选择器'
el:'#app',
data:{ //MODEL M
title:'标题',
duanluo:'段落'
}
})
<script>
model层不同的数据类型在view层的渲染结果,即data:
- string仍为字符
- number转变为字符
- 布尔值会转变为字符
- arr转变为字符
- json转变为字符
- fn转变为字符: {{fn}}
- fn2: {{fn()}}
- undefined变为空字符
- null变为空字符
- 空字符不作为
插值表达式 | 指令 | 属性
{{数据名}} 模板 mustche 插值表达式 声明式渲染
v-text="数据名" vue特有的属性(指令)
v-html="strong" 非转义输出
v-for="(val,index) in 数据" val值 index索引 变量数组、对象
默认 :key="index" 指定key 是个bmw字符 vue是认得 修改VDom的key值
:key="item.id" 指定key 是数据id(唯一性) 修改VDom的key值
key的优势: 避免数据错乱导致的视图问题,提供性能
v-bind:html属性="数据" 普通的html属性绑定数据
:html属性="数据" 简写 title/src/url/.....
事件:
v-on:事件名="方法"
@事件名="方法" 简写
@事件名="方法(参数)"
@事件名="方法($event,参数)" methods:{方法:function(ev,参数){ev/event}}
注意:vue提供的选项的值如果是函数时,不可用箭头函数,如果不是vue提供的选项值,那么也就可以用箭头函数了
<h3>数据绑定的形式</h3>
<h3>mustatch</h3>
<!-- innerHTML动态化 -->
<div>string: {{str}} </div>
<h3>指令</h3>
<!-- innerHTML动态化 写法不依赖mustache -->
<div v-text="str"></div>
<h3>属性绑定</h3>
<!-- 属性名或值动态化 -->
<!-- <img src="{{url}}" alt=""> --> <!-- vue1.x-->
<img v-bind:src="url" alt="">
<!-- 上面的可简写为 -->
<img :src="url" alt="">
<h3>转义</h3>
<!-- 页面上显示带有标签 -->
<div>{{strong}} </div>
<div v-text="strong"></div>
<hr>
<h3>非转义</h3>
<!-- 直接被转成初体的STRONG -->
<div v-html="strong"></div>
<hr>
<h3>按需渲染|列表渲染|列渲</h3>
<!-- 显示整个arr数组 -->
<div>{{arr}}</div>
<ul>
<!-- 遍历出arr数组中的每一个 -->
<li v-for="val in arr">{{val}}</li>
</ul>
<h3>条件渲染 | 条渲</h3>
<!-- 当为true时显示,false消失 -->
<div v-show="bl">box</div>
</div>
<script>
//vm 是new出来的Vue实例
let vm = new Vue({//配置选项
el:'#app',
data:{ //MODEL M
str:'标题123',
url:'https://cn.vuejs.org/images/logo.png'
strong:'<strong>STRONG</strong>',
arr:['aa','bb','cc'],
bl:true
}
})
</script>
事件
<div id="app">
<h3>事件</h3>
<div>{{count}}</div>
<!-- <input type="button" value="+" v-on:原生事件> -->
<!-- <input type="button" value="+" v-on:click="指定vue的methods"> -->
<!-- <input type="button" value="+" v-on:click="指定vue的方法"> -->
<!-- <input type="button" value="+" v-on:click="show"> -->
<input type="button" value="+" @click="show">
<input type="button" value="事件对象" @click="show2">
<input type="button" value="this指向" @click="show3">
<input type="button" value="传参" @click="show4(12,'bmw',$event)">
</div>
<script>
//vm 是new出来的Vue实例
let vm = new Vue({//配置选项
el:'#app',
data:{ //MODEL M
count:1,
},
methods:{
// key:value
// 方法:fn
show:function(){
// alert(1)
// this==vm
this.count++
},
show2:function(ev){//事件对象默认接收
console.log('事件对象',ev); //事件对象 MouseEvent {...}
// ev.target.style.background='red'; //dom
},
show3:function(){
console.log('this指向',this); //this指向 Vue {}
},
show4:function(arg1,arg2,ev){//传参数是,事件对象,需要手动传递 $event
console.log('参数',arg1,arg2); //参数 12 bmw
console.log('事件对象',ev); //事件对象 MouseEvent {
},
}
})
</script>
列渲v-for | 条渲v-show
注:v-for需要指定key,不然会引起页面的紊乱,如:给点击的某一行设置背景颜色,当删除那一行时,替换的那一行仍然是有颜色,这是因为即使删除了,但是点击那一行的index不会变
<div id="app">
<h3>列表渲染</h3>
<ul>
<!-- <li v-for="val in arr">{{val}}</li> -->
<li v-for="(val,index) of arr">{{val}}/{{index}}</li>
</ul>
<hr>
<ul>
<li v-for="item in arr2">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
<span>{{item.id}}</span>
</li>
</ul>
<hr>
<ul>
<li v-for="item in arr3">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
<span>{{item.id}}</span>
<ul>
<li v-for="item in item.children">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
<span>{{item.id}}</span>
</li>
</ul>
</li>
</ul>
<h3>数组</h3>
<ul>
<!-- aa/0 bb/1 cc/2 -->
<li v-for="(val,index) of ['aa','bb','cc']">{{val}}/{{index}}</li>
</ul>
<hr>
<h3>对象</h3>
<ul>
<!-- 1/a 2/b 3/c -->
<li v-for="(val,key) of {a:1,b:2,c:3}">{{val}}/{{key}}</li>
</ul>
<hr>
<h3>字符</h3>
<ul>
<!-- i/0 /1 l/2 o/3 v/4 ... -->
<li v-for="(val,index) of 'i love you up to ever' ">{{val}}/{{index}}</li>
</ul>
<h3>数字</h3>
<ul>
<!-- 1/0 2/1 3/2 4/3 5/4 ... 10/9 -->
<li v-for="(n,index) of 10 ">{{n}}/{{index}}</li>
</ul>
<h3>条件渲染的条件要的是一个布尔值,不是布尔会转换</h3>
<div v-show=" '' ">空字符</div>
<div v-show=" num ">{{num}}</div>
<div v-show=" false ">false</div>
<div v-show=" undefined ">undefined</div>
<div v-show=" null ">null</div>
<div v-show=" [] ">[]</div>
<div v-show=" {} ">{}</div>
<div v-show=" ({a:false}).a ">对象.属性</div>
<input type="button" value="按钮" @click="bl=!bl">
<div style="width:10px;height:19px;background:red" v-show="bl">盒子</div>
</div>
<script>
//vm 是new出来的Vue实例
let vm = new Vue({//配置选项
el:'#app',
data:{ //MODEL M
arr:['aa','bb','cc'],
arr2:[
{id:1,name:'alex',age:18},
{id:2,name:'ppp',age:19},
],
arr3:[
{id:1,name:'alex',age:18,children:[
{id:1,name:'xxx1',age:23},
{id:2,name:'xxx2',age:23},
]},
{id:2,name:'ppp',age:19}
],
bl:false,//undefined/null
num:0
},
methods:{
show(){
// this.bl=!this.bl;
}
}
})
</script>
模板表达式
{{数据本身|data的属性|实例属性|变量|表达式}}
v-指令名="数据|data的属性|变量|表达式|语句"
注:每个绑定都只能是包含单个表达式
<div id="app">
<h3>模板表达式</h3>
<!-- 电话119 -->
<div>电话{{ num + 9 }}</div>
<!-- 翻转you love i -->
<div>翻转{{ str.split(' ').reverse().join(' ') }}</div>
<!-- 性别男 -->
<div>性别{{ bl ? '男' : '女' }}</div>
<img :src=" 'https://cn.vuejs.org' + url " alt="">
<hr>
<!-- 一下例子都不会生效 -->
<!-- <div>性别{{ bl ? '男' : '女'; num+9 }}</div> -->
<!-- <div>性别{{ if(bl){return '男'}else{return '女'} }}</div> -->
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
str:'i love you',
num:110,
bl:true,
url:'/images/logo.png'
}
})
</script>