VUE快速入门 - 技术栈

VUE是一款用于构建用户界面的渐进式的JavaScript框架

准备：

1.引入VUE模块

2.创建VUE程序的应用实例，控制视图的元素

3.准备元素(div),被Vue控制

javascript 复制代码

<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: 注意放入的位置

javascript 复制代码

    <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 :基于条件判断，来创建或移除元素节点要么显示要么不显示

javascript 复制代码

 <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 控制显示和隐藏适用于频繁切换的场景

html 复制代码

 <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 具备双向数据绑定的效果

html 复制代码

 <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平级

html 复制代码

 <button type="submit" v-on:click="search">查询</button>

 methods: {
                search() {
                    console.log(this.searchForm);
                }
            }