vue中常见指令

一、视图输出指令    作用:把 model绑定到view

   v-text和v-html  

  •  1. 默认 v-text 是没有闪烁问题的,v-text可以简写为{{}},并且支持逻辑运算
  •  2. v-text会覆盖元素中原本的内容,但是 插值表达式 1这种,只会替换自己的这个占位符,不会把 整个元素的内容清空 
  •  3. 默认 v-html 覆盖内部内容, 输出HTML

   v-text  实例

这个将不会随msg属性的改变而改变: {{ msg }}

   v-html  实例

二、属性绑定指令   作用:把model动态绑定view

  v-bind :是 Vue中,提供的用于绑定属性(title)的指令

  • 1. 直接使用指令v-bind

  • 2. 使用简化指令  :

  • 3. 在绑定的时候,拼接绑定内容:

    :title="btnTitle + ', 这是追加的内容'"

    实用实例

  • 通常,我们会传给v-bind一个对象,这样我们可以动态地切换一些属性值,比如绑定Class或者Style,像这样:

    // isBlue是布尔值,blue类是否存在取决于isBlue是否为真
    
    // thisFont是变量,字体大小随thisFont而变化
    // 当然如果属性多的话,可以这样写
    // JS data () { return { styleBox: { fontSize: 20px, color: #ccc, ... } } }

    三、事件绑定指令   作用:把model动态绑定onclick

  •  事件绑定机制,除了可以绑定click还可以绑定其他事件

  • 简写:@ 

  • 绑定控件事件到vm

  • + .stop       阻止冒泡   
    + .prevent    阻止默认事件
    + .capture    添加事件侦听器时使用事件捕获模式
    + .self       只当事件在该元素本身(比如不是子元素)触发时触发回调
    + .once       事件只触发一次

  • 实例

	    
	    
有问题,先去百度
有问题,先去百度

四、v-model    作用:双向绑定,不再单纯 绑定到view,view的值改变同样会作用于model

  •         唯一双向绑定指令
  •         注意: v-model 只能运用在 表单元素中   input(radio, text, address, email....)   select    checkbox   textarea
    1. HTML 代码结构
    
    
    	      
    2. Vue实例代码: // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, result: 0, opt: '0' }, methods: { getResult() { switch (this.opt) { case '0': this.result = parseInt(this.n1) + parseInt(this.n2); break; case '1': this.result = parseInt(this.n1) - parseInt(this.n2); break; case '2': this.result = parseInt(this.n1) * parseInt(this.n2); break; case '3': this.result = parseInt(this.n1) / parseInt(this.n2); break; } } } });

    五、v-for和key属性

  • 迭代数组-普通数组-对象数组
  • 索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}

    Id:{{ user.id }} --- 名字:{{ user.name }} --- 索引:{{i}}

  • 迭代对象中的属性

值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}
  • 迭代数字---count从1开始

这是第 {{i}} 个P标签

  • 2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。

六、v-ifv-show

一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。 

你可能感兴趣的:(vue)