vue总结1

vue

双向数据流:

js内存属性发生改变,影响页面变化;

页面的改变影响js内存属性的改变;

常用指令

V-text 是元素的innertext只能在双标签元素中;

v-html 元素的innerhtml不能包含表达式;

v-if 元素是否插入

v-show 元素是否隐藏

v-model 上香数据绑定

v-bind 单项数据绑定

el: 渲染内容目的地(写定的)

render  渲染内容(固定函数)

v-bind的使用

 render:function(C){

    return c:

}

 render:(C)=>{  ES6

    return c:

}

当参数是一个的时候,小括号可以省略;当代码只有一行且是返回值的时候可以省略大括号;

render c=>c(App);

样式:

v-bind 简写 : 绑定单个样式 可用三目运算符 ;绑定多个:class="{'A':RED,'B':BLUE}[stu.score]"

v-on 简写 @:绑定的方法 可以省略 function;script 中要用 this  trmplate中不需要this ;

没有参数可以省略括号,

methods 是对象  key是函数名 ,值是方法体 data 是一个函数  值是初始化的值;

v-for 

可以单独使用操作数组(item,index);

可以操作对象(value, key,index);

<li v-for="(stu,index) in stus" :key="index">

<li v-for="(value,key,index) in person" :key="index">

key 类似于trank by 的一个属性,为的是告诉vue.js中的元素,与页面之间的关联,

当试图删除元素的时候是单个元素的删除而不是正版替换,所以要关联其关系 好处:有些版本必须设值,性能

父子组件    

使用的是父,备用的是子

父需要引入子组件对象

import ***  from './***.vue'

components:{

    组件名:组件对象

}

全局组件,不需要声明,直接用,在main.js 中引入一次,"vue.component("组件名",组件对象)" <headerValue> <header-value>

父传子(参数)父组件通过子组件的属性将值传递 可以穿常量(prop1="常量值")也可以是变量(:prop2="变量名")

子组件需要声明:根属性props:['prop1','prop2']然后在页面直接用

上边可以用的值 下边也可以用(this.**)

查看文档注意事项:

1.全局的代表vue.的一个属性,为的是告诉vue;

2.实例的代表this. 或者new vue();

3.选项代表new vue()的参数,或者export default 里边的属性;

子向父通信

1.通过new vue()这样一个对象,来$on('事件名',fn(prop1,prop2))

另一个组件引入一个相同vuebus,来$emit('事件名',prop1,prop2)

export default 的用法:相当于提供一个接口给外界,让其他文件通过 import 来引入使用。

 而对于 new Vue({})部分, 只是创建一个Vue的实例 就是相当于创建一个根组件

以上是 vue总结1 的全部内容, 来源链接: utcz.com/z/377123.html

回到顶部