vue框架 v-*的指令

最新推荐文章于 2024-07-11 09:18:39 发布

小、七

最新推荐文章于 2024-07-11 09:18:39 发布

阅读量2.9k

点赞数 1

本文链接：https://blog.csdn.net/weixin_45967126/article/details/104290274

版权

本文详细介绍了Vue框架中的v-*指令，包括v-cloak用于避免屏幕闪烁，v-bind用于属性绑定，v-model用于表单数据双向绑定，v-show和v-if实现条件展示，v-for进行数据循环，以及在面试中常见的todolist实现。文章通过实例演示了这些指令的使用方法和应用场景。

摘要由CSDN通过智能技术生成

vue框架 v-*的指令
大纲

vue框架 v-*的指令

"""
1、简述vue框架的作用和优势
    作用：开发前后台分离项目
    优势：前后台分离(开发效率)、轻量级(开发效率)、中文API(学习成本)
    框架的特点：数据驱动、虚拟DOM、单页面应用(很好适配移动端项目)、数据的双向绑定(监听机制)

2、列举出三个vue的指令，并简述每个指令的用法
    v-text:  v-text="变量"，类似{
    { 变量|基本类型|简单表达式 }} => 设置文本
    v-html:  可以解析有html语法的文本 => 设置html文本
    v-on:   v-on:事件名="方法名"  |  v-on:事件名="方法名($event, ...)" => 设置事件
    <div v-*=""> </div>

3、列举出至少三个vue实例成员，并简述每个实例成员的用法
    el: id选择器，body html不能作为挂载点，只匹配一个
    data：提供渲染的数据
    methods：提供绑定的方法
    delimiters：插值表达式标识符， ['{
    {', '}}']
    filters：提供自定义过滤器，过滤器可以同时过滤多个参数，还可以串联过滤器
    
    let data = {}
    new Vue({
        'el': '#app',
        data,
        ...
    })
4、js补充
    对象
    类：class function
    类属性：Vue.prototype.类属性
    函数：let fn = () => {}
"""

大纲

"""
1）指令
    属性指令：v-bind
    表达指令：v-model
    条件指令：v-show v-if
    循环指令：v-for
    斗篷指令：v-cloak
    
2）实例成员
    计算：computed
    监听：watch
    
3）vue项目环境
"""

斗篷指令（了解）

v-cloak：避免屏幕闪烁

"""
v-cloak：避免屏幕闪烁
1）属性选择器，会将v-cloak属性所在的标签隐藏
2）当vue环境加载后，会将v-cloak属性解析移除，所以内容{
    { num }}就会显示出来
3）而现在vue已经准备完毕，所以用户会直接看到数值10，而不会看到 页面从{
    { num }}闪烁成数值10    """

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>
    <p>{
    { num }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10
        },
    })
</script>




<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /**
        1）属性选择器，会将v-cloak属性所在的标签隐藏
        2）当vue环境加载后，会将v-cloak属性解析移除，所以内容{
    { num }}就会显示出来
        3）而现在vue已经准备完毕，所以用户会直接看到数值10，而不会看到 页面从{
    { num }}闪烁成数值10
        */
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <p v-on:click="fn">{
    { num }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // v-cloak：避免屏幕闪烁
    new Vue({
        el: '#app',
        data: {
            num: 10
        },
        methods: {
            fn () {
                if (this.num <= 0) {
                    return false;
                }
                this.num -= 2
            }
        }
    })
</script>
</html>

结果：

属性指令

属性指令：v-bind:属性名="变量"

"""
/** 属性指令
* 1）语法：v-bind:属性名="变量"
* 2）针对不同属性，使用方式稍微有一丢丢区别
*      i）自定义属性以及title这些，直接赋值的，使用方式如下（t是变量，'o'是常量）
*          &l

最低0.47元/天解锁文章

小、七

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
vue框架 v-*的指令

目录 vue框架 v-*的指令大纲斗篷指令（了解）属性指令事件补充表单指令条件指令循环指令面试题：todolist 小结 vue...
复制链接

扫一扫