1.文本:{{msg}}不会解析标签 等于v-text;v-html会解析标签
2.事件对象:event,不加括号就认为是事件对象,加括号要么传参不传就是underfined
3.默认事件:@click.prevent
js中阻止默认事件:event.preventDefault() window.event.returnValue=false;
4.事件冒泡:@click.stop
Js中阻止事件冒泡:event.cancleBubble() event.stopPropagation()
5.修饰符:事件~,按键~,系统~(不常用)
@keyup.enter ||@keyup.13 //键盘按下回车执行
6.绑定属性:v-bind适用于img的src属性,或组件间的传值
当属性时变量时使用 v-bind:text=””
7.class绑定:
对象语法: :class=’{active:true}’
数组语法: :class=”[key1,key2]”
8.style 绑定
对象语法: :style=’{clolr:#000,font-size:10px}’ ||或者等于一个写好的样式对象
数组语法: :class=”[obj1,obj2…]”
9.条件判断:v-if v-else-if v-else
v-show=” ” v-show=”! ”
v-if 执行时显示其余不执行,初识条件为假,则什么都不做,知道条件为真,改变较少时用v-if
v-show:条件都渲染,只是把不满足条件的display:none;初始就渲染,需要频繁切换时用
10.循环遍历:v-for
v-for=(item,index)of/in list :key=”唯一性的值” //其中items是源数据数组,而item则是被迭代的数组元素的别名
可遍历数组对象字符串
v-for的优先级高于v-if
11.数据更新检测: .push最有一位增 .unshift最前加 .shift最前变删
12.表单输入
特殊:checkbox:初始伪数组是多选,是布尔值为单选
修饰符:.lazy会车时做接下来的事情
.trim去除空格 .number转数值
1.计算属性:根据某一值去衍生另一个值,具有依赖性
Computed:{fn(){reyurn value}},用的时候不加括号
2.方法调用:methods:{
fn(){reyurn value}},计算属性优于方法调用
3.侦听属性:watch:{fn(new,old){
}}计算属性优于侦听属性
4.生命周期钩子函数
初始化阶段:beforeCreate(),created(),beforeMount(),mounted()
运行时阶段:beforeUpdate()
,updated()
摧毁阶段:beforeDestroy()
,destroyed()
在created()或mounted()中请求数据,如果必须使用dom操作可以再mounted或者update
5.fetch数据请求,可直接使用,不需要引用
Fetch(url).then(res=>res.json).then()返回的是promise对象,需要转成json
6.axios请求,自动转成json数据
Asios.get().then
Axios.post(url,{数据对象}).then()
7.组件:也是Vue的一个实例,全局注册和局部注册
步骤:定义组件:const
myhead={template:’<header>header<header>’
全局注册组件:
使用组件:<myheader><myheader>
局部注册组件: