作用:双大括号中的内容将被解析成为文本
<h1>{{ msg }}</h1>
<script>
export default {
data() {
return {
msg: "hello",
};
},
};
</script>v-html作用:可以将数据渲染为真正的 HTML 代码
<div v-html="msg"></div>
<script>
export default {
data() {
return {
msg: "hel<h1>你好世界</h1>lo",
};
},
};
</script>v-bind
作用:绑定数据和元素属性应用: 绑定 src 路径, href 超链接, class 类属性
可以缩写为 :
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>
<img :src="imgSrc" />
<script>
export default {
data() {
return {
url: "http://www.baidu.com",
imgSrc:
"http://i0.hdslb.com/bfs/album/e6c53dc180e8e1a5dcd819cc161ee0fdc911128d.png",
};
},
};
</script>V-if作用: 条件渲染,根据后面表达式的真假田间渲染元素,如果为 true 则显示该组件, 为 false 时则销毁该组件
<h1 v-if="(Math.random() > 0.5 )">你好世界</h1>
<!-- 每次刷新页面,随机数大于 0.5 才进行显示 -->v-else 和 v-else-ifv-if 和 V-else v-else-if 组合搭配使用,进行流程控制.
v-else 必须要和 v-if 匹配使用,不能单独使用,只有当 v-if 的值为 false 的时候, V-else 模块才能显示出来
1<button @click="num=1">按钮一</button>
2<button @click="num=2">按钮二</button>
3<button @click="num=3">按钮三</button>
4<button @click="num=5">按钮四</button>
5<h1 v-if="num == 1 ">这是选项一</h1>
6<h1 v-else-if="num == 2">这是选项二</h1>
7<h1 v-else-if="num == 3">这是选项三</h1>
8<h1 v-else>这是选项四</h1>
9<!-- 条件一不满足时,使用 v-else-if 进行多个逻辑条件的判断 -->
10
11<script>
12 export default {
13 data() {
14 return {
15 num: 1,
16 };
17 },
18 };
19</script>效果图
V-showv-show 通过设置标签的 display 属性来实现标签的隐藏和显示
V-on作用:对 dom 中的元素进行事件监听
缩写: @click='function'
<button @click="num++">{{num}}</button>
<script>
export default {
data() {
return {
num: 2,
};
},
};
</script>
<!-- 每次鼠标点击数字加 1 -->事件修饰符
事件流像弹簧一样，总是先由外向内捕获，而后自内向外冒泡
.stop 阻止事件的冒泡,使其仅仅在本节点作用.self 当事件绑定到本元素的时候才开始触发,子父级元素的事件对其没有作用,事不关己高高挂起.prevent 阻止默认事件,列如 a 标签默认的跳转网页事件禁止触发.once 事件只触发一次.capture 添加事件侦听器时使用事件捕获模式，当元素发生冒泡时，先触发带有该修饰符的元素。如果拥有多个该元素，则从外向内触发。谁有事件修饰符，就先触发谁一个元素接收到事件,会将他接受到事件从内向外传递给自己的父级,一直到 window
示例:
<div id="box1" @click="one">
<div id="box2" @click="two">
<div id="box3" @click="three">盒子1</div>
盒子2
</div>
盒子3
</div>
<script>
export default {
methods: {
one() {
console.log(1);
},
two() {
console.log(2);
},
three() {
console.log(3);
},
},
};
</script>点击最内层的盒子,事件依次向外扩散的过程
事件捕获和事件冒泡完全相反，是从外到内直到指定元素的现象
V-for使用 v-for 指令循环遍历数组,对象,对象数组
在 data 中定义普通数组
1<h1 v-for="(item,index) in lists">{{index + 1}}.{{item}}</h1>
2<!-- 提供两个参数,数组下标总是放在后面 -->
3
4<script>
5 export default {
6 data() {
7 return {
8 lists: ["老王", "老张", "老钱", "老孙"],
9 };
10 },
11 };
12</script>效果图
在 data 中定义对象
1<h1 v-for="(value,key) in obj">{{key}}:{{value}}</h1>
2<!-- 第一参数为对象值,第二个参数为对象的键名 -->
3
4<script>
5 export default {
6 data() {
7 return {
8 obj: {
9 id: 13,
10 sex: "男",
11 name: "小明",
12 score: 89,
13 grade: "优秀",
14 },
15 };
16 },
17 };
18</script>将多个对象组合作为数组处理
1<h1 v-for="(item,index) in arrayObj">
2 {{ index+1 }}.职位:{{ item.work }} 工作地:{{item.place}} 薪水:{{item.salary}}
3</h1>
4
5<script>
6 export default {
7 data() {
8 return {
9 arrayObj: [
10 { work: "后端开发", place: "南京", salary: 7000 },
11 { work: "会计", place: "上海", salary: 9000 },
12 { work: "建造师", place: "广州", salary: 4000 },
13 { work: "教师", place: "杭州", salary: 10000 },
14 ],
15 };
16 },
17 };
18</script>
使用 V-for 迭代数字时,计数是从 1开始的
<h1 v-for="count in 6">{{ count }}</h1>V-model
使用 V-model 指令在 input, select, text, checkbox等表单控件或者组件上创建数据双向绑定
事件修饰符 --> 可以组合使用
.lazy 让数据在失去焦点或者回车时才会更新，避免value内容没有输入完就执行后续的change方法.number 默认情况下,无论输入框输入的是数字还是字母,都会作为字符串类型进行处理， .number 修饰符可以使得输入的内容自动转换为数字类型..trim 虽然浏览器显示多个空格会过滤掉，但是传值的数据并没有过滤,使用 .trim 修饰符过滤掉内容左右两边的的空格1<input type="text" v-model="msg" />
2<h1>{{msg}}</h1>
3
4<script>
5 export default {
6 data() {
7 return {
8 msg: "延迟加载",
9 };
10 },
11 };
12</script>1<input type="number" v-model.number="msg" />
2<h2>{{msg}}</h2>
3<h2>数据类型：{{typeof(msg)}}</h2>
4
5<script>
6 export default {
7 data() {
8 return {
9 msg: 1111,
10 };
11 },
12 };
13</script>
14<!-- 输入框中只能输入数字 -->1<input type="text" v-model.trim="msg" />
2<br />
3<span>hi{{msg}}</span>
4
5<script>
6 export default {
7 data() {
8 return {
9 msg: "小张",
10 };
11 },
12 };
13</script>组件化开发是 Vue 的精髓,所有页面都是由一个个的组件构成.
使用组件的优点: