1,差值表达式{{}}

 <p >{{ msg }}</p>

2、v-cloak解决差值表达式闪烁的问题  

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

3、v-text是没有闪烁问题的。

 <h4 v-text="msg"></h4>//注意:v-text会覆盖元素中的原本的内容,差值表达式只会替换自己的这个占位符
<h4 v-text="msg">=======</h4>//等于号将会被替换掉

4、 v-html也会覆盖元素原本的内容,但是可以解析出HTMl标签。

5、 v-bind: 是Vue中提供的用于绑定属性的指令。

简写形式为 :只能实现数据的单项绑定,由M 自动绑定到 V中。无法实现数据的双向绑定。

<input type="button" value="按钮" v-bind:title="mytitle">//这里的mytitle是一个在data里面定义的一个变量

6、v-on是事件绑定机制。简写形式为@

<input type="button" value="按钮" v-on:click="show">//show是在new Vue里面的methods属性中的可用的方法,事件处理函数

7、v-model是唯一的实现数据双向绑定。

表单元素可以和用户进行交互。该指令可实现 表单元素和 Model中数据的双向绑定。但是仅限于表单元素input(radio/text/addresss/email) select checkbox textarea

8、v-if和v-show的区别

v-if每次都会重新删除或创建元素。具有较高的切换性能的消耗。

v-show每次不会重新进行Dom的删除和创建操作,只是切换了元素的display:none样式,具有较高的初始渲染消耗

9、v-for可以做一些循环操作。

1循环普通数组:要先写每一项item,再写索引i

<p v-for="(item,i) in list1">索引:{{i}}----每一项:{{item}}</p>

其中普通数组是定义在data上的list1如下

list1: [1,2,3,4,5]

2循环对象数组

<p v-for = "(item,i) in list2">ID: {{item.id}}---名字:{{item.name }}---索引:{{i}}</p>

其中,list2是定义在data上的对象数组

list2: [
{ id:1, name: 'zs1'},
{ id:2, name: 'za2'},
{ id:3, name: 'zs3'}
],

3循环对象

<p v-for = "(val, key, i) in user">值是:{{val}}---键是--{{key}}--索引是:{{i}}</p>
user:{
id:1,
name:'托尼*屎大颗',
gender: '男'
}

4迭代数字

<p v-for = "count in 10 ">这是第 {{ count }} 次循环</p>

注意:在v-for循环的时候,应该尽量指定key属性,且只能使用number或者string类的,例如下面的事例中,给ID框和Name文本框写入数据之后实现页面的同步。

例子:添加Name和ID

#app部分为如下:

1,页面上的数据是由用户输入的,因此需要v-model双向数据绑定。v-model的作用是,1,将用户输入的数据同步到data中2,同步到data中的数据(使用)通过methods中的业务逻辑同步到页面上。

<div id="app">
<div>
<label >ID:
<input type="text" v-model = "id">
</label>
<label >Name:
<input type="text" v-model = "name">
</label>
<input type="button" value="添加"@click="add">
</div>
<p v-for = "item in list":key="item.id"><input type="checkbox">{{item.id}}---{{item.name}}</p>
</div>

vm是一个新的事例。el 是指定的要控制的区域。 data 是个对象,指定了控制的区域里面要用到的数据。methods 虽然带个s后缀,但是是个对象,可以自定义方法。 在vm实例中,如果要访问 data 上的数据,或者要访问methods中的方法,必须带上this。

var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{ id:1, name:'刘亦菲'},
{ id:2, name:'刘昊然'},
{ id:3, name:'柳岩'},
{ id:4, name:'刘德华'}
] },
methods:{
add(){
this.list.unshift({id:this.id,name:this.name})
}
}
})

vue中常见的指令的更多相关文章

  1. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  2. Vue中v-on的指令以及一些其他指令

    1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button&qu ...

  3. 在vue中创建自定义指令

    原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...

  4. Vue中常见参数传递方式

    文章内容:这里只有vue中父子组件传参.路由间的传参 (另外还有vuex.储存本地.中央bus等方式) 一.父子组件 1.1父传子(props) <!-- 父组件father.vue --> ...

  5. vue中常见的问题以及解决方法

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访 ...

  6. 在Vue中通过自定义指令获取元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Eleme ...

  7. vue中常用的指令

    1. v-textv-text主要用来更新textContent,可以等同于JS的text属性. <span v-text="msg"></span> 2. ...

  8. Vue中的v-bind指令

    普通: property="value" 此时 value为字符串 v-bind指令 v-bind:property="value" 此时 value会被解析成 ...

  9. vue中的v-cloak指令

    v-cloak不需要表达式,它会在vue实例结束编译时从绑定的html元素上移除,经常和display:none;配合使用: <div id="app" v-cloak> ...

随机推荐

  1. pm2使用 node 进程管理

    1.问题 使用阿里云服务器时遇到一个问题,就是只能开一个命令窗口,加入运行node服务,只能起一个服务,不能启多个服务.pm2可以解决这个问题. 2.pm2简介 官网:https://pm2.keym ...

  2. 工具系列 | Docker基本概念

    1.什么是docker? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化. ...

  3. vmware vsphere各版本差别,及各套件差别

    最近要开始全面支持虚拟化了,客户私有云环境用的多的为vmware vsphere,特地恶补下vmware vsphere的各个差别. 首先是vSphere,ESXi和vCenter 的区别. ESXi ...

  4. sigmoid与softmax 二分类、多分类的使用

    二分类下,sigmoid.softmax两者的数学公式是等价的,理论上应该是一样的,但实际使用的时候还是sigmoid好 https://www.zhihu.com/question/29524708 ...

  5. Linux内核链表——看这一篇文章就够了

    本文从最基本的内核链表出发,引出初始化INIT_LIST_HEAD函数,然后介绍list_add,通过改变链表位置的问题引出list_for_each函数,然后为了获取容器结构地址,引出offseto ...

  6. Eclipse 修改(重定向)SVN地址

    由于SVN服务器IP变了,需要重定向SVN的路径 1.点击右上角1位置的按钮,然后选择需要打开的窗口(SVN资源库) 2.右击SVN资源库中的项目,选择重定向,然后修改新的URL即可 1. 进入本地s ...

  7. 重温RabbitMQ

    RabbitMQ是用Erlang语言实现的,它有几个概念broker:消息队列服务器实体exchange:消息交换机,它指定消息按什么规则,路由到哪个队列queue:消息队列,每个消息都会被投入到一个 ...

  8. cent os 部署blade

    一:安装docker 二:安装docker-compose 三:安装Harbor 四:配置Harbor使用https和2376端口 在/etc/docker 目录下面创建文件:create_tls_c ...

  9. XT交易所Websocket API

    WebSocketAPI xt为用户提供了一个简单的而又强大的API,旨在帮助用户快速高效的将xt交易功能整合到自己应用当中. WebSocket服务地址 xt WebSocket服务连接地址:wss ...

  10. SonarQube - 安装与运行SonarQube

    1 - 下载SonarQube SonarQube有多个版本,其中CE(Community Edition)版本免费开源,其余的开发者版本.企业版本和数据中心版本都是收费版本. 官网下载:https: ...