探索vue.jscomponent的内容实现

现在让我们系统地了解一下Vue(参考vue.js官方文档):

Vue.js是一个构建数据驱动web界面的库，其目标是实现响应的数据绑定和组合。

Vue.js包含了数据驱动视图的概念，这意味着我们可以在普通的HTML模板中使用特殊用法，将DOM“绑定”到底层数据。一旦创建了绑定，DOM将保持数据同步。

以下参考代码对应于上述型号

！-这是我们的视图-div id=' example-1 ' hello { { name } }！/div//这是我们的模型var示例数据={ name : ' Vue . js ' }//创建一个vue实例或' ViewModel'//它将View与模型var示例VM=newvue连接起来({el:' # Example-1 '，//在id为' Example-1 '的实体上挂载data: exampleData //数据流)。通常，我们在Vue实例中编写Model，下面的编写与上面的编写具有相同的效果：

！-这是我们的视图-div id=' example-1 ' hello { { name } }！-Vue的数据模型用{ { data model } }-/div//创建一个Vue实例或“ViewModel”//它在id为“example-1”的实体上连接View和modelbrscriptvar示例VM=newvue ({el:' # example-1 '，//mount data : { name : ' Vue . js ' }//data stream }。在执行诸如})br/script之类的程序后，“hellowue.js！”。

让我们看一下指令：指令是带有前缀v-的特殊功能，指令的值仅限于绑定表达式，例如if指令：

p v-if='问候'你好！p

还有一个绑定指令，将一些属性值绑定到一些值，例如：

输入：type='questItem.type '，name='questItem.name'/

这里省略了“v-bind”，使得输入的属性值赋值具有“计算”的效果。

计算属性

在这里，我们介绍一下$watch的用法，当一个数据需要根据其他数据进行更改时会用到它：

script brvar VM=new Vue({ El : ' # demo '，data: { firstName: 'Foo '，lastName: 'Bar '，全名：' foobar'}}) br/scriptvm。$ watch ('firstname '，function(val){//当名字改变时，更新VM。全名是这个。fullname=val'' this。lastname})虚拟机。$ watch ('lastname '，function(val){//当lastname更改时，更新VM。全名是这个。全名=这个。firstname'' val})在这里，可以通过vm.firstname等访问所有数据对象。

v型

顾名思义，就是Vue中的数据模型，用来绑定Vue实例中的数据：

！-双向绑定- div id='app' p{{message}}/p输入v-model='message '！- Model，由input输入的数据会立即反馈给Vue实例-/div script new Vue({ El : ' # app '，//viewdata : { message 3360 ' hello WUE . js ' })/script用于绑定窗体控件，例如显示选中的值：

！-表单控件绑定-single choice-div id=' my select '/我一开始没有添加这个层，后来又犯了一个错误。el似乎通常安装在div组件上。选择v-model=' selected '//选择数据的数据类型。该值是选定的值选项selecteda/option b/option c/option/selectspansselected 3360 { { selected } }/span/div script newvue({ El : ' # my selecte '，data : { selected 3360[]})/script v-if，

这个指令可以灵活运用。例如，当我在表单中生成新主题时，有三种类型：“选择题”、“选择题”和“文本题”，那么对于不同的主题应该显示的控件是不同的。此时，可以使用以下语法：

Div v-if=' questitem。type===' text area ' '//注意有三个等号text area/text area/div v=else div/div/div-for

这用于遍历数组元素，例如：

ul id=' demo ' Li v-for=' items in items ' class=' item-{ { $ index } } '！- $index指当前数组元素在数组中的位置-{ { parent message } }-{ { $ index } }-{ { item。消息}}！-一个视图结构-/Li/ulbutton id=' btn1 '单击me/button script var demo=new vue({ El : ' # demo '，data : { parent message : ' parent '，Items3360 [{message:' Foo'}，{ message : ' Bar ' } })/script上面的代码意味着遍历demo实例中的Items数组，并在Li标记中显示每个数组元素(' Foo '，' Bar ')。

为了避免渲染整个列表，我们经常使用：track-by='$index '，这意味着我们只对当前数组元素进行操作。

至此，关于Vue最基本的东西已经介绍完了，还需要更多的API资料可以参考：http://cn.vuejs.org/api/

Vue文件的结构和数据流的控制

在vue文件中，我们经常可以看到这样的格式：

模板div/div/模板脚本导出默认{ data()}.}，methods : {//用户定义的方法，可以处理数据method 1(){ 0.} .}，组件： {.} vuex : { getter s : {//获取商店调查问卷3360状态=state的数据。当前调查问卷}操作： {//用于分发突变方法操作1(){分派(' SET_QUEST '，Item)} //分派用于调用' SET_QUEST '方法操作2()}.} } directives : { ' my-directive ' : { bind : function(){//父组件存储的hook函数，仅一次。第一次将指令绑定到元素时调用{ update : function(新值，旧值){//hook function，} unbind 3360 function(){//hook function以初始值为参数绑定后调用一次。当指令与元素解除绑定时，调用} }//自定义指令，并以div v-my-instructions=' ' }/script style/style template的形式调用。放置此页面(或页面的一部分)拥有的控件，而Vue的数据对象和方法在脚本中定义，控件的css样式在样式中定义。

在方法中，经常使用关键字“this”，它指向Vue组件实例。

触发事件的特定控件Event.target:不具有冒泡效果，但无论是谁，在锁定由事件触发的控件时都会经常使用，例如：

Div @ click。stop=' addItem($ event)' span data-type=' radio '选择题/span span data-type='checkbox '选择题/span span data-type='textarea '文本题/span/div脚本导出默认值{ method : { addItem(event){ let target=event . target if(target . nodename . tolowercase()==' span '){//单击所选按钮后，this.showMask=true //显示一个弹出框this。questitem。type=target。数据集。type//设置问题的类型}} }/script最后说到这个。$els:包含用v-el注册的DOM元素的对象。

div class='promt-header' div标签问题名称：/标签输入类型='文本'，占位符='请输入标题v-El : item-title//div/div class=' promt-footer ' @ click。stop=' handleInput(事件)'按钮类型='按钮'数据-操作='确认'确定/button button type=' button ' data-operation=' cancel '取消/button/div脚本方法： { handleInput(事件){ let target=event。目标if(目标。nodename。tolowercase()！=='button') { return }让itemTitle=这个.$els.itemTitle让itemSelections=this .$ els。如果(目标。数据集。操作==' confirm '){ if(this。questitem。type=='文本区域'){ this。addtextarea(项目标题)} else { this。addselections(项目标题，项目选择)} } else { this。handlecancel()}，}/script上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为项目标题的实体中，我们可以通过这个$els.itemTitle .将其提取出来

要使用该控件的属性值（输入值),可以这样：

这个$els.itemTitle.value .

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。