Vue入门属性

226 阅读2分钟

本文章包含的内容如下:

一:el和data选项
二:methods,components和四个钩子
三:外部属性props

一:el和data选项

el用于设置你对哪个标签进行操作。data用于去设置你的数据值。

el

这里设置了一个例子,假设我有一个id为app的标签

image.png

若你想要去对app进行操作,那么可以在main.js里这样设置: new Vue({ el:'#app' }) 或者 new Vue().$mount('#app')

data

此部分用于去设置数据值。 它有三种设置方法:

第一种:
new Vue({ data:function(){return{n:0} } })
第二种简化写法
new Vue({ data(){ return {n:0} } })
第三种:
new Vue({ data:{n:0} })

那这三种方法的使用要求为,在main.js 里使用new Vue创建实例时,这三种方法都能用。但是如果你这个data是定义在vue 组件的,那么就必须写成函数的第一或第二种形式.

其中原因就在于,如果你用的是对象的形式,那么你导入的这个Vue组件如果在js中被多次使用的话,那因为是同一个组件,所以数据也是同一个,导致的结果就是你的数据会在多处被修改。 但如果你是定义成了函数形式,那么每次调用,都会创建一个新的对象,这样数据之间就不会互相影响了。

二:methods,components,四个钩子

methods

这个就是用来定义函数的功能。 使用例子:

image.png

components

此方法用于去创建组件,它有两种使用方式

方式一

image.png

方式二:

image.png

四个钩子

即生命周期的四个状态,created 创建,mounted 挂载,updated 更新, destroyed 消亡

image.png

三:外部属性props

这里现在组件中定义好props属性,设置好要传入哪些属性的值:

image.png

设置好后,就得在调用的实例中给这些组件属性传值:

image.png

这个传值有两种情况,如果你单纯的以 属性名='内容' 的格式去传入,则就是传入字符串数据。
但如果你是想要传入变量的值,那么需改成:属性名='内容' ,即在属性名前加上冒号,这样引号中的内容就会被当成是js代码去执行,而不是字符串

message=''  //键值对的方式传入,引号里的数据只能是字符串
:message=''  //要想传入变量值,最前面得加冒号,那引号中就变成了JS代码。 '' 在这儿只起标记作用,不代表字符串