VUE(下)

VUE(下)

VUE指令

表单指令

数据的双向指令

v-model = "变量"

model绑定的变量,控制的是表单元素的value

  • 普通表单元素用v-model直接绑定控制value
  • 单一复选框,函数中的是truefalse
  • 多个复选框中,函数中写的是空列表,如果列表中有字符串,表示默认选中这个选项
  • 单选框中,函数的值可以为字符串,这个字符串还是value中的值,默认选中
<body>
    <div id="app">
        <form action="">
            <!--属性指令:v-model="变量",v-model绑定的变量控制的是表单元素的value值 -->

            <!--普通表单元素,用v-model直接绑定变量控制value值-->
            <input type="text" v-model="v1">
            <input type="text" v-model="v1">
            <textarea name="" id="" cols="30" rows="10" v-model="v1"></textarea>
            <p>{{ v1 }}</p>
            <hr>

            <!--单一复选框-->
            同意:
            <input type="checkbox" name="agree" v-model="v2">
            <hr>
            <!--多个复选框-->
            男:<input type="checkbox" name="hobbies" value="male" v-model="v3">
            女:<input type="checkbox" name="hobbies" value="female" v-model="v3">
            哇塞:<input type="checkbox" name="hobbies" value="wow" v-model="v3">
            <p>{{ v3 }}</p>
            <hr>

            <!--单选框-->
            中午吃啥:<br>
            肉肉:<input  name="food" type="radio" value="rourou" v-model="v4">
            饭饭:<input name="food" type="radio" value="fanfan" v-model="v4">
            <p>{{ v4 }}</p>
            <hr>
            <button type="submit">提交</button>
        </form>
    </div>
</body>

斗篷指令

解决网页加载闪烁

解决方法:

  • 可以先加载VUE环境
  • v-cloak,他就类似于一个属性,有VUE环境,他这个属性就被取消了!!!
<style>
        [v-cloak] {
            display: none;
        }
</style>

条件指令

v-if = "true|false":为假时,在页面上不渲染,可以隐藏标签中的信息

v-sow = "true|false":为假时,页面中用display:none渲染,虽然没有展示,但是仍在页面结构中

v-if是一个家族

  • v-if
  • v-else-if

以上两个当为假时,即等于0时,v-else出现,且不需要条件,一旦分值成立,下分支就会被屏蔽

  • v-else
   <p v-if="false">if指令</p>
        <p v-show="false">show指令</p>
        <p v-if="v1 === '1'">if分支</p>
        <p v-else-if="v1 === '2'">elif分支1</p>
        <p v-else-if="v1 === '3'">elif分支2</p>
        <p v-else>else分支</p>

循环指令

语法:

v-for = "成员的容器"

  • 字符串循环渲染:可以只遍历值,也可以遍历值与索引
  • 数组循环渲染:
  • 对象循环渲染:可以遍历值、可以遍历值与key、可以遍历值,key,index
 <!--1、字符串循环渲染: 可以只遍历值,也可以遍历值与索引-->
        <p>
            <span v-for="v in title">{{ v }}</span>
        </p>

        <p>
            <span v-for="(v, i) in title">
                <span v-if="i != 0"> | </span>
                {{ v }}
            </span>
        </p>

        <!--2、数组循环渲染: 可以只遍历值,也可以遍历值与索引-->
        <div>
            <p v-for="(v, i) in arr">第{{ i }}元素:{{ v }}</p>
        </div>

        <!--3、对象循环渲染: 可以只遍历值,也可以遍历值与键,还可以遍历值、键与索引-->
        <div>
            <p v-for="v in people">{{ v }}</p>
        </div>
        <div>
            <p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
        </div>
        <div>
            <p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
        </div>
        <br>

        <div>
            <div v-for="(stu, i) in stus">
                <hr v-if="i != 0">
                <p v-for="(v, k) in stu">{{ k }}:{{ v }}</p>
            </div>
        </div>

VUE成员

分隔符成员

用来修改插值表达式符号:delimiters

<script>
    new Vue({
        el: '#app',
        data: {
            num: 100
        },
        delimiters: ['{', ']}'],
    })
</script>

计算属性成员

computed:里面是函数

  • 他定义的是方法属性,data中定义的也是属性,所以不需要重复定义
  • 方法属性的值来源于绑定方法的返回值
  • 方法属性必须在页面中渲染后,绑定的方法才会被调用
  • 方法中出现的所有变量都会被监听,任何变量发生值更新都会调用一次绑定方法,重新更新一下方法属性的值
  • 方法属性值不能手动设置,必须通过绑定的方法进行设置
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '',
            v2: '',
            // res: '结果',
        },
         computed: {
            res () {
                return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';
            }
        }
    })
</script>

属性的监听

watch:

  • 给已有属性设置监听方法
  • 监听的属性值一旦发生更新,就会调用监听方法,在方法中完成相应逻辑
  • 监听方法不需要返回值,返回值只有主动结束方法的作用
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '',
            last_name: '',
        },
        watch: {
            // 1、watch中给已有的属性设置监听方法
            // 2、监听的属性值一旦发生更新,就会调用监听方法,在方法中完成相应逻辑
            // 3、监听方法不需要返回值(返回值只有主动结束方法的作用)
            full_name() {
                if (this.full_name.length === 2) {
                    k_v_arr = this.full_name.split('');
                    this.first_name = k_v_arr[0];
                    this.last_name = k_v_arr[1];
                }
            }
        }
    })
</script>

补充

  • sessionstorage的生命周期与页面标签绑定,当标签页关闭,数据库被清空eg:刷新页面不会重新开始
  • localstorage:前台永久数据库eg:关闭浏览器不会重新开始,而是停留在浏览的位置
  • 数组操作:push、pop、unshift、shift、splice

splice可以完成数组的增删改

let arr[1,2,3,4]
arr.splice(0,0,0)   //以索引0开始,操作长度为0、操作的结果为0

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。