Vue指令学习(v-for、v-cloak、自定义指令...)

最新推荐文章于 2024-07-31 17:57:29 发布

前端薛之谦...

最新推荐文章于 2024-07-31 17:57:29 发布

阅读量1.6k

点赞数 1

分类专栏： vue 文章标签： vue指令 directives v-cload v-for vue自定义指令

本文链接：https://blog.csdn.net/weixin_41105030/article/details/87645238

版权

本文介绍了Vue的基础和指令系统，包括v-bind、v-cloak、v-text、v-html、v-on、v-model、v-for、v-if/v-show/v-else等。还探讨了自定义指令的使用，如全局和局部指令的定义，并通过跑马灯、搜索功能和隔行变色等案例加深理解。最后提供了指令代码整合。

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

Vue是什么?

Vue是一套用于构建用户界面的渐进式的MVVM框架，另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

vue起步

下载vue

git clone https://github.com/vuejs/vue-syntax-highlight

vue实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue指令学习</title>
	<script src="vue.min.js"></script>
</head>
<body>
	<div id="app">
		<h1>{
  {msg}}</h1>
		<input type="text" v-bind:[]>
	</div>
</body>
<script src="vue.min.js"></script>
<script>
	var vm = new Vue({
    
		el:'#app',
		data:{
    
			msg:'一起学习vue指令'
		},
		methods:{
    

		}
	})
</script>
</html>

文章最后有代码和一些案例（隔行变色，搜索功能，文字滚动-跑马灯）代码

v-bind

v-bind 指令可以用于响应式地更新 HTML 特性
将该元素的属性特性与表达式的值绑定。
data数据

data:{
   
			msg:'一起学习vue指令',
			bind1:'使用v-bind指令'
		}

#app容器里面放入

<input type="text" v-bind:value="bind1">

使用v-bind绑定属性，可以简写为一个冒号’:’
app容器

<a :href="url">链接</a>

data数据

url:'https://blog.csdn.net/weixin_41105030'

v-cloak

使用 v-cloak 能够解决插值表达式闪烁的问题

在app容器里面放入

<p>++++++++ {
  { msg }} ----------</p>

结果把我们的插值表达式也显示出来了如下图浏览器刚渲染部分截图（浏览器可以把网速限制以便观察）,然后才会渲染我们的数据
显示插值表达式
接着我们使用v-cloak,在style引入（这样p段落的内容都不会显示，直到插值表达式解析出来，解决了闪烁问题）

<p v-cloak>++++++++ {
  { msg }} ----------</p>

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

v-text和v-html

v-text和v-html 是没有闪烁问题的
会覆盖元素中原本的内容，只会替换自己的占位符，不会把整个元素的内容清空

<div v-text="msg2">122233</div>
<div v-html="msg2">1212112</div>

msg2:'<h2>使用v-html和v-text解析我的区别</h2>'

跟jquery的.html()和.text()一样的解析，v-html会解析html标签

v-on

它用于监听 DOM 事件,可以简写为合法字符@

在id为app的div里面放入

<!-- 完整语法 -->
<button v-on:click='handle'>v-on指令</button>

在methods方法里面放入

handle:function(){
   
				console.log('success')
}

缩写语法

<button @click='handle'>v-on</button>

v-model

v-bind只能实现数据的单向绑定，从model到view
在input后面插入一个p元素

<input type="text" v-bind:value="bind1">
<p>{
  {bind1}}</p>

我们怎么改变input的值，p段落都不变

3. v-model 指令，可以实现数据的双向数据绑定
使用v-model，实现表单元素与model(data)层双向绑定

<p>{
  {bind1}}</p>
<!-- 在p元素放入使用v-model指令的p元素 -->
<input type="text" v-model="bind1">

改变输入框,效果如图

v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

新建一个新的容器(创建vue实例)

<div id="app1">
		<h1>{
  {msg}}</h1>
</div>

var vm1 = new Vue({
   
		el:'#app1',
		data:{
   
			msg: 'v-for循环指令',
			list: [1, 2, 3, 4, 5, 6],
			list1:[
	          {
    id: 1, name: 'zs1' },
	          {
    id: 2, name: 'zs2' },
	          {
    id