VUE快速入门
VUE是一款用于构建用户界面的渐进式的JavaScript框架
准备：
1.引入VUE模块
2.创建VUE程序的应用实例，控制视图的元素
3.准备元素(div),被Vue控制
<body> <div id="app"> <h1>{{message}}</h1> <h2>{{count}}</h2> </div> <script type="module"> import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' createApp({ data() { return { message: 'hello vue', count: 100 } } }).mount('#app') </script> </body>常用指令：
vfor: 注意放入的位置
<div id="container"> <form action="/search" class="search-form"> <label for="name"> 姓名：</label> <input type="text" id="name" name="name" placeholder="请输入姓名"> <label for="gender">性别</label> <select id="gender" name="gender"> <option value="">请选择性别</option> <option value="男">男</option> <option value="女">女</option> </select> <select name="positon" id="positon"> <option value="">请选择职务</option> <option value="教师">教师</option> <option value="学生">学生</option> </select> <button type="submit">查询</button> <button type="reset">重置</button> </form> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>职务</th> </tr> </thead> <tbody> <tr v-for="(item, index) in empList" :key="item.id"> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.gender}}</td> <td>{{item.job}}</td> </tr> </tbody> </table> </div> <script type="module"> import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' createApp({ data() { return { empList: [ {id: 1, name: '张三', age: 18,gender: '男',job: '前端开发',}, {id: 2, name: '李四', age: 19,gender: '男',job: '后端开发',}, {id: 3, name: '王五', age: 20,gender: '男',job: '项目经理'} ] } } }).mount('#container') </script>vif :基于条件判断，来创建或移除元素节点 要么显示要么不显示
<tr v-for="(item, index) in empList" :key="item.id"> <td>{{item.name}}</td> <td>{{item.age}}</td> <td> <span v-if="item.gender == '1'">男</span> <span v-else>女</span> </td> <td>{{item.job}}</td> </tr>vshow;基于CSS 控制显示和隐藏 适用于频繁切换的场景
<td> <span v-show="item.job == '1'">前端开发</span> <span v-show="item.job == '2'">后端开发</span> <span v-show="item.job == '3'">项目经理</span> <span v-show="item.job == ''">未知</span> </td>v-model 具备双向数据绑定的效果
<input type="text" id="name" name="name" placeholder="请输入姓名" v-model="searchForm.name"> <select id="gender" name="gender" v-model="searchForm.gender"> <select name="positon" id="positon" v-model="searchForm.job"> searchForm: { name: '', gender: '', job: '' }V-ON 使查询和重置有效
methods与data平级
<button type="submit" v-on:click="search">查询</button> methods: { search() { console.log(this.searchForm); } }