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>

[点击并拖拽以移动]