前言:做一个有梦想的程序猿! |
---|
Vue文件解读
以HelloWorld.vue文件为例
一个vue文件里面包含三部分
1、template标签
< template >
< /template >
html模板代码存放的标签,里面可以使用全局的属性跟方法,或者当前vue文件对象的属性跟方法。
2、script标签
js代码存放的标签,export default {}里面是一个vue的对象。
3、style标签
css代码存放的标签,< style scoped >如果标签上加上scoped表示当前css只会对当前vue文件及其子组件生效,如果不带scoped则表示为全局css。
基本语法
1. 插值
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
example:
2. v-if
v-if是条件渲染指令,可根据条件是否渲染html标签,true渲染,false不渲染。
example:
v-else
也可以用 v-else 添加一个“else 块”:
3. v-show
v-show也是条件渲染指令,可根据条件是否显示html标签,true显示,false不显示。
与v-if的区别是,v-if是直接不渲染html标签,而v-show是渲染html标签,只是给html添加了一个display: none;的css样式控制标签显不显示。
example:
6. v-for
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。
example:
v-for 还支持一个可选的第二个参数(index),即当前项的索引(数组下标)。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一 key attribute。
7. v-bind
v-bind用于html标签属性的数据绑定。v-bind:+属性名或者简写为:+属性名。
example: 绑定里面value的属性为msg
8. v-on
v-on用于绑定html标签的事件,简写@+事件名称。
绑定button的click事件
example:
9. v-model
v-model主要使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用。
与v-bind的区别是,v-bind不是数据双向绑定,它是单向的,v-bind可用在任何标签中。
当v-bind和v-model同时用在一个元素上时,它们各自的作用没变,但v-model优先级更高,而且需区分这个元素是单个的还是一组出现的。
example:
Vue组件使用
example:
编写一个渲染按钮列表的组件,并且父组件实现点击对应的按钮增减1操作:
子组件:
父组件:
props
用于定义组件中有哪些属性,父组件可以把父组件的数据绑定到子组件的属性中去。
$emit
子组件自定义事件,用于子组件向父组件传递事件,父组件可以绑定子组件的事件。
slot 插槽
父组件可以将任意html代码插入子组件中,子组件也可用 :+属性名 的方式将子组件数据绑定到父组件,父组件可用slot-scope属性来获取子组件的数据。
最后,如果本篇文章对您有所帮助,可以评论或点赞支持一下哦,感谢感谢!