2020-08-05 vue学习

vue学习

1. v-vind指令:将模板的属性与vue实例中的数据进行绑定,但是只是单向绑定.即vue实例中的数据改变,页面显示会变化,但是模板变化不会使实例中数据一同变化.简写:value
2. v-model指令:标签的属性值(value>)与vue实例中的数据进行双向绑定.即数据变化,页面显示变化;页面变化,数据也会发生变化.比较常用的是input框
3. 插值表达式与v-text=,v-html=的效果类似
4. 挂载点:vue所接管的页面区域;vue实例;
   模板:挂载点的下级内容,也可以在vue实例中,通过template属性来定义
   5.v-on:click时间绑定,简写@click
   6.计算属性computed,即该值是通过其他数据计算出来的
   

7.监听属性 ,watch:监听数据的变化,并作出相应的操作
8.v-if指令:当其=true时,元素显示,当其=false时,元素不显示;
v-show与其显示相同,但是v-if是将其从dom树上清除掉,而v-show则是给该元素添加style=display:none属性
简单来说:v-if控制dom存在与否,v-show控制dom显示与否
9.组件component,即页面上的一部分.组件分为全局组件和局部组件
全局组件定义:
Vue.component(‘todo-item’,{
template:’<li>item</li>’
})
局部组件定义:
var TodoItem = {
template: ‘<li>item</li>’
}
全局组件可以直接在页面上引用,局部组件如果想要引用的话,需要在Vue实例的components属性中注册,

10.如何将组件之外的值,传递给组件,content是引用组件的一个属性,将其在组件的props中定义,然后可以在组件中使用content

11.vue组件与vue实例之间的关系:vue组件可以说是一个小的vue实例,在其中,也可以定义方法,定义data.vue实例也可以说是一个组件,它的挂载点就是它的模板.vue实例可以称之为父组件,而小组件可以称为子组件,父子组件传值主要通过属性的方式

12.如果子组件想要删除自己被父组件渲染的数据,可以通过和父组件通信,告诉父组件,把给自己渲染的值删除掉,在vue中,子组件和父组件通信的方式主要是通过发布和订阅模式