vue的学习

本地应用

v-text指令

v-text指令的作用是:设置标签的内容(textContent)

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

v-html指令

v-html指令的作用是:设置元素的innerHTML

内容中有html结构会被解析为标签

v-text指令无论是什么内容,只会解析为文本

v-on指令

为元素绑定事件

v-on指令的作用是:为元素绑定事件

事件名可写为 v-on:click="doIt",也可简写为 @click

绑定的方法定义在methods属性中

可以传递自定义参数,定义方法时需要定义形参来接收传入的参数

事件的后面可以跟上.修饰符对事件进行限制

v-show指令

根据表达式的真假,切换元素的显示和隐藏

原理是修改元素的display,实现隐藏

指令后面的内容,最终都会解析为布尔值

v-if指令

根据表达值的真假,切换元素的显示和隐藏

本质是操纵dom元素切换显示状态

表达式的值为true,元素存在于dom树中,为flase时从dom树中移除

v-bind

设置元素的属性(比如:src,title,class)

设置可以写为 v-bind:src="imgSrc",也可以简写为 :src="imgSrc"

v-for指令

根据数据生成列表结构

数据经常与v-for结合使用

语法是(item,index) in 数据

v-model指令

获取和设置表单元素的值(双向数据绑定)

绑定的数据会和表单元素值相关

网络应用

axios+vue

axios回调函数中的this已经改变,无法访问到data中的数据

在回调函数之前们可以用:var that=this,把this保存起来,回调函数中直接使用that

你可能感兴趣的:(前端,总结,vue,学习,前端,vue)