vue学习笔记

保留3位小数

price.toFixed(3);

数组的 增删改

arr.splice(arr.indexOf(ele),length)
:表示先获取这个数组中这个元素的下标,然后从这个下标开始计算,删除长度为length的元素
这种删除方式适用于任何js数组

数组遍历

v-for="(item,index) in arr"

哈希表遍历

v-for="(value,name,index) in arr"

v-model 数据绑定的3种修饰符

v-model.lazy 与之绑定的变量，在用户按下回车后再获取数据

v-model.number 与之绑定的变量，获取数据类型为number

v-model.trim 与之绑定的变量，获取数据时，去掉前后空格。

---

组件的全局注册

 // 1.创建组件构造器对象
  const cpnc = Vue.extend({
    template:`
        <div>
          <h2>标题</h2>
          <p>内容1...<p>
          <p>内容2...<p>
        </div>`
  })


// 2.全局注册组件
  Vue.component('my-cpn', cpnc)

****************************组件的局部使用

const app = new Vue({
    el:"#app",
    data:{
    },
    components:{
      //局部组件创建
      cpnc:cpnc
    }
  })

组件父传值 到子组件 使用props

为组件添加一个props属性,如名叫vincentcontent，在父组件中使用方法：
其中vincentcontent在props中是一个类

const cpn2={
                    template: '#cpn2',
                    data() {
                        return {
                            count: 0
                        }
                    },
                    props:{
                       vincentcontent:{
                             type:String,
                           required:true,
                            default:"xiang"
                        }
                    }
                }
  const app = new Vue({
            el: "#app",
             methods:{   
               
             },
            data:{
                    messagevincent:"aaaaa"
            },
            components: { //局部组件创建
                cpn2
            }
        })

props属性的类型限制

//1.类型限制(多个类使用数组)
cmovies:Array,//限制为数组类型
cmessage:String,//限制为Strin类型
cmessage:['String','Number']//限制为String或Number类型
//类型是Object/Array，默认值必须是一个函数


//类型是Object/Array，默认值必须是一个函数
cmovies: {
	type: Array,
	default () {
		return [1, 2, 3, 4]
	}
},

子组件传值到 父

使用this.$emit(‘itemclick’, data)，为该组件注册一个响应事件，类似于onclick

1.组件中的函数，使用this.$emit(‘itemclick’, data),可以为该组件注册一个名为itemclick的事件，data为传递数据，在使用组件时，通过@itemclick在父组件中来进行响应和绑定相关处理函数。