文档章节

Vue内置指令的使用

凌兮洛
 凌兮洛
发布于 09/19 14:06
字数 1155
阅读 10
收藏 0

v-model(数据绑定)

v-model常用于表单数据的双向绑定,它本质上是一个语法糖。它主要的有两种应用:

  • 在文本框、多行文本、input的下拉框、单选按钮、复选框中的应用
      <div id="app">
      	<input v-model="test">
      	<!-- <input :value="test" @input="test= $event.target.value"> -->
      	<!--语法糖-->
      	<p>{{ test}}</p>
      </div>
      <script>
      	new Vue({
      		el: '#app',
      		data: {
      			test: '欢迎来到侠课岛'
      		}
      	});
      </script>
    
    下拉框:
        <div id="app">
        	<select v-model="selected">
        		<option value="设计">Phtotshop</option>
        		<option value="编程">programming</option>
        		<option value="插画">Illustration</option>
        	</select>
        	<span>Selected: {{ selected }}</span>
        </div>
        <script>
        	new Vue({
        		el: '#app',
        		data: {
        			selected: ''
        		}
        	});
        </script>
    
    单选按钮:
        <div id="app">
        	<input type="radio" id="man" value="男" v-model="picked">
        	<label for="man">男</label>
        	<br>
        	<input type="radio" id="woman" value="女" v-model="picked">
        	<label for="woman">女</label>
        	<br>
        	<input type="radio" id="other" value="其他" v-model="picked">
        	<label for="other">其他</label>
        	<br>
        	<span>Picked: {{ picked }}</span>
        </div>
        <script>
        	new Vue({
        		el: '#app',
        		data: {
        			picked: ''
        		}
        	})
        </script>
    
    复选框:
        <div id="app">
        	<input type="checkbox" id="one" value="课程一e" v-model.lazy="checkedNames">
        	<label for="one">选项一</label>
        	<input type="checkbox" id="two" value="课程二" v-model.lazy="checkedNames">
        	<label for="two">选项二</label>
        	<input type="checkbox" id="three" value="课程三" v-model.lazy="checkedNames">
        	<label for="three">选项三</label>
        	<br>
        	<span>Checked names: {{ checkedNames }}</span>
        </div>
        <script>
        	new Vue({
        		el: '#app',
        		data: {
        			checkedNames: []
        		}
        	})
        </script>
    
  • 也可以和.lazy、.trim、.number这些修饰符一起使用 .lazy
      <input v-model.lazy="test" >
    
    .number,自动将用户的输入值转为数值类型
      <input v-model.number="test" type="number">
    
    .trim,自动过滤用户输入的首尾空白字符
      <input v-model.trim="test" >
    

v-for(循环)

格式: v-for=“字段名 in(of) 数组 or json

    <div id="main">
        <p>{{ message }}</p>
        <ul>
          <li v-for="(item,index) in fruit">{{ item }} {{ index }}</li>
        </ul>
    </div>
    <script>
        new Vue({
          el: '#main',
          data: {
            message: 'Welcome XKD!',
            fruit: [
              'Apple',
              'Grape',
              'Pitaya',
              'Banana',
              'watermelon',
              'Pomegranate'
            ]
          }
        })
    </script>

v-show 和 v-if(显示与隐藏)、v-else-if、v-else

v-show 通过值来判断是否加载并显示;

v-if 通过值来判断是否加载;

v-else-if ,充当 v-if 的“else-if 块”,可以连续使用;

v-else ,表示 v-if 的“else 块” ,必须连用,否则无效不会识别。

v-show 和 v-if两者区别在于:

  • v-if 控制元素隐藏的时候,它会删除dom节点,而v-show并不会,v-if还可以和v-else-if 和 v-else,这两者是必须和v-if连用,不能单独使用。
  • 一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。 如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

v-show:

    <div v-show="isShow">我只是用来控制 display 的属性值</div>
    
    <script>
    	var vm = new Vue({
    		el: "#main",
    		data: {
    			isShow: true
    		}
    	});
    </script>

v-if:

    <div id="main">
    	<div v-if="isShow">显示或隐藏</div>
    </div>
    <script>
    	var vm = new Vue({
    		el: "#main",
    		data: {
    			isShow: fasle
    		}
    	});
    </script>

v-else-if:

    <div v-if="type === 'A'">程序员</div>
    <div v-else-if="type === 'B'">设计师</div>
    <div v-else-if="type === 'C'">运营者</div>
    <div v-else>互联网工作人</div>
    
    <script>
    	var vm = new Vue({
    		el: "#main",
    		data: {
    			type: 'A'
    		}
    	});
    </script>

v-else:

    <div v-if="isTrue">侠课岛</div>
    <div v-else>还是侠课岛</div>
    
    <script>
    	var vm = new Vue({
            el: '#main',
            data: {
                isTrue: true
            }
    	})
    </script>

v-bind(动态绑定)

及时对页面的数据进行更新修改。

  • v-bind:id 简写为 :id
  • v-bind:disabled 简写为 :disabled
  • v-bind:href 简写为 :href
  • v-on:click 简写为 @ click

v-on(绑定事件)

指令绑定事件后,就会监听相应的事件。

v-on:click:

    <div id="main">
        <h3>已点击 {{count}} 次</h3>
        <button @click="count++">Click Me!</button>
    </div>
    <script>
        var vm = new Vue({
          el: '#main',
          data: {
            count: 0
          }
        });
    </script>

v-on:keyup:先显示值,再弹出层

    <div id="main">
    	<input v-on:keyup.13="keyup" type="text">
    </div>
    <script>
        var vm = new Vue({
          el: '#main',
          data: {
          },
          methods: {
            // enterClick: function () {
            //   console.log("enterClick");
            // }
            keyup(e) {
              alert(JSON.stringify(e));
            }
          }
    	});
    </script>

v-on:keydown:在框中输入先弹出层,再显示输入的值

    <div id="main">
    	<input v-on:keydown="keydown">
    </div>
    <script>
        var vm = new Vue({
          el: '#main',
          data: {
          },
          methods: {
            keydown(e) {
              alert(JSON.stringify(e));
            }
          }
    	});
    </script>

v-text 和 v-html(解析文本)

v-text:

    <span v-text="dangerHTML"></span>
    
    dangerHTML: '<span onclick="alert(123)">123</span>'

不管是什么,全都解析成文本,里面的HTML标签也全部转义掉:

v-html:

    <span v-html="dangerHTML"></span>
    
    dangerHTML: '<span onclick="alert(123)">123</span>'

v-bind:class

  • 对象:{ red:ifAbledRed }
  • 三目运算符:ifAbledRed ? "red" : "blue"
  • 数组:[{red:"ifAbledRed"},{blue:"ifAbledBlue"}]

v-once

只渲染一次,不再进行渲染。

 <p v-once>{{ message }}</p>

v-cloak(防止闪烁)

v-cloak一般是配合 [v-cloak] {display: none; }css 一起使用的。

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

下面是一个闪烁的截图代码,当我们给如下红色代码块外加一个setTimeout时间延迟时,然后再去执行我们会发现在网页上什么都没有,会有一个时间的停留,因此提供了一个v-cloak的方法来解决这个问题。

v-pre

原位输出标签内部的元素。

© 著作权归作者所有

凌兮洛
粉丝 2
博文 73
码字总数 76312
作品 0
长沙
私信 提问
Vue 与Angular、React框架的对比,你会学哪个?

首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。 View通过Controller来和M...

阿K1225
2018/10/29
170
0
vue.js快速入门。

什么是Vue.js   Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。   Vue.js的目标是通过尽可...

笔阁
2015/12/23
10.2K
2
深入剖析Vue源码 - 选项合并(下)

上一节深入剖析Vue源码 - 选项合并(上)的末尾,我们介绍了Vue中处理合并选项的思路,概括起来主要有两点,一是当选项存在定义好的默认配置策略时,优先选择默认配置策略,并且根据不同的配置...

不做祖国的韭菜
03/20
0
0
Vue 入门之项目目录结构介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

code_xzh
2018/05/20
0
0
Vue.js入门之工程目录介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

异步社区
2018/05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一、docker 入坑(win10和Ubuntu 安装)

前言 终究还是绕不过去了,要学的知识真的是太多了,好在我们还有时间,docker 之前只闻其声,不曾真正的接触过,现在docker 越来越火,很多公司也都开始使用了。所以对于我们程序员而言,又...

quellanan2
12分钟前
4
0
AutoCompleteTextView

小技巧按菜单键 当菜单打开之前会调用onMenuOpened(int featereId,Menu menu),可以重写这个方法,弹出对话框或者Popmenu 再布局中添加控件AutoCompleteTextView. <AutoCompleteTextVie...

逆天游云
16分钟前
4
0
谷歌软件商店:推出5美元会员 可用数百个软件

腾讯科技讯,谷歌和苹果是全球两大智能手机操作系统的运营者,两家公司旗下分别拥有占据行业垄断地位的谷歌软件商店和苹果软件商店。据外媒最新消息,手机软件商店的商业模式正在发生一些变化...

linuxCool
38分钟前
3
0
RocketMQ 多副本前置篇:初探raft协议

Raft协议是分布式领域解决一致性的又一著名协议,主要包含Leader选举、日志复制两个部分。 温馨提示: 本文根据raft官方给出的raft动画进行学习,其动画展示地址:http://thesecretlivesofda...

中间件兴趣圈
38分钟前
2
0
elasticsearch 6.8.0 添加认证

1. 修改elasticsearch-6.8.0/config/elasticsearch.yml 最后添加一行:xpack.security.enabled: true 2. 初始化用户和密码 ./bin/elasticsearch-setup-passwords interactive 我这里初始化为......

coord
40分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部