Vue2.x学习笔记(四)

时间：2023-03-31 20:08:46 vue.js

1表单绑定可以使用v-model在表单控件元素上创建双向数据绑定，v-model会根据控件类型自动选择正确的方法更新元素。2文本框文本框绑定示例如下：

input

textarea

newVue({el:'#app',data:{message:'',message2:''}})3button3.1radio数据中的值为的值，如：

选择的值为：{{picked}}

newVue({el:'#app',data:{picked:'Value1'}})3.2多选单选多选绑定的数据是布尔值，多选多选绑定的数据是数组：

是否勾选：{{checked?“已检查”：“未检查”}}
<inputtype="checkbox"value="Value1"id="box1"v-model="checked2">Value1Value2Value3
选中的值为：{{checked2}}

newVue({el:'#app',data:{checked:'Value1',checked2:[]}})4list

请选择A苹果香蕉

选中的水果为：{{selected}}

newVue({el:'#app',data:{selected:''}})5个修改字符。lazy：默认情况下，v-model在input事件中同步输入框的值和数据，但是你可以在change中添加修饰符.lazy来同步change事件中的数据，比如.number:自动将用户输入的值转换成Number类型。如果原值转换结果为NaN，则返回原值，如.trim：自动过滤输入的首尾空格user，比如修饰符可以混合，比如：

6Component组件可以扩展HTML元素，封装可重用代码，组件系统可以使用独立可复用的小组件来构建大型应用程序，几乎任何类型的应用程序接口都可以抽象成组件树注册全局组件的语法如下：Vue.component(tagName,options)其中tagName为组件名，options为配置选项。注册后调用组件如下：7全局组件全局组件是所有实例都可以使用的组件，例如：Vue.component('test-title',{template:'

测试标题

'})newVue({el:'#app'})注意标签名不能大写，比如写成：Vue.component('testTitle',{template:'

TestTitle

'})页面不会显示标题。8局部组件局部组件就是本实例使用的组件，例如：newVue({el:'#app',components:{'test-title':{template:'

TestTitle

'}}})也可以将模板的内容分隔成一个变量：varmyTemplate={template:'

TestTitle

'}newVue({el:'#app',components:{'test-title':myTemplate}})9propprop是子组件的自定义属性，用于接受父组件传过来的数据，父组件的数据需要通过props传递给子组件，子组件需要使用props选项显式声明prop：

Vue.component('test-title',{props:['title'],template:'

'//template:'

'})newVue({el:'#app'})9.1dynamicprop类似于v-bind将HTML特性绑定到一个表达式，并且你也可以使用v-bind将props值动态绑定到父组件的数据中，每当父组件的数据发生变化时，都会将变化传递给子组件：

<测试t-titlev-bind:title="message">Vue.component('test-title',{props:['title'],template:'

'})newVue({el:'#app',data:{message:''}})首先，当输入框内容发生变化时，更新父组件的message，然后传递给子组件的title，最后更新的内容下面是一个绑定无序列表的例子：

Vue.component('test-item',{props:['val'],template:'

'})varvm=newVue({el:'#app',data:{items:[{text:'111'},{text:'222'}]}})注意prop是单向绑定，当父组件的属性发生变化时传递给子组件，反之则不行。9.2子组件返回父组件使用props向子组件传递数据。如果子组件需要使用自定义事件传回数据，可以在v-on中绑定自定义事件。每个Vue实例都实现了事件接口，也就是：使用$on(eventName)监听事件，使用$emit(eventName)触发事件。另外，父组件可以直接在使用子组件的地方使用v-on监听子组件触发的事件。示例：

总计：{{total}}

Vue.component('test',{template:'点击增加，当前为{{counter}}

',data:function(){return{counter:0}},methods:{incrementHandler:function(){this.counter+=1this.$emit('increment')}}})newVue({el:'#app',data:{total:0},methods:{incrementTotal:function(){this.total+=1}}})作用：点击任意按钮增加时，更新计数器中的子组件，同时使用this.$emit传值给父组件。这里没有参数。如果有参数，后面加上：this.$emit("func",parm)在父组件中引用子组件的地方，需要添加v-on:func，其中v-on:func中的func需要和this.$中的func同名emit("func")，然后在v-on:func="func2"中，修改func2为父组件的函数。简写方式是：@func="func2"在组件的根元素上监听本地事件。可以使用.native修饰v-on，例如：

9.3关于子组件的数据在上面的例子中，数据是不是对象而是函数。如果数据直接返回一个存在的对象，它会影响其他实例。比如将上面的数据修改为：varcounter={counter:0}//...data:function(){returncounter}效果如下：即子组件共享数据，改成:data:function(){return{counter:0}}效果如下：这是因为为每个实例返回一个单独的副本。

上一篇：echart制作带有白光闪烁效果的直方图

下一篇：TypeError-Cannotreadproperty'range'ofnull

Vue2.x学习笔记(四)相关文章

Vue2.x学习笔记(四)

测试标题

TestTitle

TestTitle

TestTitle

{{title}}

{{this.title}}

{{title}}

{{val.text}}