Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)

 更新时间:2016年09月09日 10:18:47   作者:qq20004604  
组件(Component)是 Vue.js 最强大的功能之一。接下来给大家介绍vuejs单向绑定、双向绑定、列表渲染、响应函数的相关知识,非常不错,感兴趣的朋友一起看看吧

什么是组件?

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

接下来给大家介绍vuejs单向绑定、双向绑定、列表渲染、响应函数基础知识,具体详情如下所示:

(一)单向绑定

<div id="app"> 
{{ message }} 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: 'Hello Vue.js!' 
} 
}) 
</script> 

①el应该表示绑定的意思,绑定id=app这个标签

也可以改为以下这样:

<div class="app"> 
{{ message }} 
</div> 

el: '.app',

一样有效。

但如果是多个的话,只对第一个有效:

<div class="app"> 
{{ message }} 
</div> 
<div class="app"> 
{{ message }} 
</div> 
Hello Vue.js!
{{ message }}

②data里的message变量,表示{{message}的值

(二)双向绑定

<div id="app"> 
{{ message }} 
<br/> 
<input v-model="message"/> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: 'Hello Vue.js!' 
} 
}) 
</script> 

效果是:

①input输入框里有初始值,值是data里的message属性的值;

②修改输入框的值可以影响外面的值;

(三)函数返回值

<div id="app"> 
{{ message() }} 
<br/> 
<input v-model="message()"/> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: function () { 
return 'Hello Vue.js!'; 
} 
} 
}) 
</script> 

效果:

①输出值也是message的返回值;

②缺点:失去双向绑定!

(四)渲染列表

<div id="app"> 
<ul> 
<li v-for="list in todos"> 
{{list.text}} 
</li> 
</ul> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
todos: [ 
{text: "1st"}, 
{text: "2nd"}, 
{text: "3rd"} 
] 
} 
}) 
</script> 

v-for里的list,类似for in里面的i,

个人认为,

①可以把list in todos,理解为for list in todos

②然后把下一行的list.text理解为 todos[list].text

然后这个v-for标签在哪里,就是以他为单位进行多次复制。

(五)处理用户输入

<div id="app"> 
<input v-model="message"> 
<input type="button" value="值+1" v-on:click="add"/> 
<input type="button" value="值-1" v-on:click="minus"/> 
<input type="button" value="重置归零" v-on:click="reset"/> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
message: 1 
}, 
methods: { 
add: function () { 
this.message++; //这步要加this才能正确获取到值 
}, 
minus: function () { 
this.message--; 
}, 
reset: function () { 
this.message = 0; 
} 
} 
}) 
</script> 

效果:

①对输入框的值,点击一次add按钮,则值+1;

②如果不能加,则像正常表达式加错了那样返回结果,例如NaN;

③data里的message的值,是初始值;

④methods里是函数集合,他们之间用逗号分隔;

⑤获取值的时候,要加上this,例如this.message获取的是message的值。

(六)多功能

<div id="app"> 
<input v-model="val" v-on:keypress.enter="addToList"> 
<ul> 
<li v-for="val in values"> 
{{val.val}} 
<input type="button" value="删除" v-on:click="removeList($index)"/> 
</li> 
</ul> 
</div> 
<script> 
new Vue({ 
el: '#app', 
data: { 
val: "1", 
values: [] 
}, 
methods: { 
addToList: function () { 
var val = parseInt(this.val.trim()); //注意,因为当上面的val是字符串类型的时候,才能用trim(),如果是数字类型,则用this.val 
if (val) { 
this.values.push({val: val}); 
} 
this.val = String(val + 1); 
}, 
removeList: function (index) { 
this.values.splice(index, 1); 
} 
} 
}) 
</script> 

效果:

①初始输入框内值为1;

②在输入框内按回车键,则会将输入框的内容转为数字,并添加到一个列表里,该列表里转换后的数字和一个删除按钮,并且输入框内的值,变为转为数字后的值加一。

如图:

③他的添加,利用的是双向绑定,将输入的值push到data里面的values这个数组之种,然后利用渲染列表的效果,输出多行值。

④在button标签里,函数的参数名给了一个参数,是该行索引,参数名是$index

⑤标签里,触发的函数的函数名,可以加括号,也可以不加括号,实测似乎是没有影响的。

(七)标签和API总结(1)

① {{ 变量名 }}

表示绑定的变量,调用时需要用this.变量名

② v-model=”变量”

双向绑定使用,如果input里不加任何type就是文本,如果加type就是type,例如:

<input v-model="DATE" type="date"/> 
<li>{{DATE}}</li> 

就会将日期类型的输入框的值,和li标签显示的内容绑定在一起。

③ v-on:click=”函数名”

点击时触发该函数,可加()也可以不加,$index作为参数表示索引,索引值从0开始。

④ v-for

双向绑定的在数组内容更新后,会实时更新,v-model也是;

类似for in语句,被多次使用的是

⑤ v-on:事件

即触发的事件,有click(点击),keypress(按键按下)

事件后面可以跟更具体的,例如keypress.enter是回车,keypress.space是空格等

更多的需要之查看

⑥ new vue

通过new一个vue的实例,然后传一个对象作为参数给这个实例;

其中:

el 表示绑定的模板(只会匹配到绑定的第一个)

data 表示数据,可以直接被取用,例如用在v-model或者是{{变量名}}中

methods 表示方法

⑦ 函数内部调用变量

通过this.变量名,例如:

data: { 
val: "1", 
values: [] 
}, 
methods: { 
addToList: function () { 
console.log(this.val); 

这里的this.val就是上面的data.val,也是html里的{{val}},也是v-model=”val”,但不是

<li v-for="val in values"> 
{{val.val}} 
<input type="button" value="删除" v-on:click="removeList($index)"/> 
</li> 

里面的val.val,至于原因,个人认为是这里的val处于v-for的作用域内,因此val in values 里的val其在作用域链中的优先级更高

以上所述是小编给大家介绍的Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 详解如何编写一个Vue3响应式系统

    详解如何编写一个Vue3响应式系统

    这篇文章主要为大家学习介绍了如何编写一个Vue3响应式系统,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-07-07
  • Vue.js创建Calendar日历效果

    Vue.js创建Calendar日历效果

    这篇文章主要为大家详细介绍了Vue.js创建Calendar日历效果的过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • vue生成token并保存到本地存储中

    vue生成token并保存到本地存储中

    这篇文章主要介绍了vue生成token并保存到本地存储中,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • vue中使用file-saver导出文件的全过程记录

    vue中使用file-saver导出文件的全过程记录

    这篇文章主要给大家介绍了关于vue中使用file-saver导出文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • 基于vue.js的分页插件详解

    基于vue.js的分页插件详解

    这篇文章主要为大家详细介绍了基于vue.js的分页插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 解决VUE中document.body.scrollTop为0的问题

    解决VUE中document.body.scrollTop为0的问题

    今天小编就为大家分享一篇解决VUE中document.body.scrollTop为0的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue+Element-UI中el-table动态合并单元格:span-method方法代码详解

    Vue+Element-UI中el-table动态合并单元格:span-method方法代码详解

    el-table是element-ui提供的表格组件,可以用于展示和操作数据,这篇文章主要给大家介绍了关于Vue+Element-UI中el-table动态合并单元格:span-method方法的相关资料,需要的朋友可以参考下
    2023-09-09
  • element select必填项验证回显问题的解决

    element select必填项验证回显问题的解决

    本文主要介绍了element select必填项验证回显问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue3中的ref、reactive问题解析

    vue3中的ref、reactive问题解析

    ref 和 reactive都是vue3推出的针对组合式设计的声明响应式状态的API,两者在使用之前都要先进行引入,本文通过实例代码详解vue3中的ref、reactive问题,感兴趣的朋友一起看看吧
    2024-03-03
  • vue3锚点定位多种方法详解

    vue3锚点定位多种方法详解

    这篇文章主要介绍了vue3的锚点定位多种方法,需要的朋友可以参考下
    2024-01-01

最新评论