Vue.js第一天学习笔记(数据双向绑定 常用说明)

数据的双向绑定(ES6写入)

效果：

:当输入框中的值没有改变时

清空输入框：中的值

将beans重新输入输入框后，页面中绑定{{testData.name}}的值会随着输入框值的变化而变化。

在Vue.js中，可以使用v-model指令在表单元素上创建双向数据绑定。而v-model指令只能用于三个标签:input、select和textarea。

template div class=' form-inline mg-top ' div class=' form-group ' Label class=' control-Label ' name :/Label输入类型=' text ' v-model=' testdata . name ' class=' form-control ' span class=' control-span '名称更改为： { { testdata . name } }/span/div/div/templatescript export default { Components : { }，ready: function(){ }，methods: { }，可以为组件预定义许多选项，但核心选项如下：

模板：模板声明最终呈现给用户的数据和DOM之间的映射关系。注册组件：注册后，可以在父组件模板中以自定义元素的形式调用子组件。初始数据：组件的初始数据状态。对于可重用组件，这通常是私有状态。可接受的外部参数(道具):数据通过参数在组件之间传输和共享。默认情况下，参数是单向绑定的(从上到下)，但也可以显式声明为双向绑定。方法：数据修改操作一般在组件的方法中进行。您可以通过v-on指令将用户输入事件绑定到组件方法。生命周期挂钩：一个组件可以触发多个生命周期挂钩，如创建、附加、销毁等。在这些钩子函数中，我们可以封装一些自定义逻辑。与传统的MVC相比，可以理解控制器的逻辑被分散到这些钩子函数中。私有资产：在vue.js中，用户定义的指令、过滤器和组件统称为资源。因为全局注册资源容易导致命名冲突，所以组件可以声明自己的私有资源。私有资源只能调用这个组件及其子组件。

常见说明：

所谓指令的本质就是模板中出现的特殊标签。根据这些标签，框架可以知道这里需要对DOM元素执行什么操作。

常见说明：

V-if指令v-show指令v-else指令v-for指令v-bind指令v-on指令v-if指令：

V-if根据表达式值的真或假条件呈现元素。元素及其数据绑定/组件在切换时被破坏和重建。如果元素是模板，其内容将显示为条件块。

LabelShowFlag是一个返回布尔值的表达式。表达式可以是bool属性或返回bool的表达式。

html:

label class=' control-label ' v-if=' label showflag ' meow/label label class=' control-label ' v-if=' testdata . name='张三''张三/labeljs:

script export default { components : }、ready: function(){ }、methods: { }、data(){ return { labelshowlag : true、Testdata: {id:' 1 '、name: '张三'、age : ' 18 ' } } }/script v-show指令：

V-show也是一个条件渲染指令。与v-if指令不同的是，使用v-show指令的元素总是会被渲染成HTML，v-show只是切换元素的CSS属性显示。

html:

label class=' control-label ' v-show=' label show flag ' meow/label label class=' control-label ' v-show=' test data . name='张三''张三/labeljs:

脚本导出默认值{ components : }，ready: function(){ }，methods: { }，data(){ return { labelshowlagg : true，testData:{ id:'1 '，name: '张三，age:'18' } } }}/scriptv-else指令：

可以用否则指令给垂直中频或电视节目添加一个"还有吗块",并且否则元素必须立即跟在垂直中频或电视节目元素的后面——否则它不能被识别。

label class=' control-label ' v-if=' label show flag '喵嘞个咪/label label class=' control-label ' v-if=' TestDATa。名称=='张三'' 张三/label label class=' control-label ' v-else不是张三/标签LV-用于指令：

可以使用v-for指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为项目中的项目，项目是数据数组，项目是当前数组元素的别名：

html:

ul Li v-for=' items"{ items。消息}”中的项目/li/uljs:

脚本导出默认值{ components : }，ready: function(){ }，methods: { }，data(){ return { labelshowlagg : true，testData:{ id:'1 '，name: '张三，年龄：'18' },项目：[{ message : }豆豆}，{ message: '毛毛}]，} }}/scriptv-bind指令：

垂直装订指令用于响应地更新超文本标记语言特性形式如：v-bind:class

html:

label class=' control-label ' v-bind : class=' { ' pink-label ' : labelshowlag } '我是粉色的/label label class=' control-label '默认/labelv-on指令：

v-on指令用于监听数字正射影像图事件形式如：v-:点击缩写为@点击

html:

输入类型=' button ' class=' form-control BTN BTN-primary ' value='提交@click='saveFun'js:

脚本导出默认{ components : }、ready: function(){ }、methods : { SaveFun : function(){ alert('提交');} }，data(){ return { labelshoflag : true，testData:{ id:'1 '，name: '张三，年龄：'18' },项目：[{ message : }豆豆}，{ message: '毛毛}],} } }/脚本本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

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