还是不说废话了,直接上菜吧


vue中常见问题

vue中isNaN():判断是否不是一个数字(逻辑有点绕

vue可以用v-model实现input双向绑定,但小程序不行(可以用input内容改变事件来实现实时监听即双向绑定)

原生js及jquery开发时,渲染页面可以用jsRender(模板渲染),不用自己拼接html代码
但这样的渲染方式,不管数据更新多少,都会全部重新拼接渲染

筛选查找 array.filter(m=>m.xxx.includes("*")),这个在之前分享的笔记中涉及过

includes类似于c#的包含,同样需要注意数据类型统一的问题

vue实体搭建与指令详解

<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app" v-cloak>
        <!--有渲染延迟,建议配合v-cloak使用(渲染完再显示)-->

        <!--插值表达式-->
        <p>{{message}}</p>
        <!--v-text 不解析文本中的html标签,会覆盖掉所在标签的所有内容-->
        <p v-text="message">v-text</p>
        <!--v-html 解析文本中的html标签,会覆盖掉所在标签的所有内容-->
        <p v-html="html">v-html</p>

        <!--v-bind: 绑定属性 可省略写成冒号:即可-->
        <!--使用属性绑定后,双引号内为语法区域,如需要显示字符串,在双引号内用单引号-->
        <input type="text" v-bind:placeholder="placeholder">
        <input type="text" :placeholder="placeholder" :value="value">
        <!--v-on:  绑定事件 可省略写成@即可-->
        <input type="button" value="button" v-on:click="clickMe">
        <input type="text" @change="clickMe">
        <!--v-model 双向绑定 只能绑定value属性-->
        <input type="text" v-model="msg">

        <!--绑定样式-->
        <input type="text" :class="['class1','class2']">
        <!--三元表达式-->
        <input type="text" :class="['class1',show?'class2':'']">
        <!--数组嵌套-->
        <input type="text" :class="['class1',{'class2':show}]">
        <!--行内样式 键值对数据格式(json格式)-->
        <input type="text" :style="{'background-color':'black','color':'red'}">
        <input type="text" :style="[style1,style2]">

        <!--v-if 会销毁html,适合于变动频率较低-->
        <div v-if="show"><v-if/div>
        <!--v-show 不会销毁html,仅隐藏,适合于变动频率较高-->
        <div v-show="show">v-show</div>

        <!--v-for 循环-->
        <div v-for="id in arryIds">{{id}}</div>
        <div v-for="(u,i) in userList" :key="u.id">{{i}} -- {{u.id}} -- {{u.name}}</div>
        <div v-for="(value,key,index) in user">{{value}} -- {{key}} -- {{index}}</div>
        <div v-for="item in 5">{{item}}</div>
    </div>
</body>
</html>
<script>
    setTimeout(function () { //模拟渲染延迟
        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello world",
                html: "<b>html文本</b>",
                placeholder: "placeholder",
                value: "value",
                msg: "msg",
                show: false,
                style1: { 'background-color': 'black' },
                style2: { 'color': 'red' },
                arryIds: [1, 2, 3, 4],
                userList: [
                    {
                        id: 1,
                        name: 'Jan'
                    },
                    {
                        id: 2,
                        name: 'Ben'
                    }
                ],
                user: {
                    id: 1,
                    name: 'Jan'
                },
            },
            methods: {
                clickMe() {
                    alert("clickMe");
                }
            }
        });
    }, 500)
</script>
<style>
    [v-cloak] {
        display: none;
    }

    .class1 {
        background-color: aqua;
    }

    .class2 {
        color: blue;
    }
</style>
Last modification:March 24th, 2020 at 09:43 am
如果觉得我的文章对你有用,请随意赞赏