Vue快速入门及Vue常用指令-蒲公英云

Vue快速入门及Vue常用指令

一、Vue概述

二、Vue快速入门

三、Vue的常用指令

四、Vue的生命周期

五、案例

一、Vue概述

二、Vue快速入门

" class="reference-link">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model = "username">
    <!--插值表达式-->
    {
   {username}}
</div>
<script src="js/vue.js"></script>
<script>
    //1.创建vue的核心对象
    new Vue({
       el:"#app",
        data(){
            return{
                username:""
            }
        }
        /*data:function (){
           return{
               username:""
           }
        }*/
    });
</script>
</body>
</html>

三、Vue的常用指令

v-on：

v-if和v-show：

v-for：

四、Vue的生命周期" class="reference-link"> 四、Vue的生命周期

五、案例

注意：this，this只在{}内有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <!--
            使用v-for来遍历tr
        -->
        <tr v-for="(brand,i) in brands" align="center">
            <td>{
   {i+1}}</td>
            <td>{
   {brand.brandName}}</td>
            <td>{
   {brand.companyName}}</td>
            <td>{
   {brand.ordered}}</td>
            <td>{
   {brand.description}}</td>
            <td>{
   {brand.statusStr}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",//设置当前Vue的作用范围
        data() {
            return {
                brands:[]
            };
        },
        mounted(){
            //页面加载完成后,发送异步请求来查询数据
            var _this = this;//this指的是Vue对象
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp){
                _this.brands = resp.data;//this指的是window对象(在axios内)
            })
        }
    })
</script>
</body>
</html>

注意：启用禁用可以在对应实体类中设置一个逻辑视图，用时直接拿statusStr

//逻辑视图
    public String getStatusStr() {
        if(this.status == 1){
            return "启用";
        }
        return "禁用";
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<div id="app">
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
        状态：
        <input type="radio" name="status" v-model="brand.status" value="0">禁用
        <input type="radio" name="status" v-model="brand.status" value="1">启用<br>
        <input type="button" id="btn" @click="submitForm" value="提交">
    </form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                brand:{}
            }
        },
        methods:{
            submitForm(){
                //发送ajax请求，完成添加
                let _this =this;
                axios({
                          method:"post",
                          url:"http://localhost:8080/brand-demo/addServlet",
                          data:_this.brand
                      }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if(resp.data == "success"){
                        location.href = "http://localhost:8080/brand-demo/brand.html";
                    }
                })
            }
        }
    })
</script>
</body>
</html>