-
使用的数据,需要先在data中存在,数据存在才能实现数据绑定
-
通过索引 arr[ i ] ,数组length改变数组,不能渲染视图
数组变异方法 push、pop、shift、unshift、sort、reverse、splice -
$set vm.$set(vm.obj, 'xxx', 90)
改变对象 {} 数据 (对象名, 属性名, 新值); -
$el
拿到页面元素vm.$el; vm.$el.innerText; vm.$el.innerHTML
-
$nextTick
在下次DOM循环结束之后,执行; 例:vm.$nextTicck(()=>{console.log(vm.$el.innerText);})
当元素重新赋值后vue是异步执行,js的console会在vue之前打印出来; -
$mount
挂载vm.$mount('#app')
-
v-pre : 不使用vue解析,原样输出;
<div v-pre>{ {aaa}}</div> // { {aaa}}
-
v-cloak:避免内容未加载出来的时候以 ‘{ {}}’ 形式显示;
<style>[v-cloak]{display:none;}</style> <div v-cloak>{ {'ppp'}}</div>
-
v-once:始终用第一次的值,不再动态更改
-
v-html === innerHTML
data:{dom:'<div>jingjing</div>' <div v-html="dom"></div>}
-
v-text:插入内容,div中间的值会被插入的值替换掉;
data:{name:'jingjing' <div v-text="name">aaa</div>}
-
v-if、v-else、v-else-if v-show:条件选择,为true 渲染,false 不渲染,v-show是控制 display:none 与 display:block;template在v-show上不支持
-
template:模板
<template v-if="true">...</template>
template 不会渲染到页面中,所以不能写v-for 的 :key 值; -
v-bind 简写为冒号 :
<img :src="imgUrl">
-
:class : 多个class 用数组或对象形式
<img :src="imgUrl" :class="[classone, classtwo]">
<img :src="imgUrl" :class="[classone, classtwo, true && 'red' ]">
<img :src="imgUrl" :class="{classone:false, classtwo:true}">
<img :src="imgUrl" class="red" :class="{red:true}">
详见vue动态绑定class的几种方式 -
:style:
<div :style="{width:'100px', height:'100px', backgroundColor:color}"></div> data:{color:'red'}
<div :style="[styleone, styletwo]"> duv </div>
-
v-for: 数组:
<div v-for="(item,index) in arr">{ {item}}</div>
对象:<div v-for="(key,value) in obj">{ {key}}</div>
数值:<div v-for="item in 8">{ {item}}</div>
字符串:<div v-for="item in jingjing">{ {item}}</div>
-
${index}_2 :
-
vue 中 使用多个 input 要添加 key 值,否则不会切换input
<input type="text" key="name" > <input type="text" key="age" >
-
v-model : input、textarea、checkbox、
<input type="text" v-model="inpval"><span>{ {inpval}}</span> data:{content:'jing'}
<textarea v-model="inpval"></textarea> <span>{ {inpval}}</span> data:{content:'jing'}
多选:<label for="check01">check01</label><input type="checkbox" v-model="checked"> <span>{ {checked}}</span> data:{checked:'jing'}
<label for="check01">check01</label><input type="checkbox" v-model="checked" value="check01"> <label for="check02">check02</label> <input type="checkbox" v-model="checked" value="check02">{ {checked}} data:{checked:[]}
单选:<label for="one">one</label> <input type="radio" id="one" value="one" v-model="picked" /> <label for="two">two</label> <input type="radio" id="two" value="two" v-model="picked" /> { {picked}} data:{picked:''}
下拉框:<select v-model="selected"><option value="" disabled>请选择</option><option value="" >A</option><option value="" >B</option></select> { {selected}} data:{selected:''}
下拉框多选:<select v-model="selected" multiple> ... data:{selected:[]}
-
传值:
const vm = new Vue({
el:'#app',
data:{
content:'内容',
title:'标题'
},
components