如果用Visual的话安装如下三个插件（Vetur vue Vue3 Snippets）
数据绑定：例如 input 单行输入标签标签，单项数据绑定v-bind，数据只能从data流入页面
多项数据绑定v-model，数据双向流动，针对表单
M V VM 模型
M：Model：代表data里面的数据
V：View：代表div里面的数据
VM：Vue：Vue实例，里面包括data
小知识：定时器setTimeout(()=>{需要定时的事件},定时多长时间)
data也可以写成函数，用返回值的方式来表达里面的内容（数据内容）
事件绑定： @click=“方法名” 绑定事件中可传递参数：@click=“show1(参数)”
{{中也可以加方法}}
绑定class样式需要在class前面加一个冒号,带有冒号的class是去Vue里面找(Vue里引入样式的名字，适用类名不确定)，不带冒号的是在样式里找
v-show 条件展示，就是控制是否显示 v-if v-else 也能实现
v-for 遍历，遍历数组：
遍历对象：<li v-for="(item,index) in arr">{{value}}</li>
列表渲染列表过滤（按照条件筛选）
例如：（冬 伦 周） 还可以按照年龄升序
马冬梅-19-女
周冬雨-20-女
周杰伦-21-男
温兆伦-22-男
<input type="text" v-model="keyWord" placeholder="请输入姓名"/> <button type="button" @click="sortType = 1">年龄升序⬆</button> <button type="button" @click="sortType = 2">年龄降序⬇</button> <button type="button" @click="sortType = 0">原顺序</button> <button >更改马冬梅信息</button> <ul> <li v-for="(p,infex) in fmtper" :key="p.id"> {{p.name}}--{{p.sex}}--{{p.age}}岁 </li> </ul> </div> <script type="text/javascript"> const vm = new Vue({ el: '#apk', data: { keyWord:'', sortType:0, persons:[ {id:'001',name:'马冬梅',age:'35',sex:'女'}, {id:'002',name:'周冬雨',age:'20',sex:'女'}, {id:'003',name:'周杰伦',age:'41',sex:'男'}, {id:'004',name:'温兆伦',age:'25',sex:'男'}, ], }, computed:{ fmtper(){ const {persons,keyWord,sortType} = this //根据关键词过滤 let arr = persons.filter( p => p.name.indexOf(keyWord) !== -1) //若需要排序 if(sortType){ //排序 arr.sort((a,b)=>{ if(sortType == 1) return a.age - b.age else return b.age - a.age }) } return arr } } }) </script>
input如果是text那么v-model收集的是value的值
input如果是radio那么v-model收集的是value的值
input如果是checkbox那么v-model(数组)收集的是value的值！！没设置value的话是布尔值
<div id="apk"> <form @submit.prevent="submit"> 账号：<input type="text" v-model="userInfo.account"/><br/> 密码：<input type="password" v-model="userInfo.password"/><br> 性别：男<input type="radio" name="sex" v-model="userInfo.sex" value="男"/> 女<input type="radio" name="sex" v-model="userInfo.sex" value="女"/><br> 爱好：抽烟<input type="checkbox" v-model="userInfo.hobby" value="抽烟"/> 喝酒<input type="checkbox" v-model="userInfo.hobby" value="饮酒"/> 烫头<input type="checkbox" v-model="userInfo.hobby" value="烫头"/><br> 所属校区：<select v-model="userInfo.city"> <option value ="">请选择校区</option> <option value ="beijing">北京</option> <option value ="wuhan">武汉</option> <option value ="shanghai">上海</option> <option value ="shenzhen">深圳</option> </select><br> 其他校区：<textarea rows="10" cols="30" v-model="userInfo.other"></textarea><br> <input type="checkbox" v-model="userInfo.agree"/>阅读并接收<a href="http://www.baidu.com">《用户协议》</a><br> <button type="button" @click="submit">提交</button> </form> </div> <script type="text/javascript"> const vm = new Vue({ el: '#apk', data: { userInfo:{ account:'', password:'', sex:'', hobby:[], city:'', other:'', agree:false, } }, methods:{ submit(){ console.log(this.userInfo) } } }) </script>
