vue 指令 合集 案例中学习指令 超详细

最新推荐文章于 2023-08-18 16:57:00 发布
最新推荐文章于 2023-08-18 16:57:00 发布
阅读量199 收藏 1
点赞数
文章标签： javascript vue.js html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48823919/article/details/118540113
版权

文章目录

前言

提示：内容较多，通过案例可带入学习

提示：以下是本篇文章正文内容，下面案例可供参考

模板语法

  • Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

  • 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

一、插值表达式

**插值表达式：**是vue框架提供的一种在HTML模板中绑定数据的方式，使用{{变量名}}方式绑定Vue实例中data中的数据变量，会将绑定的数据实时的在视图中显示出来。

插值表达式的写法支持使用：

  • 变量名
  • 部分JavaScript表达式
    • 注：{{ }}括起来的区域，就是一个就是js语法区域，在里面可以写部份的js语法。不能写 var a = 10;分支语句;循环语句
  • 三元运算符
  • 方法调用（方法必须需要先声明）
  • …
<body>
    <div id="app">
        <!-- 直接使用变量名 -->
        <h5>{{name}}</h5>
        <!-- 运算 -->
        <h5>{{name + '--好的'}}</h5>
        <h5>{{ 1 + 1 }}</h5>
        <!-- 使用函数 -->
        <h5>{{title.substr(0,6)}}</h5>
        <!-- 三目运算 -->
        <h5>{{ age > 18 ? '成年' : '未成年'}}</h5>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            title: "我是一个标题，你们看到没有",
            name: "张三",
            age: 20,
        },
    });
</script>

二、指令

1、v-cloak

**作用：**解决浏览器在加载页面时因存在时间差而产生的闪动问题

**原理：**先隐藏元素挂载位置，处理好渲染后再显示最终的结果

**注意：**需要与CSS规则一起使用

**文档地址：**https://cn.vuejs.org/v2/api/#v-cloak

示例：

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

<div v-cloak>
  {{ message }}
</div

如果后期有多个元素需要解决闪动问题，可以将v-cloak写在根元素上（id="app"顶级的div上）。

2、数据绑定指令

  • v-text 填充纯文本
    • 相比插值表达式更加简洁
    • 不存在插值表达式的闪动问题
<div id='app'>
	<span v-text="msg"></span>
	<!-- 和下面的一样 -->
	<span>{{msg}}</span>
</div>

<script src="./js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg:'<a href="http://www.baidu.com/">百度一下</a>'
    }
  })
</script>
  • v-html 填充HTML片段
    • 存在安全问题
    • 本网站内部数据可以使用，来自第三方的数据不可使用
      • 只有一个场景会使用：后台会用，比如有一个企业站，会发不企业的动态的新闻，这个时候会使用富文本编辑器，由于内容是自己人加的，所以可以放心使用。 自己攻击自己（自攻）
<div id='app'>
    <div v-html="html"></div>
</div>

<script src="./js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      html:'<a href="http://www.baidu.com/">百度一下</a>'
    }
  })
</script>
  • v-pre 填充原始信息（对应的是以前html中的标签“
    ”）【凑数】

   
   
    • 跳过表达式的编译过程（先编译，后渲染），显示原始信息
    

<span v-pre>{{ this will not be compiled }}</span>

有些时候我们不想指令中的表达式进行运行，只需要给表达式加个引号。例如：

<div v-html='"msg"'></div>
<div v-html="'msg'"></div>

针对后续想让指令属性值不解析的操作都可以这么去做。

3、v-once

作用：只渲染元素或组件一次**，之后元素或组件将失去**响应式（数据层面）功能（对于数据的一锤子买卖）

**Q & A：**如何理解响应式？

  • 布局响应式：布局会随着设备尺寸的大小变化而变化的布局方式
  • 数据响应式：双向数据绑定

示例：

<div id="app">
	<h3>{{message}}</h3>
	<!-- 动态修改message值，此绑定将不会发生改变 -->
	<div v-once>{{message}}</div>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  const vm = new Vue({
      el: '#app',
      data: {
          message: '你好世界'
      }
  })
</script>

4、v-bind（重点）

**作用：**动态地绑定一个或多个attribute【实现可以允许我们在html内置的属性值中使用变量，主要是给非指令的属性去使用绑定动态可变的数据的】

场景：复用某个数据的时候会使用。例如：飞猪官网

<!-- v-bind：给非指令的属性使用变量 -->
<a v-bind:href="url" v-bind:target="target">{{alt}}</a>

<!-- v-bind的简写形式，实际使用这样的写法 -->
<a :href="url" :target="target">{{alt}}</a>

示例代码

<body>
    <div id="app">
        <a :href="url" :target="type" :alt="alt">{{alt}}</a>
        <a :href="url">{{alt}}</a>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            url: 'https://www.fliggy.com/',
            type: '_blank',
            alt: '飞猪官网'
        }
    })
</script>

5、v-on（重点）

5.1、基本使用

**作用：**绑定事件监听器（事件绑定）

示例：

<!-- 直接执行操作 -->
<!-- 常规写法 -->
<button v-on:click="num++"></button>
<!-- 缩写 -->
<button @click="num++"></button>

<!-- 事件处理函数调用：直接写函数名 -->
<button @click="say"></button>
<!-- 事件处理函数调用：常规调用 -->
<button @click="say('sth')"></button>

如果事件处理函数为自定义函数，则需要先进行定义，定义的方式如下：

...
data: {
    ...
},
methods: {
    functionName: function(arg1,arg2,arg3,...){
        // something to do
    },
    ....
}

注意：事件绑定v-on属性表达式中切记不能直接写业务逻辑，例如@click="alert('123')"。换言之，就咋行内上是不允许使用内置函数的，必须要调用自己定义的函数，然后你可以在自定义的函数内使用内置函数。

事件处理函数传参

<!-- 事件处理函数调用：直接写函数名 -->
<button @click="say"></button>

<!-- 事件处理函数调用：常规调用 -->
<button @click="say('hi',$event)"></button>

在不传递自定义参数的时候，上述两种用法均可以使用；但是如果需要传递自定义参数的话，则需要使用第2种方式。

事件对象的传递与接收注意点

  • 如果事件直接使用函数名并且不写小括号，那么默认会将事件对象作为唯一参数进行传递，可以在定义函数的位置直接定义一个形参，并且在函数内可以使用该形参
  • 如果使用常规的自定义函数调用（只要写了小括号），那么如果需要使用事件对象则必须作为最后一个参数进行传递，且事件对象的名称必须是“$event”

示例代码

<style>
    #big {
        width: 300px;
        height: 300px;
        background-color: red;
    }
    #mid {
        width: 200px;
        height: 200px;
        background-color: green;
    }
    #sma {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<body>
    <div id="app">
        <div id="big" @click="say('大娃',$event)">
            <div id="mid" @click="say('二娃',$event)">
                <div id="sma" @click="say('三娃',$event)"></div>
            </div>
        </div>
    </div>
</body>

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

        },
        methods:{
            say: function(name,event){
                console.log('你点了' + name);
            }
        }
    })
</script>

5.2、事件修饰符

含义：用来处理事件的特定行为（也是vue提供一些语法糖）

使用示例：

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!--  串联修饰符（连贯操作） -->
<button @click.stop.prevent="doThis"></button>

更多事件修饰符请参考官方文档：https://cn.vuejs.org/v2/api/#v-on

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dawa {
            background: red;
            width: 400px;
            height: 400px;
        }
        .erwa {
            background: orange;
            height: 300px;
            width: 300px;
        }
        .sanwa {
            background: yellow;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 套娃行为 -->
        <div class="dawa" @click="call_dawa">
            <div class="erwa" @click.stop="call_erwa">
                <div class="sanwa" @click.stop="call_sanwa">

                </div>
            </div>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {

            },
            methods:{
                call_dawa(){
                    console.log('大娃：收到');
                },
                call_erwa(){
                    console.log('二娃：收到');
                },
                call_sanwa(){
                    console.log('三娃：你说啥');
                }
            }
        })
    </script>
</body>
</html>

5.3、按键修饰符

按键修饰符：按键事件

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

<!-- 只有在 `key` 是 `Enter` 回车键的时候调用 -->
<input @keyup.enter="submit">

<!-- 只有在 `key` 是 `Delete` 回车键的时候调用 -->
<input v-on:keyup.delete="handle">

更多按键修饰符请参考官方文档：https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

6、循环分支指令

6.1、循环指令

作用：根据一组数组或对象的选项列表进行渲染。

**指令：**v-for

  • 数组遍历使用示例：
<!-- 模板部分 -->
<ul>
    <!-- 直接取值 -->
    <li v-for='item in fruits'>{{item}}</li>
    <!-- 带索引 -->
    <li v-for='(item,index) in fruits'>{{item}}{{index}}</li>
</ul>

<!-- JavaScript部分 -->
......
data: {
	fruits: ['apple','pear','banana','orange']
}
......

细节：key的作用，提高性能，不影响显示效果（如果没有id，可以考虑使用索引替代），切记key的值不能重复，只要遵循不重复的原则即可，值是什么无所谓。

key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。

<ul>
    <li :key='item.id' v-for='(item,index) in fruits'>{{item}}</li>
</ul>
  • 对象遍历使用示例（了解）：
<!-- 模板部分 -->
<ul>
    <li v-for='(value,name,index) in obj'>{{value + '-' + name + '-' + index}}</li>
</ul>

<!-- JavaScript部分 -->
......
data: {
	obj: {
		username: 'zhangsan',
		age: 28,
		gender: 'male'
	}
}
......

示例代码：

<body>
    <div id="app">
        <div>
            <ul>
                <li :key="index" v-for="(item,index) in cars">{{item}}</li>
            </ul>
        </div>
        <div>
            <ul>
                <li :key="index" v-for="(item,key,index) in user">{{key}}：{{item}}</li>
            </ul>
        </div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            cars: ['bmw','aodi','benci','haima'],
            user: {
                username: 'zhangsan',
                gender: 'mele',//性别，sex
                age: 22
            }
        }
    })
</script>

6.2、分支指令

作用：根据表达式的布尔值(true/false)进行判断是否渲染/显示该元素

  • v-if
  • v-else
  • v-else-if

上述三个指令是分支中最常见的。根据需求，v-if可以单独使用，也可以配合v-else一起使用，也可以配合v-else-if和v-else一起使用。

  • v-show

v-show是根据表达式之真假值，切换元素的 display CSS属性（是根据表达式的布尔值来判断是否显示该元素）。

使用示例：

<!-- 模板部分 -->
<div v-if="score >= 90">
  优秀
</div>
<div v-else-if="score >= 80 && score < 90">
  良好
</div>
<div v-else-if="score >= 70 && score < 80">
  一般
</div>
<div v-else>
  不及格
</div>
<!-- v-show -->
<div v-show='flag'>测试v-show</div>

<!-- JavaScript部分 -->
......
data: {
	score: 88,
	flag:false
}
......

思考：v-if系列与v-show的区别是什么？

v-if：控制元素是否渲染

v-show：控制元素是否显示（已经渲染，display:none;）

v-if系列指令、v-show指令可以与v-for指令结合起来使用（循环+分支）。例如：

<ul>
    <li v-for='(v,k,i) in obj' v-show='v==25'>{{v}}</li>
</ul>

面试题：v-for与v-if谁的优先级高，能否一起使用？

答：v-for优先级高于v-if，虽然可以一起使用但是不建议一起使用。因为v-for的优先级大于v-if，在循环元素时，每个元素都要进行v-if判断，但是最终显示的元素太少造成资源浪费，所以不建议一起使用。在需要v-for与v-if一起使用时可以用v-show代替v-if。

7、综合案例：简易购物车

案例效果

简易购物车案例效果

细节：

  • 展示基本的商品信息
  • 计算每个商品的小计
  • 商品数量的加、减操作
    • +：增加商品数量，同时更新小计
    • -：减少商品熟练，同时更新小计，如果本身为“1”，再点-号则需要移除商品

如果需要在Vue实例中访问自身data属性中的数据，可以使用以下方式：

  • this.xxxxx
  • this.$data.xxxxx
  • this._data.xxxxx

参考数据源

var cartData = [
    {
        id: 1,
        name: '小米',
        price: 100,
        num: 1
    },
    {
        id: 2,
        name: '华为',
        price: 200,
        num: 1
    },
    {
        id: 3,
        name: '联想',
        price: 300,
        num: 1
    }
]

参考核心代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>综合案例：简易购物车</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="" rel="stylesheet" />
</head>

<body>
    <!-- 
        > 细节：
            >
            > - 展示基本的商品信息
            > - 计算每个商品的小计
            > - 商品数量的加、减操作
            >   - +：增加商品数量，同时更新小计
            >   - -：减少商品熟练，同时更新小计，如果本身为“1”，再点-号则需要移除商品

            > 如果需要在Vue实例中访问自身data属性中的数据，可以使用以下方式：
            >
            > - this.xxxxx
            > - this.$data.xxxxx
            > - this._data.xxxxx
     -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in cartData" :key="item.id"> 商品id：{{item.id}}&emsp; 商品名称：{{item.name}}&emsp;
                商品单价：{{item.price}}&emsp; 购买数量： <button @click="reduce(item,index)">-</button> {{item.num}} <button
                    @click="add(item,index)">+</button> &emsp; 商品小计：{{item.price * item.num}} </li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 购物车的数据源
        var cartData = [
            {
                id: 1,
                name: '小米',
                price: 100,
                num: 1
            },
            {
                id: 2,
                name: '华为',
                price: 200,
                num: 1
            },
            {
                id: 3,
                name: '联想',
                price: 300,
                num: 1
            }
        ]
        new Vue({
            el: "#app",
            data: {
                // 声明vue的数据
                cartData
            },
            methods: {
                // -1的操作方法
                reduce(item, index) {
                    if (item.num === 1) {
                        // 如果再-就变0，移除该商品
                        // if(confirm("这么好的商品，确定不要来一个吗？")){
                        //     this.cartData.splice(index, 1)
                        // }
                        // a && b，只有当a为真的时候才会走b，如果a为假，则b不走
                        confirm("这么好的商品，确定不要来一个吗？") && this.cartData.splice(index, 1)
                    } else {
                        // 数量大于1，够减，继续-1
                        item.num--
                    }
                },
                // +1的操作方法
                add(item, index) {
                    // console.log(item, index);
                    // this.cartData[index].num++
                    // 定论：在js中数组/对象其值的传递方式是引用传递
                    item.num++
                    // console.log(this);

                }
            }
        })
    </script>
</body>

</html>

&emsp;表示tab，一个顶四个&nbsp;

8、样式绑定

8.1、class样式绑定

  • 对象语法（用于控制开关切换）【高频】
<style>
/* CSS片段 */
.active {
	color: red;
}
</style>

<!-- HTML片段 -->
<div v-bind:class="{active: isActive}">class样式</div>

<script type='text/javascript'>
// JavaScript片段
data: {
	isActive: true
}
</script>
  • 数组写法【低频】
<style>
/* CSS片段 */
.active {
	color: red;
}
</style>

<!-- HTML片段 -->
<div v-bind:class="[activeClass]">数组写法</div>

<script type='text/javascript'>
// JavaScript片段
data: {
	activeClass: 'active'
}
</script>

8.2、style样式处理

  • 对象语法【高频用法】
<!-- HTML片段 -->
<div:style="{color: redColor, fontSize: '20px'}">对象写法</div>

<script type='text/javascript'>
// JavaScript片段
data: {
	redColor: 'red'
}
</script>
  • 数组语法【基本不用】
<!-- HTML片段 -->
<div v-bind:style="[color, fontSize]">数组写法</div>

<script type='text/javascript'>
// JavaScript片段
data: {
	color: {
		color: 'red'
	},
	fontSize: {
		'font-size': '20px'
	}
}
</script>

9、v-model

作用:：表单元素的绑定，实现了双向数据绑定，通过表单项可以更改数据。

单向与双向数据绑定

v-model会忽略所有表单元素的value、checked、selected特性的初始值,而总是将Vue实例的数据作为数据来源，应该在data选项中声明初始值。

  • 普通文本框上的使用
<div id='app'>
    <p>{{message}}</p>
    <input type='text' v-model='message'>

    <!--
    v-model其实是`语法糖`,它是下面这种写法的简写
    语法糖：这种语法对语言的功能并没有影响，但是更方便程序员使用
    -->
    <input type='text' :value='msg' @input='msg=$event.target.value'/>
</div>

<script type='text/javascript'>
new Vue({
    el: '#app',
    data: {
		msg: 'message默认值'
    }
})
</script>
  • 多行文本框上的使用
<div id='app'>
    <textarea v-model="message"></textarea>
</div>

<script type='text/javascript'>
new Vue({
	el: '#app',
	data: {
		message: '我是多行文本内容'
	}
})
</script>

注意：在多行文本框中使用插值表达式无效（此时，其只能接受数据，不能改变数据）

  • 单个复选框上的使用
<div id='app'>
    <input type="checkbox" v-model="checked">
</div>

<script type='text/javascript'>
new Vue({
	el: '#app',
	data:{
		checked:true
	}
})
</script>
  • 多个复选框上的使用
<div id='app'>
    <input type="checkbox" value="html" v-model="checkedNames">
    <input type="checkbox" value="css" v-model="checkedNames">
    <input type="checkbox" value="js" v-model="checkedNames">
</div>

<script type='text/javascript'>
new Vue({
	el: '#app',
	data:{
    	// 如果数组中有对应的value值，则此checkbox会被选中
		checkedNames:[]
	}
})
</script>

注意：此种用法需要input标签提供value属性，并且需要注意属性的大小写要与数组元素的大小写一致

  • 单选按钮上的使用
<div id='app'>
    男<input type="radio" name="sex" value="男" v-model="sex">
	女<input type="radio" name="sex" value="女" v-model="sex">
</div>

<script type='text/javascript'>
new Vue({
	el: '#app',
	data: {
		sex: '女'
	}
})
</script>
  • 下拉框上的使用
<div id='app'>
    <select v-model="selected">
        <option>请选择</option>
        <option>HTML</option>
        <option>CSS</option>
        <option>JS</option>
    </select>
</div>

<script type='text/javascript'>
new Vue({
	el: '#app',
	data: {
		selected: 'JS'
	}
})
</script>
  • 修饰符

.lazy：默认情况下Vue的数据同步采用input事件，使用.lazy将其修改为失去焦点时触发

.number：自动将用户的输入值转为数值类型（如果能转的话）

.trim：自动过滤用户输入的首尾空白字符

山河远任去来
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue常用的几个指令附完整案例
10-17
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下。感兴趣的朋友跟随小编一起看看吧
vue的基础指令演示代码及简单案例
CHEN的博客笔记
01-10 1584
主要是通过演示不同指令在代码中的使用来增进我们对知识点的理解，该篇文章仅供学习参考
超全vue指令全家桶
qq_48866673的博客
02-23 1001
一篇文章搞懂vue2和3中所有的指令常用
举例详解：VUE常用指令
Gobiggerr的博客
12-03 720
VUE常用指令 一、v-model
Vue常用指令+用法举例 详解
m0_69287579的博客
08-18 3847
有：v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。可以单独使用，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-if和v-show有同样的效果，不同在于。v-for可用来遍历数组、对象、字符串。
10分钟，从0到1学会Vue内置指令与自定义指令（图文并茂版）
高大志leo的博客
01-17 3815
目录 前言 正文 Vue指令的含义 Vue指令的特点 Vue内置指令 v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-slot v-pre v-cloak v-once v-memo v-is Vue自定义指令 全局自定义指令 注册局部指令 钩子函数 钩子函数参数 前言 Vue指令无论是在面试中还是在工作中，都是高频知识点。因此，学会Vue指令非常有必要，本文
Vue指令综合案例——汽车品牌管理（项目实战）
09-07
包含博主博客【前端知识】【vue学习】中的汽车品牌管理实战项目，实现了1.添加汽车品牌 2.删除汽车品牌 3.搜索品牌,list列表实时变化 html代码如下: 添加品牌id:Name:添加搜索名称关键字:id品牌名称添加时间操作；...
Vue 新指令 v-memo 案例
最新发布
07-12
Vue 新指令 v-memo 案例
vue 指令和过滤器的基本使用(品牌管理案例)
10-16
主要介绍了vue-品牌管理案例-指令和过滤器的相关知识，文中通过代码给大家介绍了过滤器的基本使用,需要的朋友可以参考下
Vue.js 中的 v-cloak 指令及使用详解
10-17
主要介绍了Vue.js 中的 v-cloak 指令及使用详解，通过案例给大家简单介绍了vue中v-cloak的使用，感兴趣的朋友跟随小编一起看看吧
vue内部指令实例，大家快来学习吧
07-22
vue内置指令实例，刚入坑的小伙伴们快来试一下吧。老流氓吴喷
Vue 自定义指令功能完整实例
10-16
主要介绍了Vue 自定义指令功能,结合完整实例形式分析了vue.js自定义指令相关实现与使用操作技巧,需要的朋友可以参考下
自定义Vue组件打包、发布到npm及使用教程
12-12
本文将帮助：将自己写的Vue组件打包到npm进行代码托管，以及正常发布之后如何使用自己的组件。 　　本文讲述的仅仅是最基础的实现，其他复杂的操作需要非常熟悉webpack的相关知识，作者将继续学习。 　　按照大佬文中写的一步步操作，够细心的话基本可以一步到位。下面总结一下发布步骤： 　　1. 利用Vue的脚手架新建一个简易版的Vue项目my-project： 　　vue init webpack-simple my-project -> cd my-project -> npm i -> npm run dev 　　2. 编写组件： 　　src下新建myPlugin文件夹用于存放所以开发的组件
【Vue系列2】—— Vue常用指令和简单案例
路漫漫其修远兮，吾将上下而求索
03-09 256
点赞多大胆，就有多大产！开源促使进步，献给每一位技术使用者和爱好者！ 干货满满，摆好姿势，点赞发车 路漫漫其修远兮，吾将上下而求索 前言 本章节咱们来说一下Vue中常用的指令，不废话直接上干货 v-show 作用 根据表达值的真假，切换元素的显示和隐藏 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script s.
Vue常用指令大全（详解）
m0_69057918的博客
01-12 1431
Vue常用指令说明及使用，通过Vue指令操作本地数据（详解）
Vue内置指令大全
CoderBin的博客
10-04 1912
大家好，我是 CoderBin，太久没碰 Vue 了，搞的连一些最基本的指令写法都有点模糊了，所以这一次就对Vue所有的内置指令进行回顾总结，前面先说明一些常用指令，不常用的放在后面。
VUE小案例——奇妙清单（vue指令综合应用）
weixin_45603043的博客
10-27 391
需求： 运用Vue常用指令编写程序实现美妙清单功能： 列表展示、项目添加、项目删除、项目筛选、项目编辑 涉及到的指令有： v-on v-show v-model v-text v-for <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&lt...
vue 自定义指令的使用案例
03-14 422
参考资料： 1. vue 自定义指令； 2. vue 自定义指令实现 v-loading； 　　v-loading，是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令，项目中也很少需要自己去写自定以指令。碰巧这段时间自己练习了编写组件，完成看看能不能实现一个自定义的这样一个指令。话不多说，上代码： <div class="table" v-l...
动态组件与自定义指令：Vue TabBar案例实现
在Day06的学习中，主要关注了动态组件、插槽和自定义指令的应用，以及一个具体的TabBar案例开发。首先，我们回顾了组件的创建、注册和使用，强调了动态组件的概念，即在一个挂载点上动态地切换不同的组件。在实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值