Vue基本学习2

Vue使用方法

javascript 复制代码
<script src="js/vue.js"></script>
    <script>
        /**
         * Mode1:数据模型,负责数据存储(后台业务逻辑/数据库)
         * View:视图层,负责页面展示(HTML)
         * View Model(Vue):负责业务逻辑处理(比如Ajax请求等)
         * view 与 Model 数值保持一致,互相影响,双向绑定
         * */
        new Vue({
            el:"#app",    // view 监听的范围
            data:{        //Model
                message: 10 ,
                guojia: 3
            },
            //监控监听data的数据是否发生变化
            watch:{
                message(newValue,oldValue){
                    console.log("message的值是:   "+oldValue+"   To   "+newValue);
                },
                guojia(newValue,oldValue){
                    console.log("guojia的值是:   "+oldValue+"   To   "+newValue)
                }
            },
            //常用的自定义方法
            methods:{
                anniu:function(){
                    alert("按钮已经被单击");
                }
            }
        })
    </script>

◆ v-if:根据表达式的真假来插入和删除元素

javascript 复制代码
在这里插入代码片

◆ v-else:v-else指令为v-if添加一个"else块"

◆ v-show:控制切换一个元素的显示和隐藏

◆ v-on:为 HTML 元素绑定事件监听

javascript 复制代码
v-on后面可以增加修饰符
◼ .stop:调用event.stopPropagation()
◼ .prevent : 调用event.preventDefault()
◼ .self : 只当时间是从侦听器绑定的元素本身触发时才触
发回调
◼ .{keycode} : 只在指定键上触发回调

使用v-on: 监听button按钮,一旦点击执行anniu()函数;

javascript 复制代码
new Vue({
            el:"#app",        // view 监听的范围
data:{                        //Model
                message: 10 ,
                guojia: 3
            },
使用watch来监控监听data的数据是否发生变化
 watch:{
                message(newValue,oldValue){
                    console.log("message的值是:   "+oldValue+"   To   "+newValue);
                },
                guojia(newValue,oldValue){
                    console.log("guojia的值是:   "+oldValue+"   To   "+newValue)
                } methods:{
                anniu:function(){
                    alert("按钮已经被单击");
                }
            }
        })

◆ v-model:将用户的输入同步到视图上

javascript 复制代码
// 能轻松实现表单输入和应用状态之间的双向绑定
// 双向绑定
// 指的是我们在vue实例中的data与其渲染的dom元素上 的内容保持一致,两者无论谁被改变,另一方也会相应 的更新为相同的数据
v-model = 变量
v-model 指令只能用在<input>, <select>,<textarea>等这些表单元素上

◆ v-bind:绑定 HTML 元素的属性

v-bind可以在其名称后面带一个参数,参数通常是HTML元素的

特性(attribute),v-bind是动态绑定指令,默认情况下自带属

性的值是固定的,为了能够动态的给这些属性添加值可以使用v

bind指令

◆ v-bind:属性名 = '表达式'

◆ 简写形式:v-bind可以省略,直接书写为 :属性名 = '表达式'

等价于 //绑定一个属性

//绑定多个属性
多个样式的绑定

点击并拖拽以移动

◆ v-for :遍历 data 中的数据,并在页面进行数据展示

◆ 遍历 data 中的数据,并在页面进行数据展示

◆ v-for =(item, index) in items

◼ item 表示每次遍历得到的元素

◼ index 表示item的索引,可选参数

◼ items表示数组或者对

点击并拖拽以移动

test4.html利用
Document

复制代码
<h1 style="color: antiquewhite;width:40%;margin-left: 30%;text-align: center">学生信息管理</h1>

<div id="app">
    <table border="1">
        <tr>
            <td>姓名</td>
            <td>学号</td>
            <td>年级</td>
            <td>年级名</td>
            <td>身份证</td>
            <td>密码</td>
            <td>电话</td>
            <td>性别</td>
            <td>地址</td>
            <td>生日</td>
            <td>邮箱</td>
            <td colspan="2">操作</td>
        </tr>
        <tr v-for="item in Studentlist">
            <td>{{item.studentName}}</td>
            <td>{{item.studentNo}}</td>
            <td>{{item.gradeId}}</td>
            <td>{{item.gradeName}}</td>
            <td>{{item.identityCard}}</td>
            <td>{{item.loginPwd}}</td>
            <td>{{item.phone}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.address}}</td>
            <td>{{item.bornDate}}</td>
            <td>{{item.email}}</td>

            <td><input type="button" value="修改" @click="student=item" /></td>
            <td><input type="button" value="删除" @click="delStudent(item.studentNo)" /></td>
        </tr>
    </table>
    <h2 style="color: antiquewhite;width:40%;margin-left: 30%;text-align: center">增加学生信息</h2>
    <table>
        <tr>
            <td style="text-align: right;"><b>学生姓名:</b></td>
            <td style="text-align: left;"><input v-model="student.studentName" /></td>
        </tr>

        <tr>
            <td style="text-align: right;"><b>学生密码:</b></td>
            <td style="text-align: left;"><input v-model="student.loginPwd" /></td>
        </tr>

        <tr>
            <td style="text-align: right;"><b>学生性别:</b></td>
            <td style="text-align: left;"><input v-model="student.sex" /></td>
                <!-- 男性选项 -->
                <!-- 女性选项 -->

            </td>
        </tr>
        
        <tr>
            <td style="text-align: right;"><b>班级编号</b></td>
            <td style="text-align: left;"><input v-model="student.gradeId" />
                <!-- <select >
                    <option v-for="item in gradeList" :value="item.gradeId">{{item.gradeName}}</option>
                </select> -->
            </td>
        </tr>
        <tr>
            <td style="text-align: right;"><b>手机号:</b></td>
            <td style="text-align: left;"><input v-model="student.phone" /></td>
        </tr>

        <tr>
            <td style="text-align: right;"><b>家庭地址:</b></td>
            <td style="text-align: left;"><input v-model="student.address" /></td>
        </tr>
        <tr>
            <td style="text-align: right;"><b>学生邮箱:</b></td>
            <td style="text-align: left;"><input v-model="student.email" /></td>
        </tr>
        <tr>
            <td><input type="hidden" id="studentNO" /></td>
        </tr>
        <tr>
            <td  style="text-align: right;"><input type="button" value="添加" @click="addStudent"/></td>
            <td  style="text-align: right;"><input type="button" value="修改" @click="updateStudent"/></td>
        </tr>
    </table>
</div>

点击并拖拽以移动

相关推荐
拾光拾趣录1 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店1 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
别跟老夫聊头发1 小时前
vue缩放/放大时,实时更新/变换显示高度
vue.js
拾光拾趣录1 小时前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权1 小时前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598241 小时前
vue3源码解析:调度器
前端·vue.js
梦想CAD控件2 小时前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
普宁彭于晏2 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
bitbitDown2 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
markyankee1012 小时前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js