v-bind和v-model
html
<a v-bind:href="url">笔记1</a>
<a :href="url">笔记2</a>
<input type="text" v-model:value="name"/>
<input type="text" v-model="name"/>
data(){
return {
url:"http://123.57.27.43:9908/mimi/index.html",
name:"马朋帅"
}
}例：
html
<form>
<!-- 复选框 值为value -->
1<input type="checkbox" v-model="userInfo.hobby" value="study">
2<input type="checkbox" v-model="userInfo.hobby" value="game">
3<input type="checkbox" v-model="userInfo.hobby" value="eat">
<!-- 下拉框 -->
<select v-model="userInfo.city">
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<!-- 文本域 体现v-model的修饰符-->
<textarea v-model.lazy="userInfo.other"></textarea>
<!-- 复选框 值为布尔值-->
<input type="checkbox" v-model="userInfo.agree">阅读并接受
</form>
<script>
userInfo:{
hobby:[],
city:'beijing',
other:'',
agree:'' // v-model的初始值是非数组收集的是checkbox的布尔值
}
</script>v-model只能用于表单元素的value
v-model的三个修饰符：
- lazy：失去焦点再收集数据
- number：输入字符串转为有效的数字
- trim：输入首尾空格过滤
v-on
html
<button v-on:click="open1">1</button>
<button @click="open2">2</button>
<button @click="open3($event,66)">3</button>
<script>
new Vue({
el:"#root",
methods:{
open1(){
console.log("v-on");
},
open2(){
console.log("@");
},
open3(event,num){
console.log(this); //vue对象
console.log(event); //$event(vue中的标识符)就是这个按钮2
console.log(num);
}
}
})
</script>事件修饰符
- prevent：阻止默认事件（比如：a标签href属性的连接跳转）
- stop：阻止事件冒泡
- once：事件只触发一次
- capture：使用事件的捕获模式
- self：只有event.target是当前操作的元素时才触发
- passive：事件的默认行为立即执行，无需等待事件的回调执行完毕
- native：给组件绑定事件。例：
<Student @click.native="show()"/>
html
<body>
<div id="root">
<a href="http://www.baidu.com" @click.prevent="showInfo">a标签</a>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data(){
return {
name:"马朋帅"
}
},
methods:{
showInfo(){
alert('事件修饰符')
}
}
})
</script>
</body>捕获模式：盒子从外到内执行元素的绑定事件
冒泡模式：从内到外执行元素的绑定事件（默认使用冒泡模式执行事件）（先捕获后冒泡）
@scroll="aaa" 滚动条滚动事件，@wheel="aaa" 鼠标滚轮的滚动事件
@wheel先执行aaa函数，完成后鼠标滚轮滚动（可以用passive解决），@scroll无此类问题
@click.prevent.stop 可以连写
v-if和v-show
v-if：把元素去掉或显示（用于切换少）
v-if=""和v-else-if=""和v-else=""要一起用必须连这写
v-show：把元素隐藏或显示（用于切换频繁）
v-for
html
<div id="root">
<!-- 遍历数组 -->
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}
</li>
</ul>
<!-- 遍历对象 -->
<ul>
<li v-for="(value,key) of car" :key="key">
{{key}}-{{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<ul>
<li v-for="(char,index) of str" :key="index">
{{index}}-{{char}}
</li>
</ul>
<!-- 遍历指定次数 -->
<ul>
<li v-for="(num,index) of 6" :key="index">
{{index}}-{{num}}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data() {
return {
persons: [
{id:'001',name:'张三'},
{id:'002',name:'李四'},
{id:'003',name:'王五'}
],
car:{
name: '张三',
age: 18
},
str: 'hello',
}
}
})
</script>key 的原理
用index作为key可能会引发的问题：
若对数据进行：逆序添加（在数组前面插入元素）、逆序删除（删除数组前面，中间的数据）等破坏顺序的操作:
会产生没有必要的真实DOM更新 ==> 界面没问题（效率低）
原因：一次页面渲染前后key对应的元素相同会复用（因为在数组最前面添加元素，index都会往后移一个，key对应的元素跟以前对不上不会复用）
如果结构中还包含输入类的DOM（比如：Input框）：
会产生错误DOM更新 ==> 界面有问题（效率低）。
原因：一次页面渲染前后key对应的元素相同会复用，Vue不会变的Input的value只判断他的结构，结构相同会复用可能Input的value不同页面发生错误
开发中如何选择key（以上问题的解决方法）:
a. 最好使用每条数据的唯一标识作为key， 比如id、手机号、身份证号、学号等唯一值。
b. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
v-text和v-html
html
<div id="root">
<div>{{name}}</div>
<div v-text="name"></div>
<div v-html="nameMmm"></div>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data() {
return {
name : "张三",
nameMmm: "<a href='#'>张三</a>"
}
}
})
</script>v-cloak
vue文件加载慢的时候页面可能出现 {{name}}
解决方法（两种）：
（第一种）把vue.js文件放在HTML文件的前面head里面
（第二种）v-cloak，用法：在有上述问题的标签上加v-cloak标签，当加载到vue.js文件后，就会去除该标签
html
<head>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="root">
<div v-cloak>{{name}}</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data() {
return {
name : "张三",
}
}
})
</script>v-once和v-pre
v-once:页面第一次加载的时候读取变量，之后变量变化值不改变
html
<div id="root">
<div v-once>{{n}}</div>
<div>{{n}}</div>
<button @click="n++">n++</button>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data() {
return {
n : 1,
}
}
})
</script>v-pre:vue不会解析带有该属性的标签