属性，表单，条件，循环，斗篷指令及vue的项目环境

时间：2020-02-12 21:33:10 阅读：71 评论：0 收藏：0 [点我收藏+]

斗篷指令：

? v-cloak 避免屏幕闪烁

原理：

? 1）属性选择器，会将v-cloak属性所在的标签隐藏

? 2）当vue环境加载后，会将v-clock属性解析移除，所以内容{{ num }}

? 就会显示出来

? 3)而现在vue已经准备完毕，所以用户会直接看到数值10，而不会看到页面从{{ num }}闪烁成10

    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>

<body>
    <div id="app" v-cloak>
        <button v-on:click="fn">{{ num }}</button>

    </div>

</body>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num: 10
        },
        methods:{
          fn () {
              if(this.num !== 0){
                  this.num -= 2
              }else {

              }
          }
        }
    })

</script>

属性指令：

1）语法：v-bind: 属性名=“变量” :后面不可以有空格

2）针对不同属性，使用方式有些区别

? 自定义属性以及title这些直接赋值的，使用方式为（t是变量， o是常量）：

<p class="a" style="color:blue" v-bind:title="t" v-bind:owen="o">段落</p>
1)标签属性没有被b-bind绑定时，基本使用
2）标签被v-bind绑定，就会被vue控制，‘值就会变成变量’
    如果一个属性要被vue控制，填写变量，就要用v-bind

? class属性：

? 绑定的变量，值可以为一个类名“p1”，也可以是多个类名“p2”

<p v-bind:class="pc">
    
</p>
new Vue({
    data:{
        pc:'p1 p2'
}
})

? 绑定的数组，数组的每一个成员都是一个变量

<p v-bind:class="[a, b]">
    
</p>
new Vue({
    data:{
    a:'p1',
    b:'p2'
}
})

? 绑定的字典：key就是类名，value决定改类名是否起作用

<p v-bind:class="{p1:1， p2：0}"> 1为真，0为假
    
</p>

? a是变量，值是类名| b是类名，不是变量| c是变量，值为布尔值

<p v-bind:class="[a, {b:c}]">
    
</p>

例题：

三个按钮，点击谁，样式显示
<div id="app">
    <hr>
<button v-bind:class="{live: isLive == 1}" v-on:click="changeLive(1)">
    1
</button>
<button v-bind:class="{live: isLive == 2}" v-on:click="changeLive(2)">
    2
</button>
<button v-bind:class="{live: isLive == 3}" v-on:click="changeLive(3)">
    3
</button>
    <hr>
</div>


<script>
    new Vue({
        el:'#app',
        data:{
            isLive:1,
        }
        methods:{
            changeLive(index) {
                this.islive = index
            }
        }
    })
</script>

? style属性(了解)

? 绑定的变量：值是字典

<p v-bind:style="myStyle">
    
</p>
new Vue({
    myStyle:{
    width: '50px',
    height: '50px',
    backgroundColor: 'green',
    
}
})

表单指令：

? 1) 语法：v-model=“变量”

? 2）v-model绑定的变量控制的其实就是value属性值

? 3）v-model要比v-bind:value要多一个监听机制

? 4）数据的双向绑定：

? v-model可以将绑定的变量值映射给表单元素的value

? v-model还可以将表单元素的新的value映射给绑定的变量

<body>
    <div id="app">
        <form action="" method="post">
<!--            <input name='n1' type="text" v-model="v1">-->
<!--            <input name='n2' type="text" v-model="v1">-->

            <input name='n2' type="text" :value="v1">
            <input name='n2' type="text" :value="v1">

        </form>

    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            v1:' '
        }
    })
</script>

条件指令：

? 1）语法：v-show="变量" v-if="变量"

? 2）两者的区别：
? v-show在隐藏标签时，采用display：none渲染标签，标签通过css隐藏

? v-if在隐藏标签时，不会渲染在页面上

? 3）v-if有家族：v-if | v-else-if | v-else

? v-if 是必须的必须设置条件

? v-else-if可以为1-n个必须设置条件

? v-else可以为0或1个

? 上方分支成立，会屏蔽下方所有的分支，从上往下，以此类推

<div id="app">
    <div>
        <p v-show="isShow">show控制显隐</p>
        <p v-if="isShow">if控制显隐</p>
    </div>

    <div>
        <p v-if="0">你是第1个p</p>
        <p v-else-if="0">你是第2个p</p>
        <p v-else>你是第3个p</p>
    </div>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: false,
        }
    })
</script>

条件指令案例：

vw：view width       vh: view height

<style>
    body {
        margin: 0
    }
    button {
        width: 60px;
        line-height: 40px;
        float: right;
    }
    .bGroup:after {
        display: block;
        content: '';
        clear: both;
    }
    .box {
        /* vw: view width  vh: view height*/
        width: 100vw;
        height: 200px;
    }
    .red {
        background-color: red;
    }
    .green {
        background-color: green;
    }
    .blue {
        background-color: blue;
    }

    button.active {
        background-color: cyan;
    }
</style>

<div id="app">
    <div class="bGroup">
        <button :class="{active: isShow === 'red'}" @click="isShow = 'red'">红</button>
        <button :class="{active: isShow === 'green'}" @click="isShow = 'green'">绿</button>
        <button :class="{active: isShow === 'blue'}" @click="isShow = 'blue'">蓝</button>
    </div>
    <div>
        <div v-if="isShow === 'red'" class="box red"></div>
        <div v-else-if="isShow === 'green'" class="box green"></div>
        <div v-else class="box blue"></div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            isShow: 'red'
        }
    })
</script>

循环指令：

? 1）语法： v-for="ele in obj" obj是被遍历的对象，ele是遍历得到的每一次的结果

? 2）遍历可迭代对象的首要结果，都是可迭代对象容器中的值，其次还可以遍历得到索引和键

? 字符串： v-for=“ v in str” | v-for=" (v,i) in str"

? 数组： v-for=“ v in arr” | v-for=" (v,i) in arr"

? 对象： v-for=“ v in obj” | v-for=" (v,k) in obj" | v-for="(v,k,i) in obj"

ps：v-for遍历要依赖于一个所属标签，该标签及内部所有的内容都会被循环复用

text-align: center 文本相关的属性大多数默认值是inherit，父级改变子级也改变

<head>
    <meta charset="UTF-8">
    <title>循环指令</title>
</head>
<body>
    <div id="app">
        <!-- 遍历数字
        5
        【1】【2】【3】【4】【5】
        -->
        <p>{{ d1 }}</p>
        <i v-for="e in d1">【{{ e }}】</i>
        <hr>

        <!-- 遍历字符串
        abc
        【a】【b】【c】
        【0a】【1b】【2c】
        -->
        <p>{{ d2 }}</p>
        <i v-for="e in d2">【{{ e }}】</i>
        <i v-for="(e, i) in d2">【{{ i }}{{ e }}】</i>
        <hr>

        <!-- 遍历数组
        [ 1, 3, 5 ]
        【1】【3】【5】
        【01】【13】【25】
        -->
        <p>{{ d3 }}</p>
        <i v-for="e in d3">【{{ e }}】</i>
        <i v-for="(e, i) in d3">【{{ i }}{{ e }}】</i>
        <hr>

        <!-- 遍历对象
        { "name": "Bob", "age": 17.5, "gender": "男" }
        【Bob】【17.5】【男】
        【name-Bob】【age-17.5】【gender-男】
        【name-Bob-0】【age-17.5-1】【gender-男-2】
        -->
        <p>{{ d4 }}</p>
        <i v-for="e in d4">【{{ e }}】</i>
        <i v-for="(e, k) in d4">【{{ k }}-{{ e }}】</i>
        <i v-for="(e, k, i) in d4">【{{ k }}-{{ e }}-{{ i }}】</i>
        <hr>

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            d1: 5,
            d2: 'abc',
            d3: [1, 3, 5],
            d4: {
                name: "Bob",
                age: 17.5,
                gender: "男"
            }
        }
    })
</script>

商品循环案例

<style>
    .box {
        width: 280px;
        border: 1px solid #eee;
        border-radius: 5px;
        overflow: hidden; /* 隐藏超出父级显示范围外的内容 */
        text-align: center; /* 文本相关的属性大多默认值是inherit */
        float: left;
        margin: 10px;
    }
    .box img {
        width: 100%;
    }
</style>

<div id="app">
    <div class="box" v-for="obj in goods">
        <img :src="obj.img" alt="">
        <p>{{ obj.title }}</p>
    </div>
</div>

<script>
    let goods = [
        {
            "img": "https://***1.jpg",
            "title": "纯种拆家专家1"
        },
        {
            "img": "https://***2.jpg",
            "title": "纯种拆家专家2"
        },
    ];
    
    new Vue({
        el: '#app',
        data: {
            goods,
        }
    })
</script>

Array操作：

"""
尾增：arr.push(ele)  
首增：arr.unshift(ele)
尾删：arr.pop()
首删：arr.shift()
增删改插：arr.splice(begin_index, count, args)
"""

前台数据库：

"""
// 存
// 持久化化存储，永远保存
localStorage.name = "Bob";
// 持久化化存储，生命周期同所属标签(页面)，页面关闭，重新打开就会丢失
sessionStorage.name = "Tom";

// 取
console.log(localStorage.name);
console.log(sessionStorage.name);

// 清空
localStorage.clear();
sessionStorage.clear();

// 短板：只能存储字符串，所有对象和数组需要转换为json类型字符串，再进行存储
let a = [1, 2, 3];
localStorage.arr = JSON.stringify(a);
let b = JSON.parse(localStorage.arr);
console.log(b);
"""

重点：事件指令与属性指令都可以简写

? 1.v-bind: 可以简写为：

? 2.v-on: 可以简写为@

https是在http协议之上增加了ssl加密规则

伪类与事件

@click  点击事件
@mouseover  悬浮事件
@mousedown  鼠标按下去事件
@dbclick    双击
@mouseup    抬起
@mouseout   离开

案例：留言板

<style>
    li:hover {
        color: red;
        cursor: pointer;
    }
</style>

<div id="app">
    <form>
        <input type="text" v-model="info">
        <button type="button" @click="sendInfo">留言</button>
    </form>
    <ul>
        <li v-for="(info, index) in info_arr" @click="deleteInfo(index)">{{ info }}</li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            info: '',
            // 三目运算符： 条件 ? 结果1 : 结果2
            info_arr: localStorage.info_arr ? JSON.parse(localStorage.info_arr) : [],
        },
        methods: {
            sendInfo () {
                // 完成留言：将info添加到info_arr
                // 增 push unshift | 删 pop shift
                if (this.info) {
                    // 留言
                    this.info_arr.push(this.info);
                    // 清空输入框
                    this.info = '';
                    // 前台数据持久化(缓存)
                    localStorage.info_arr = JSON.stringify(this.info_arr);
                }
            },
            deleteInfo(index) {
                // 删
                this.info_arr.splice(index, 1);
                // 同步给数据库
                localStorage.info_arr = JSON.stringify(this.info_arr);
            }
        }
    })
</script>

属性，表单，条件，循环，斗篷指令及vue的项目环境

原文：https://www.cnblogs.com/godlover/p/12300653.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)