hello,还是你们熟悉的老沈,今天下午看了智能社的一节课,受益匪浅啊,学习vue的过程中掌握了很多boot和js的语法,又请输入图片描述
跟着导师自己做了一个留言板的小案例。

--案例感受,vue的入门是真的很简单,学到了vue的自定义指令,能够很快的做一个非常实用的留言板,但是由于是前端页面,不能数据保存
,等到后期教师满意度的项目结束以后,会写一个购物网站,把vue+bootstrap+javabean能够完整的做一个项目。
--先po一下代码吧。
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-3.0.0.js"></script>
<script src="bootstrap.min.css"></script>
<script src="vue.js"></script>

</head>
<body>
<div id="window">
<h1 class="text-center">简易留言板</h1>
<form>

<label for="user" class="text-center">用户名
    <input type="text" class="form-control" id="user" v-model="username">
</label>
<label for="age" class="text-center">年龄
    <input type="text" class="form-control" id="age" v-model="age">
</label>
<label for="button" class="text-center">
    <input type="button" class="btn btn-danger" id="button" value="提交" v-on:click="submit">
</label>

</form>

序号 用户名 年龄 操作
{{$index+1}} {{item.username}} {{item.age}} <button class="btn btn-primary btn-danger" @click="nowdelete($index)">删除</button>
<button class="btn btn-primary btn-danger" @click="nowdelete(-2)">删除全部</button>
<p>暂无数据。。。</p>

</div>
<script src="index.js"></script>
</body>
</html>

--js代码
new Vue({

el:'#window',
data:function () {
    return{
        message:[],
        username:'',
        age:'',
        Nowindex:'-99'
    }
},
methods:{
    submit:function () {
        this.message.push({
            name:this.username,
            age:this.age
        });
        this.age='';
        this.username='';
    },
    nowdelete:function (index) {
        if(index==-2){
            this.message=[]
        }else{
            this.message.splice(index,1);
        }
    }
}

})

--得引入jq和boot和vue
--案例功能,能够提交表单信息到下方的表格,以及删除
--用到的vue指令
v-model的表单双向数据绑定
v-for循环vue数组内容
--ps:在vue2.0的版本中,不能直接使用$index来表示序列了,要在for循环声明index的存在,比如v-for="(item,$index) in message
--ps:vue的点击事件v-on:click,如果后面跟的方法名如果有参数要表达的话,要写成@click="submit($index)",类似这种

明天继续,结束!

标签: none

仅有一条评论

  1. 很好奇博主用的什么字体 第一次见

添加新评论