Vue实例的对象参数选择的几个常用选项详解

　　

<强>一。新建一个Vue实例可以有下列两种方式:

　　

1.新一个实例

　　 　　 　　应用var=new Vue ({ 　　埃尔:“# todo-app ',//挂载元素 　　数据:{//在。vue组件中数据是一个函数,要写成数据(){}这种方式 　　项目:[第一项,第二项,项目3 '), 　　待办事项:“ 　　}, 　　方法:{//方法成员 　　rm:函数(我){ 　　this.items.splice(我,1) 　　} 　　} 　　}）//之后再 　　 　　出口的默认应用程序//默认输出,可在其他组件引用 　　之前 　　 　　

2。直接

　　 　　 　　出口默认{ 　　名称:”, 　　组件:{}, 　　数据:数据(){},//函数成员 　　看:{},//看监视成员 　　计算:{},//计算计算成员 　　创建:函数(){}, 　　方法:{},//方法对象成员 　　行动:{} 　　} 　　 　　

<强>二。Vue实例,我参数的选择。它是一个对象。可以选择如下选项:

　　

数据函数成员

　　

方法对象成员

　　

模板模板 　　

挂载元素el

　　

生命周期钩子

　　

道具属性声明

　　

计算计算成员

　　

看监视成员

　　

<强>选项:看监视

　　

看监视是一个对象,键是需要观察的表达式,值可以是

　　

1。回调函数,

　　

2。值也可以是方法名,

　　

3。或者包含选项的对象。

　　

ps:表达式暂时可以理解为一个可以得到值的式子

　　

<强>Ⅰ回调函数,来监视一个值的变化(监视数据函数体的变量)

　　如:

　　 　　 　　数据(){ 　　返回{ 　　replaceList: [] 　　} 　　}, 　　看:{ 　　oldVal replaceList:函数(val) { 　　控制台。日志(replaceList改变) 　　} 　　} 　　 　　

<强>Ⅱ第2种形式:“值也可以是方法名”,可以把手表的函数移到方法内。

　　

则上面的形式可以改为:

　　 　　 　　数据(){ 　　返回{ 　　replaceList: [] 　　} 　　}, 　　看:{ 　　replaceList:‘改变’ 　　}, 　　方法:{ 　　改变:函数(val oldVal) { 　　控制台。日志(replaceList改变) 　　} 　　} 　　 　　

<强>Ⅲ包含选项的对象

　　

如:上面两种就等同于

　　 　　 　　数据(){ 　　rerurn { 　　replaceList: 1 　　} 　　}, 　　安装:函数(){ 　　这一点。美元的手表(replaceList,函数(val oldVal) { 　　控制台。日志(replaceList改变) 　　}） 　　}, 　　方法:{ 　　 　　} 　　 　　

<强>选项:计算计算成员

　　

虽然在胡子语法内可以使用表达式,即{{}}。比如为数字前加入￥符号,可以使用表达式:

　　 　　 　　{{“￥”+钱}} 　　 　　

可以,但不推荐。这种情形应尽量用计算成员:

　　

在vue-cli脚手架的.vue组件中

　　

实现元前加上美元符号

　　 　　 　　& lt; template> 　　& lt;输入v模型=扒痹?/响应式的 　　& lt; span>{{元}}& lt;/span>//{{}}中可以是变量,也可以是方法名 　　& lt;/template> 　　 　　& lt; script> 　　数据(){ 　　rerurn {} 　　}, 　　计算:{ 　　元:函数(){ 　　“￥”+ this.money返回 　　} 　　} 　　& lt;/script> 　　 　　

引入了计算成人民币员来做长表达式的计算,而在HTML内保持清晰的字段引用即可。这样做依然可以享有响应式编程的好处:当钱值改变时,引用元的标签值也会被自动更新。

　　

以上这篇Vue实例的对象参数选择的几个常用选项详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

Vue实例的对象参数选择的几个常用选项详解