Vuejs第一个教程详细介绍(单向绑定、双向绑定、列表渲染、响应函数)

什么是组件？

组件是Vue.js最强大的功能之一组件可以扩展HTML元素，封装可重用的代码。在更高的层次上，组件是一个自定义元素，Vue.js的编译器为其添加了特殊的功能。在某些情况下，组件也可以是本机HTML元素的形式，这些元素通过is特性进行扩展。

接下来，我将介绍vuejs单向绑定、双向绑定、列表呈现和响应函数的基础知识。具体详情如下：

(a)单向约束

div id=' app ' { message } }/div脚本new Vue({ el: '#app '，data : { message : ' Hello Vue . js！'} })/脚本el应该是绑定的意思，绑定id=app标签

也可以进行如下更改：

div class=' app“{ message } }/div El : '。' app '，

同样有效。

但是如果有多个，它只适用于第一个：

div class=' app“{ message } }/div div class=' app“{ message } }/div Hello vue . js！{{message}} (2)数据中的message变量表示{{message}的值

(2)双向绑定

div id=' app ' { message } } br/input v-model=' message '/div脚本new Vue({ el: '#app '，data : { message : ' Hello Vue . js！'} })/脚本效果是：

(1)输入输入框中有一个初始值，该值是数据中消息属性的值；

修改输入框的值会影响外部值；

(3)函数的返回值

div id=' app ' { message()} } br/input v-model=' message()'//div脚本new Vue({ el: '#app '，data : { message : function(){ return ' Hello Vue . js！'；} } })/脚本效果：

(1)输出值也是报文的返回值；

缺点：双向绑定丢失！

(4)渲染列表

div id=' app ' ul Li v-for=' list in todos ' { list . text } }/Li/ul/div脚本new Vue({ el: '#app '，data : { todos :[{ text : ' 1st ' }，{text:' 2nd'}，{ text : ' 3th ' })/list in脚本v-for，类似于I in for in，

我个人认为，

todos中的列表可以理解为todos中的列表

(2)然后理解列表。下一行的文本为todos[list]。文本

然后，v-for标记在哪里，它就以它的单位被复制几次。

(e)处理用户输入

div id=' app ' Input v-model=' message ' Input type=' button ' value=' value 1 ' v-: click=' add '/Input type=' button ' value=' value-1 ' v-: click='减'/' Input type=' button ' value='重置为零' v-: click=' reset '//div script new vue({ El : ' # app '，data: { message33601消息；//添加此步骤以正确获取值}、mins : function(){ this。消息-；}，reset : function(){ this . message=0；} } })/脚本效果：

(1)对于输入框的值，点击添加按钮一次，则该值为1；

2如果不能相加，返回结果就好像正常表达式错了一样，比如NaN；

数据中消息的值为初始值；

(4)方法是函数集，用逗号隔开；

在获取值时添加这个，例如，this.message获取message的值。

(6)多功能

div id=' app ' Input v-model=' val ' v-: keypress . enter=' addToList ' ul Li v-for=' val in values ' { val . val } } Input type=' button ' value=' delete ' v-: click=' remove list($ index)'//Li/ul/div script new vue({ El : ' # app '，data: { val3360 ' 1 '，values: [] }，methods://请注意，trim()只能在上述val为字符串类型时使用，而这。瓦尔如果(瓦尔){这个。如果是数值类型，可以使用values.push ({val : val})。} this . val=String(val 1)；}，removeList:函数(索引){ this.values.splice(索引，1)；} } })/脚本效果：

初始输入框中的值为1；

(2)按输入框中的回车键，将输入框中的内容变成数字并添加到列表中。列表中已转换的数字和一个删除按钮，输入框中的值将被更改为数字加1。

如图所示：

(3)他用双向绑定的方式添加，将输入值推送到数据中的values数组，然后利用渲染列表的效果输出多行值。

(4)在button标记中，函数的参数名被赋予一个参数，这个参数就是行的索引，参数名就是$index

在标签中，触发功能的功能名称可以带括号，也可以不带括号，实际测量似乎没有效果。

(七)标签和原料药概述(1)

{ {变量名}}

表示绑定变量，需要用这个调用它。变量名

v型=“变量”

使用双向绑定。如果没有向输入中添加类型，则它是文本，如果添加了类型，则它是类型，例如：

输入v-model=' date ' type=' date '/li { { date } }/Li将日期类型输入框的值与Li标签显示的内容绑定。

on:click="函数名"

单击时，无论是否有()，都会触发此功能。$index用作指示索引的参数，索引值从0开始。

v-for

双向绑定将在数组内容更新后实时更新，v-model也是如此；

与in语句中的for类似，它被多次使用

on:事件

即触发事件，包括点击和按键

事件后面可以跟有更具体的事件，例如，按键。回车是回车，按键。空格是空格，等等。

更多内容需要查看

新vue

通过new传递vue的实例，然后将对象作为参数传递给该实例；

其中：

El表示绑定的模板(仅匹配第一个绑定)

数据代表数据，可以直接访问，例如在v-model或{ {变量名}}中

方法表示法

调用函数内部的变量

用这个。变量名，例如：

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 } }输入类型=' button' value=' delete val。' v-: click=' remove list($ index)'/Li中的val。至于原因，我个人认为这里的val是在v-for的范围内，所以val在val

以上是边肖介绍的Vuejs的第一个入门教程(单向绑定、双向绑定、列表渲染、响应函数)的详细讲解。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！