Vue2基础入门

Vue.js入门与实践：从MVVM到数据交互

最新推荐文章于 2025-11-25 13:52:05 发布

原创最新推荐文章于 2025-11-25 13:52:05 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

MVC：模型到视图单向展示

MVVM：数据双向绑定

快速入门

官网下载vue.js（下载开发版本）

安装 — Vue.js

webapp下创建js文件夹，复制vue.js文件到文件夹。

在webapp中创建html/vueDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app"><!--在body里建一个最大的div并加上一个id,作为vue2的el挂载点-->
<h1>vue~</h1>
    <input v-model="name">
    <!--插值表达式回显为 -->
    插值表达式回显为{{name}}
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                name:""
            }
        }
    })
</script>
</html>

右键run vueDemo.html即可。

Vue2常用指令

v-bind为HTML标签绑定属性值href、scc样式等

v-model表单元素双向绑定数据 v-on为HTML标签绑定事件

v-if/v-else/v-else-if条件性的为true时渲染某元素 v-show根据条件展示某元素(改display属性)

v-for列表渲染遍历容器元素或对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app"><!--在body里建一个最大的div并加上一个id,作为vue2的el挂载点-->
<h1>vue~</h1>
    <input v-model="name">
    <!--插值表达式回显为 -->
    插值表达式回显为{{name}}<br>
    v-bind:<a v-bind:href="url">百度一下</a><br>
    请输入网址<input v-model="inputUrl"><a :href="inputUrl">进入网址</a><br>
    v-on：<input type="button" value="点击弹窗" v-on:click="showAlert()">
    v-on：<input type="button" value="点击弹窗" @click="showAlert()"><br>
    v-if=""输入count值进行<input v-model="count" type="text"><br>
    v-if展示响应的结果如下：<div v-if="count==3">v-if="count==3"div3</div>
    <div v-else-if="count==2">v-if="count==2"div2</div>
    <div v-else>v-else:count为其他情况</div>
    v-show=""  count为3时展示结果如下<div v-show="count==3">div:count==3,v-show</div>
    v-for=""<div v-for="addr in addrs">
        {{addr}}<br>
    </div>
    v-for带索引写法<div v-for="(addr,i) in addrs">
        {{i+1}}---{{addr}}
    </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                name:"",
                url:"http://www.baidu.com",
                inputUrl:"",
                count:3,
                addrs:["北京","上海","杭州"]
            }
        },
        methods:{
            showAlert(){
                alert("弹窗弹窗~")
            }
        }
    })
</script>
</html>

Vue2生命周期

每触发一个生命周期事件，自动执行一个相应的钩子函数。

beforeCreate创建前、created创建后、beforeMount载入前、mounted挂载完成、beforeUpdate更新前、updated更新后、beforeDestroy销毁前、destroyed销毁后。

常用mountet表示vue渲染和html页面创建完成后用于发送异步请求。

项目Demo：vue+html+axios+json+servlet+mybatis完成用户查询和新增操作

项目环境

引入以下博客中的Demo项目

Ajax与Axios_阳光明媚UPUP的博客-优快云博客

将vue.js文件拷贝到webpapp的js目录下

修改html/User.html内容为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UserList</title>
</head>
<body>
<div id="app">
    <a href="addUser.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="userTable" border="1px" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>name</th>
            <th>password</th>
            <th>email</th>
            <th>birthday</th>
            <th>infoId</th>
            <th>englishTeacher</th>
            <th>操作</th>
        </tr>
        <tr v-for="(user,i) in users" align="center">
            <td>{{i+1}}</td>
            <td>{{user.name}}</td>
            <td>{{user.password}}</td>
            <td>{{user.email}}</td>
            <td>{{user.birthday}}</td>
            <td>{{user.infoId}}</td>
            <td>{{user.englishTeacher}}</td>
            <td><a href="#">修改</a>&amp;<a href="#">删除</a> </td>
        </tr>
    </table>
</div>
</body>
<!--<script src="/FilterModule/js/axios-0.18.0.js"/>-->
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                users: []//用这个数组集合接收
            }
        },
        mounted() {
            var _this = this;
            axios({
                method: "get",
                url: "http://localhost:8080/AxiosModule/selectAllServlet"
            }).then(function (resp) {
                _this.users = resp.data;
            })
        }
    })
</script>
</html>

修改html/addUser.html内容为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>addUser</title>
</head>
<body>
<div id="app">
<h3>添加用户</h3>
<form action="" method="post">
    name：<input id="name" name="name" v-model="user.name" type="text"><br>
    password：<input id="password" name="password" v-model="user.password" type="password"><br>
    email：<input id="email" name="email" v-model="user.email" type="text"><br>
    birthday：<input id="birthday" name="birthday" v-model="user.birthday" type="date"><br>
    infoId：<input id="infoId" name="infoId" v-model="user.infoId" type="text"><br>
    englishTeacher：<input id="englishTeacher" name="englishTeacher" v-model="user.englishTeacher" type="text"><br>
<!--    status：
    <input name="status" type="radio" value="0">禁用
    <input name="status" type="radio" value="1">启用-->
    <input type="button" id="btn" @click="submitForm" value="submit">
    <input type="reset" value="reset">
</form>
</div>
</body>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                user:{}//定义一个js对象
            }
        },
        methods:{
            submitForm(){
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/AxiosModule/AddServlet",
                    data: _this.user
                }).then(function (resp) {
                    if (resp.data=="success"){
                        location.href="http://localhost:8080/AxiosModule/html/User.html";
                    }
                })
            }
        }
    })
</script>
</html>