总结之Vue（一）——Vue常用语法

最新推荐文章于 2023-09-05 09:58:14 发布

IManiy

最新推荐文章于 2023-09-05 09:58:14 发布

阅读量366

点赞数

本文链接：https://blog.csdn.net/IManiy/article/details/105230803

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue常用语法</title>
    <script src="vue.js"></script>
    <!-- https://www.kancloud.cn/yunye/axios/234845 api -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    {{message}}<!--vue的插值表达式，data中定义的数据显示到此处-->
    <!-- 三元运算符 -->
    {{true?"ok":"no"}}
    <!-- 运算 -->
    {{number*21}}
    <!-- 函数 -->
    <button v-on:click="fun1('vue v-onclick')">vue的CLick</button>
    Vue:<input type="text" v-on:keydown="fun($event)">

    <div @mouseover="fun2">33333</div>
    <!-- <form @submit.prevent>
         <input  type="submit" value="提交">
     </form>-->
    <div v-text="message2" v-bind:color="ys">4444</div>
    <div v-html="message2">43434</div>
    <ul>
        <li v-for="(item,index) in arr ">{{item}},{{index}}</li>
        <li v-for="(key,value) in product ">{{key}},{{value}}</li>
    </ul>
    <table bgcolor="#f0f8ff">
        <tr v-for="(product,index) in products">
            <td>{{index}}</td>
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
        </tr>
    </table>
    <form action="" method="post">
        用户名：<input type="text" name="username" v-model="user.username"><br/>
        密码：<input type="text" name="password" v-model="user.password"><br/>
    </form>
    <div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
    <div v-show="ok">
        Now you see me
    </div>
</div>
</body>
<script>
    //创建vue对象
    /**
     * @事件名称 就是 v-on:事件名称的简写方式
     * @mouseover 它就等同与v-on:mouseover
     */
    /**
     * v-bind 给html标签的属性设置变量的值
     * v-for 遍历数据
     */
    new Vue({
        el: "#app", //由vue接管id为app区域
        data: {
            message: "Hello vue!", //不加分号
            number: 100,
            message2: "<h1>hello vue!</h1>",
            ys: "red",
            arr: [1, 2, 3, 4, 5],
            product: {
                id: 1,
                name: "AJ"
            },
            products: [
                {
                    id: 1,
                    name: "AJ"
                },
                {
                    id: 2,
                    name: "计态"
                }
            ],
            user: {
                username: "test",
                password: "1234"
            },
            type: "A",
            ok: true
        },
        methods: {
            fun1: function (msg) {
                alert("hello");
                this.message = msg;
            },
            /* $event 它是vue中的事件对象，和我们传统js的event对象是一样的  */
            fun: function (event) {
                event.preventDefault();
            },
            fun2: function () {
                alert("鼠标悬停在div上了")
            },
            fun3: function () {
                //get
                // 为给定 ID 的 user 创建请求
                axios.get('/user?ID=12345')
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

                // 可选地，上面的请求可以这样做
                axios.get('/user', {
                    params: {
                        ID: 12345
                    }
                })
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                //post
                axios.post('/user', {
                    firstName: 'Fred',
                    lastName: 'Flintstone'
                })
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            }
        }
    });

</script>
</html>

通过方法改变data的值，来实现页面数据动态渲染
实例编辑页面js

var id;
$(function() {
    id = UrlParm.parm("id");
    vm = new Vue({
        el: "#rrapp",
        data: {
            investmentProject: {
            },
            typeList:[],
        },
        methods: {
            saveOrUpdate: function() {
                var url = id == null ? "bigdata/investmentProject/save" : "bigdata/investmentProject/update";
                var b1 = andy.fromVerify("#rrapp");
                if(b1){
                    $.ajax({
                        type: "POST",
                        url: baseURL + url,
                        contentType: "application/json",
                        dataType: "json",
                        data: JSON.stringify(vm.investmentProject),
                        success: function(r){
                            if(r.code === 0){
                                message("成功", "操作成功", parent.refresh,'investmentProject');
                            }else{
                                message("错误", "操作失败");
                            }
                        }
                    });
                };

            },
           
            //绑定时间控件
            dateBlock: function(){
                laydate({
                    elem:'#callTime',//绑定的元素
                    type:'datetime',
                    format:'YYYY-MM-DD hh:mm:ss',//时间格式20171219
                    position: 'static',//位置
                    istoday: true, //是否显示今天
                    choose: function(datas){ //选择日期完毕的回调
                                            }
                });
            },
            initTypeList: function() {
                $.get(baseURL + "bigdata/investmentProject/getTypeList", function(r){
                    if(r.code == 0){
                        vm.typeList = r.data;
                    }
                });
            },
            info: function() {
                if(id == null || id == undefined ) {
                    return;
                }
                $.get(baseURL + "bigdata/investmentProject/info/"+id, function(r){
                    if(r.code == 0){
                        vm.investmentProject = r.investmentProject;
                    }
                });
            },
            closeDialog: function () {
                $(document).an_dialog("close", "investmentProject");
            }
        },
        mounted() {
            this.info();
            this.initTypeList();
        },

    });
});

IManiy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
总结之Vue（一）——Vue常用语法

public class Node {private final int value;private Node next;public Node(int value){//构造方法，生成是给定初值 this.value=value; this.next=null;}public int getValue() { return value;}public N...
复制链接

扫一扫