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. 高通qxdm抓取sensor的log【学习笔记】

    高通qxdm抓取sensor的log 打开qxdm,打开设置界面,去掉其他无关的log,打开Log packets .Message packets的SNS的log 之后需要把端口打开,把端口打开之后 ...

  2. 《自然语言理解(Natural Language Understanding)》(2016-03-17)阅读笔记

    原文链接:https://yq.aliyun.com/articles/8301 作者:李永彬 发布时间:2016-03-17 16:37:47 自然语言理解(Natural Language Und ...

  3. java只允许输入数字字母下划线中文

    public static void main(String[] args) { Pattern pattern = Pattern.compile("[_0-9a-z]+"); ...

  4. abd shell的相关命令

    http://adbshell.com/commands/adb-shell-pwd adb shell pwd adb shell rm -rf /sdcard/DCIM/

  5. [转]TrueType字体结构

    TrueType字体通常包含在单个TrueType字体文件中,其文件后缀为.TTF. OpenType字体是以类似于TrueType字体的格式编码的POSTSCRIPT字体.OPENTYPE字体使用. ...

  6. maven安装和应用

    maven安装和应用 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://www.cnblogs.com/xihehua/p/9639045.html https://w ...

  7. 工控随笔_C#连接PLC_之_C#入门_01_配置学习环境

    最近在做一个东西,需要用到通用开发语言开发一个软件来读取PLC的内容,这方面的难点在于解析PLC利用 以太网通讯的通讯协议,而一般的PLC厂商对自己的协议是封闭的,对一般的开发者是不开放的,虽然可以通 ...

  8. QuickSortDemo

    package com.suning.sntcscase.controller.MutiThread; import static jdk.nashorn.internal.objects.Globa ...

  9. 图像拼接(image stitching)

    # OpenCV中stitching的使用 OpenCV提供了高级别的函数封装在Stitcher类中,使用很方便,不用考虑太多的细节. 低级别函数封装在detail命名空间中,展示了OpenCV算法实 ...

  10. 零基础C#网站开发实战教学(全套)最新更新2019-12-16。。。

    这是林枫山自己编写制作的全套Visual Studio 2013 C# 网站开发案例实战教学教程,欢迎下载学习. 下载目录链接如下(如果链接下载不了,请加QQ:714259796获取教程): 网站界面 ...