Vue基本学习2

Vue使用方法

<script src="js/vue.js"></script><script>/*** Mode1:数据模型，负责数据存储(后台业务逻辑/数据库)* View:视图层，负责页面展示(HTML)* View Model(Vue):负责业务逻辑处理(比如Ajax请求等)* view 与 Model 数值保持一致，互相影响，双向绑定* */new Vue({el:"#app",    // view 监听的范围data:{        //Modelmessage: 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：根据表达式的真假来插入和删除元素

在这里插入代码片

◆ v-else：v-else指令为v-if添加一个“else块”
◆ v-show：控制切换一个元素的显示和隐藏
◆ v-on：为 HTML 元素绑定事件监听

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

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

new Vue({el:"#app",        // view 监听的范围
data:{                        //Modelmessage: 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：将用户的输入同步到视图上

// 能轻松实现表单输入和应用状态之间的双向绑定
// 双向绑定
// 指的是我们在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利用

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

[点击并拖拽以移动]

​