一
1v-cloak 插值表达式闪烁问题
v-text 默认是没有闪烁问题 会覆盖原本的内容 插值表达式不会
v-html
<div id="app">
<p>{{msg}}</p>
<p v-clock>===={{msg}}===</p>
<p v-html="msg2">hello world</p>
<p v-text="msg"></p>
<p ></p>
</div>
</body>
<script>
var vm= new Vue({
el:'#app',
data:{
msg:'1233',
msg2:'<h1>天行健 君子以自强不息!<h1>'
}
})
</script>
图片.png
2 v-bind，v-on指令学习
<button v-bind:title="msg">button</button>
二
v-bind绑定属性 :缩写
v-on绑定事件 @缩写
<button v-bind:title="msg+'兽人永不为奴'" v-on:click="say">button</button>
v-on:click点击事件
v-on:mouseover鼠标覆盖事件
图片.png
三
3跑马灯效果制作
<p>{{msg}}</p>
<button @click="lang()">lang</button>
<button @click="stop()">stop</button>
var vm= new Vue({
el:'#app',
data:{
msg:'天青色等烟雨',
msg2:'<h1>天行健 君子以自强不息!<h1>',
interValID:null
},methods:{
say:function(){
alert('hello vue.js!')
},
show:function(msg){
alert(msg)
},
lang(){
if(this.interValID!=null)return;
this.interValID=setInterval( () => {
var start=this.msg.substring(0,1)
var end=this.msg.substring(1)
this.msg=end+start
console.log(this.msg)
},500)
},
stop(){
clearInterval(this.interValID)
this.interValID=null;
}
}
})
开启定时器 停止定时器
截取到后面所有字符串substring(0,1)
清除之后吧intervalId置为null
vm实例 会监听自己身上data中所有数据的改变 只要数据一发生改变，就会自动把最新的数据，从data上同步到页面中去
图片.png
图片.png
setInterval( () =>
=> es6箭头函数
四
4事件修饰符的介绍
.stop阻止冒泡
.prevent阻止默认行为
.capture 捕获机制
.self实现只有点击当前元素的时候 才会触发的函数
.once
实例
没有使用.stop
图片.png
<style type="text/css">
.inner{
height: 150px;
background-color: #009A61;
}
</style>
<div id="app">
<div class="inner" @click="divhandler">
<input type="button" value="戳他" @click.stop="btnhandler"></input>
</div>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
},
methods:{
divhandler(){
console.log('触发inner div')
},
btnhandler(){
console.log('触发 btn 按钮的事件')
}
}
})
</script>
图片.png
stop阻止事件往外冒
prevent 阻止默认事件 如 网址跳转 submit表单
<a href="https://www.baidu.com"@click="linkclick">百度一下</a>
.self 只有点击当前元素才会触发事件处理函数
<div class="inner" @click.self="divhandler">
<input type="button" value="戳他" @click="btnhandler"></input>
</div>
此时只会触发btn按钮的事件 不会触发外部的事件，要想触发外部的div事件 可以点击 inner 即inner.css区域即可触发外部的innerhandler事件
图片.png
<a href="https://www.baidu.com"@click.preven.once="linkclick">百度一下</a>
、此时只能阻止一次默认行为
比较:
click.prevent.once
click.once.prevent
其实没有区别
只触发一次事件处理函数
<style type="text/css">
.inner{
height: 150px;
background-color: #009A61;
}
.outer{
padding: 40px;
background-color: red;
}
</style>
<div id="app">
<div class="outer"@click="divhandler2">
<div class="inner" @click="divhandler">
<input type="button" value="戳他" @click.self="btnhandler"></input>
.self只会阻止自己身上冒泡行为的触发 并不会阻止真正冒泡的行为
.stop会阻止真正的冒泡行为
<input type="button" value="戳他" @click.stop="btnhandler"></input>
</div>
</div>
</div>
此时只会出现btn按钮的事件
inner
outer
都被stop阻止了
图片.png
五
讲解v-model实现表单元素的数据双向绑定
v-bind只能实现数据的单项绑定 从 M 自动绑定到V中 无法实现数据的双向绑定
v-mode 实现表单元素和Model中数据的双向数据绑定
v-model只能运用在表单元素中（input(radio,text,address,email) select checkbox textarea）
<div id="app">
<h4>{{msg}}</h4>
<!-- <input type="text" v-bind:value='msg' style="width: 10%;"/> -->
<input type="text" v-model="msg" style="width: 10%;"/>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'HELLO'
},
methods:{
}
})
</script>
v-model实现计算器
<div id="app">
<!-- <h4>{{msg}}</h4>
<!-- <input type="text" v-bind:value='msg' style="width: 10%;"/> -->
<!-- <input type="text" v-model="msg" style="width: 10%;"/> -->
<input type="text" v-model="n1"/>
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2" />
<input type="button" value="=" @click="calc"/>
<br />
<input type="text" v-model="resu" />
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
/* msg:'HELLO' */
n1:0,
n2:0,
resu:0,
opt:'+'
},
methods:{
calc(){
/* switch(this.opt){
case '+':
this.resu=parseInt(this.n1)+parseInt(this.n2)
break;
case '-':
this.resu=parseInt(this.n1)-parseInt(this.n2)
break;
case '*':
this.resu=parseInt(this.n1)*parseInt(this.n2)
break;
case '/':
this.resu=parseInt(this.n1)/parseInt(this.n2)
break;
}
*/
var str='parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
this.resu=eval(str);
}
}
})
</script>
n1,n2,resu默认都为0 均实现数据双向绑定
v-model =n1
v-model n2
v-model =resu
select 也实现数据双向绑定 v-model=opt
图片.png
六通过属性绑定为元素设置class样式
<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.7em;
}
</style>
<div id="app">
<h1 :class="{red:true, thin:true,italic:true,active:true}">
不要问我从哪里来heyjude
</h1>
<!-- 三元表达式 -->
<h1 :class="['thin',italic,flag?'active':'']">不要问我从哪里来heyjude</h1>
<!-- 传的是一个对象 避免三元表达式的麻烦 flag 是data中的flag属性，默认为true -->
<h1 :class="['thin',italic,{'active':flag},'red']">不要问我从哪里来heyjude</h1>
<h2>{{msg}}</h2>
</div>
<script>
new Vue({
el:'#app',
data:{
flag:true,
msg:"zoro"
},
methods:{
}
})
</script>
图片.png
设置行内样式
<div id="app">
<h1 :style="[s1]">兽人永不为奴!</h1>
<h2 :style="{color:'red','font-weight':100}">hey jude</h2> 传入多个属性
</div>
<script>
new Vue({
el:'#app',
data:{
s1:{ 'color':'green','font-weight':200},
s2:{'font-style':'italic'}
},
methods:{
}
})
</script>
图片.png
七
v-for的使用方式
<div id="app">
<table>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr v-for=" p in people">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
</tr>
</table>
<p v-for="(item, i) in list">索引值{{i}}--每一项{{item}}</p>
<p v-for="count in 4">这是第{{count}}次循环</p>
<p v-for="(val,key) in user">值是:{{val}}--键是:{{key}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
people:[{
name:'Lee',
age:12,
sex:'MALE'
},{
name:'ZORO',
age:11,
sex:'MALE'
},{
name:'XIN',
age:21,
sex:'FEMALE'
}],
list:[1,2,3,4,5,6,7,8],
user:{
name:'周笔畅',
age:17,
sex:'Male'
}
},
methods:{
}
})
/* [].forEach((item,i)=>{}) */
</script>
v-for循环普通数组 v-for循环对象数组 v-for迭代数字(count值从1 开始不是从0开始)
图片.png
v-for添加元素
<div id="app">
<div>
<label>Id</label>
<input type="text" v-model="id"/>
<label>Name</label>
<input type="text" v-model="name"/>
<label>submit</label>
<input type="button" @click="add" value="添加"/>
</div>
<p v-for=" x in xiaoming" :key="x.id">
<input type="checkbox" />{{x.id}}--{{x.name}}
</p>
</div>
<script>
new Vue({
el:'#app',
data:{
id:'',
name:'',
xiaoming:[
{id:1,name:'李斯',},
{id:2,name:'荀子',},
{id:3,name:'韩非',},
{id:4,name:'嬴政',}
]
},methods:{
add(){
this.xiaoming.unshift({id:this.id,name:this.name})
}
}
})
</script>
图片.png
v-if 每次都会重新删除或创建元素
v-show每次不会重新进行DOM的删除和创建操作 只是切换了元素的display :none样式
设计频繁的切换 不适用v-if
v-if有较高的切换性能消耗
v-for有较高的初始渲染消耗
图片.png
https://www.bilibili.com/video/av36650577/?p=20
https://github.com/shy1118999/vue.js
图片.png
