vue学习笔记

1,vue实例

每个vue的组件都是一个vue的实例.

2,vue生命周期钩子函数

3,vue的模板语法

v-text ,v-html,v-bind= : , v-on= @等等

4,vue计算属性,方法和监听器

computed,methods.watch

5,vue计算属性的getter.和setter

6,vue中的样式绑定

:style="{}"或者:style="[]"或者:class="{}''或者:class="[]"

7,vue中的条件渲染

1,v-if,v-show,用来决定使用该指令的元素是否在页面上显示,且元素的显示与否取决于该指令的表达式返回值是true还是false,返回值为true则该元素就显示,false则该元素不在页面显示

2,v-if和v-show的区别:当表达式返回值为false时,v-show绑定元素在页面中存在dom但是只是display属性设置为none,而v-if是把绑定的元素直接删除,当返回值为true的时候在添加dom元素.所以在使用的时候v-show的性能较高.

3,v-if还可以和v-else-if以及v-else一起使用,注意中间不能被其他元素隔开,一定要紧挨着一起使用.

4,key值的使用,key值得作用标记元素的唯一性.vue机制会尽量复用页面中的相同的元素,比如页面中的input标签若没有设置key值得话就会被复用,若想元素不被复用解决办法是设置不同key值input就不会被复用.

8,vue中的列表渲染

1,v-for指令循环列表项四要设定key值且key值尽量不用数组下标.

2,操作数组是如要添加或删除列表中的某一项不能直接操作下标来删除和添加因为不会虽然数组会改变到那时并不能响应到页面上,就是说页面不会显示.解决办法一:使用数组的操作方法9个;pop push shift,unshift ,reverse,sort ,splice等,方法二:改变引用就是直接改变数组本身.方法三:vue.set(array,index,value)

3,v-for也可以循环对象,对象里的参数会有 item,key index.想要添加和删除对象里的某一项也不能直接就添加来操作,解决办法和数组的第二种方法相同直接改变对象的引用,就是直接改变对象,换成新的对象.

方法二:vue.set(obj,key,value)

4,tamplate占位符的使用,就是当你想用一个元素吧一块内容包裹起来但是又不想显示最外层的包裹元素是tamplat额可以实现baoguo并且不在页面显示的效果.

9,vue中set方法

vue.set()或者vm.$set()方法可以用来直接修改数组和对象里的某一项

例:1改变对象的某一项或者添加一项vue.set(obj,key,value)或者用 vm.$set()

2改变或者添加 数组中的某一项vue.set(array,index,value)或者用 vm.$set()

10,vue中组件的使用的细节问题

1,is属性的使用,用于table,ul,ol,和selecte等标签内,因为在es5下这些标签里面的标签必须用规定的tr ,li

option等标签.在table,ul,ol,和selecte等标签的内部标签是组件的时候会出现问题,组件会和父标签同级,解决办法就是使用 is属性,is属性是标签看似是规定子组件类似子元素但是显示为子组件

例:<ul>

<li is=row>this is row</li>

<li is=row>this is row</li>

<li is=row>this is row</li>

</ul>

其中row为子组件的名称 .这样就能解决显示的时候,就呢过解决子组件内容和父元素同级的问题

2,ref的使用.用来获取dom元素.通过this.$refs.refname来获得元素的dom结构.如果用在组件上得到的是组件的引用.也就获得子组件的实例对象 .也是通过this.$refs.refname的方法取得.

例:<div ref=''one''>this is one</div>

this.$refs.one

3,根实例的data定义可以直接是个对象,但是子组件了data数据定义必须是一个函数并且要返回一个对象,这样组的目的是让内个子组件都有自己的数据.

11,vue中父子组件传值问题

1,父组件通过属性绑定的方式向子组件传值.

<counter :count='3'></counter>

或者

<counter count='3'></counter>

两者区别在于有:的后面是表达式.没:的是字符串.

,counter是子组件父组件通过count属性项子组件传递值

2,子组件通过向外触发事件的方式箱子组件传值.

this.$emit(事件名称,携带的参数)

父组件通过在使用子组件时使用: @事件名称="事件处理函数名',并且在methods里定义处理函数.

3,父子组件传值是存在单向数据流的规定目的就是防止当传递的值是引用类型的时候父组件的数据改变其他子组件引用时也会被改变,付组件传给子组件的值子组件可以使用但是不能更改,如果必须更改,解决办法就是把付组件传递的值复制一份定义在子组件自己的data里.

12,vue组件参数校验和非props属性

1,父组件项子组件传值,子组件需要通过props属性来接受父组件传的值

2,在接受父组件传值的同时可以对父组件穿的值进行校验

props:{

content:string

}

content是父组件传给子组件的值.意思是传的值必须是sring类型佛则就会报错

content也可以是个数组

 

props:{

 

content:[string,number]

 

}意思是传来的值可以是字符串也可以是数字

content也可以是个数组

props:{

content:{

type:string 校验值得类型

requred:true 规定content是否是必传的值

default:default value 在没有传值的情况下的默认值,有值则不显示

validater:function(){} 自定义校验传值的函数

}

}

3 props特性和非props特性

props特性是指在父组件传值时刚好子组件的props里有定义该值

props特性不在dom中显示

非props属性:在动漫中有显示,并且在父组件中有传但是在子组件中并没有被接收.

13,vue给组件绑定原生事件

1,通过@事件名称给组件绑定的事件是自定义事件,自定义事件的触发需要子组件通过this.$emit()来触发,

如果想要监听子组件的原生事件要通过@事件名:native的方式监听