Vue简单入门及使用(二)---基本语法及组件使用

Vue简单入门及使用（二）---基本语法及组件使用

Vue文件解读
基本语法
Vue组件使用

前言：做一个有梦想的程序猿！

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属性来获取子组件的数据。

最后，如果本篇文章对您有所帮助，可以评论或点赞支持一下哦，感谢感谢！