小白同学非看不可,js常用命令的应用小结

1.数目渲染:v-text、v-html、{{}}

前些天主要复习一下大家最熟识vue指令,想要代码撸得快,就要多看书,多看看官方的文书档案和学习指令,学习编制程序是三个卓绝享受的长河,特别是你不停地去消除难题,获得一项技巧,达成薪俸的上涨。进行Vue的下令烹饪吧。

明日重要复习一下大家最熟谙vue指令,想要代码撸得快,将要多看书,多看看官方的文书档案和上学指令,学习编制程序是一个特别享受的进度,特别是你不停地去化解难点,得到一项本领,实现薪资的情随事迁。举行Vue的吩咐烹饪吧。

vue

三个mvvm框架(库)、和angular类似    相比较轻便上手、小巧

官网  :  vue官网

手册: vue-api

1.1 v-text

  1. v-text :string
     用法:更新成分的textContent,更新部分的textContent,供给选择{{Mustache}}插值
  2. v-html: string
    用法:更新成分的innerHTML;注意:网址动态渲染大肆HTML,轻巧产生XXS攻击
  3. v-show:any 用法:依照表达式真假值,切换成分的 display css 属性 
  4. v-if:any
     用法:表明式的真真假假条件渲染成分。在切换时元素以及它的多寡绑定/组件被灭绝并且重新建立。若是是<template>,并建议它的源委作为基准块。
    条件变化时改指令出发过渡效果。
  5. v-else :没有需求表明式  用法:后面必须用 v-if 也许 v-else-if
  6. v-else-if:any 用法:前边必须用v-if 也许v-else-if  表示v-if的else
    if块。能够链式调用
  7. v-for :Array | Object | number | string
     用法:基于源数据数次渲染成分或然模板块 语法:alias in expression
  8. v-on: 缩写@;:Function |  Inline Statement  参数 $event( required)
    修饰符     
               .stop—调用 event.stopPropagation(),
                .capture –增加事件侦听器时选拔capture形式
                .prevent —调用event.preventDefault()
                .self—只当事件是从着一定键触发时才触发回调
                .{keyCode | keyAlias} —
    只当事件是从特定键触发时才触发回调
                (PS:官方网址是那般说的 
            .self –
    只当事件是从侦听器绑定的因素自个儿触发时才触发回调
    .{keyCode | keyAlias} –
    只当事件是从侦听器绑定的因素本人触发时才触发回调。
            小编这里了然成了
    特定键触发时才触发回调,注意侦听器绑定的元素)
                .native —监听组件根成分的原滋事件
                .once—-只触发叁遍回调
                .left—(2.2.0)只当点击鼠标左键时接触
                .right —(2.2.0)只当点击鼠标右键时接触
                .middle —(2.2.0)只当点击鼠标中键时触发
    用法:绑定事件监听器。事件类型由参数钦定
    亚洲必赢官网 1亚洲必赢官网 2
    9.v-bind:缩写:;类型: any (with argument)  | Object  (without
    argument) 参数:attrOrProp (optional) ;修饰符: .prop
    —被用来绑定DOM 属性;.camel —transform the kebab-case attribute
    name into camelCase .(supported since 2.1.0) 用法: 在绑定 class 和
    style
    脾性时,支持任何品类的值。如目的和数组;在绑定prop时,子组件必须评释prop 
    亚洲必赢官网 3

    亚洲必赢官网 4

    10.v-model :限制<input> <select> components ;
       修饰符:.lazy—取代input 监听change事件
                  .number —输出字符串转为数字
                  .trim—-输入首尾空格

    1. v-pre  用法:跳过这一个因素和它的子成分的编写翻译进程
      12.v-cloak:用法:{v-cloak}
      {display:none}能够遮蔽未编写翻译的Mustach标签直到实例策动完成
      13.v-once :详细
      只好渲染成分和零部件贰回,随后的再一次渲染,元素/组件及其全部的子节点将被视为静态内容并跳过。那足以用来优化创新品质。
      亚洲必赢官网 5

     

  1. v-text :string
     用法:更新元素的textContent,更新部分的textContent,须要使用{{Mustache}}插值
  2. v-html: string
    用法:更新成分的innerHTML;注意:网址动态渲染任性HTML,轻巧产生XXS攻击
  3. 小白同学非看不可,js常用命令的应用小结。v-show:any 用法:依听他们表明式真假值,切换到分的 display css 属性 
  4. v-if:any
     用法:表明式的真假条件渲染成分。在切换时元素以及它的数量绑定/组件被灭绝而且重新建构。假诺是<template>,并建议它的内容作为基准块。
    条件转换时改指令出发过渡效果。
  5. v-else :没有供给表明式  用法:前面必须用 v-if 只怕 v-else-if
  6. v-else-if:any 用法:后面必须用v-if 恐怕v-else-if  表示v-if的else
    if块。可以链式调用
  7. v-for :Array | Object | number | string
     用法:基于源数据多次渲染成分也许模板块 语法:alias in expression
  8. v-on: 缩写@;:Function |  Inline Statement  参数 $event( required)
    修饰符     
               .stop—调用 event.stopPropagation(),
                .capture –增多事件侦听器时利用capture情势
                .prevent —调用event.preventDefault()
                .self—只当事件是从着一定键触发时才触发回调
                .{keyCode | keyAlias} —
    只当事件是从特定键触发时才触发回调
                (PS:官方网站是如此说的 
            .self –
    只当事件是从侦听器绑定的因素自身触发时才触发回调
    .{keyCode | keyAlias} –
    只当事件是从侦听器绑定的因素自个儿触发时才触发回调。
            作者这里精晓成了
    特定键触发时才触发回调,注意侦听器绑定的要素)
                .native —监听组件根成分的原闹事件
                .once—-只触发二次回调
                .left—(2.2.0)只当点击鼠标左键时接触
                .right —(2.2.0)只当点击鼠标右键时接触
                .middle —(2.2.0)只当点击鼠标中键时触发
    用法:绑定事件监听器。事件类型由参数钦命
    亚洲必赢官网 6亚洲必赢官网 7
    9.v-bind:缩写:;类型: any (with argument)  | Object  (without
    argument) 参数:attrOrProp (optional) ;修饰符: .prop
    —被用于绑定DOM 属性;.camel —transform the kebab-case attribute
    name into camelCase .(supported since 2.1.0) 用法: 在绑定 class 和
    style
    个性时,帮忙其余种类的值。如指标和数组;在绑定prop时,子组件必须表明prop 
    亚洲必赢官网 8

    亚洲必赢官网 9

    10.v-model :限制<input> <select> components ;
       修饰符:.lazy—取代input 监听change事件
                  .number —输出字符串转为数字
                  .trim—-输入首尾空格

    1. v-pre  用法:跳过那些因素和它的子成分的编写翻译进程
      12.v-cloak:用法:{v-cloak}
      {display:none}可以掩饰未编写翻译的Mustach标签直到实例策画甘休
      13.v-once :详细
      只好渲染成分和组件一回,随后的双重渲染,元素/组件及其全部的子节点将被视为静态内容并跳过。那足以用来优化立异品质。
      亚洲必赢官网 10

     

vue和angular区别?

vue——简单、易学

指令以 v-xxx

一片html代码协作上json,在new出来vue实例

村办维护项目

符合: 移动端项目,小巧

vue的发展势头很猛,github上start数量一度超越angular

angular——上手难

指令以 ng-xxx

具有属性和方法都挂到$scope身上

angular由google维护

合适: pc端项目

共同点: 不相称低版本IE

详见:更新成分的 textContent。若是要更新部分的 textContent ,须求利用 {{
Mustache }} 插值。

末段谢谢vue官方提供的一声令下:指令

最终谢谢vue官方提供的指令:指令

————————————————————————————– vue雏形

亚洲必赢官网 11

实例:

常用命令:v – *

<div id="app">
 <p v-text="message"></p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      message:'Hello World!'
    }
  });
</script>

v-text

在vue2.0中更推荐写v-text 这种指令 实际不是 {{ data }}的章程
倘诺加载的慢的话 用户会看到花括号

亚洲必赢官网 12

1.2 {{}} 和地方的v-text效果等同

v-html

固然数额中有html代码须求转义的 能够用v-html 恐怕 {{{ data }}}
多个花括号(vue 2.0后不复使用)

亚洲必赢官网 13

亚洲必赢官网,实例:

v-show

基于v-show后的标准化判定 真就呈现 假就掩饰  先渲染出来 更换display的动静

亚洲必赢官网 14

<div id="app">
 <p>{{message}}</p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      message:'Hello World!'
    }
  });
</script>

v-if    v-else   v-else-if

基于表达式的值的真伪条件渲染元素。先不渲染 依照准绳的真真假假来渲染和销毁

亚洲必赢官网 15

亚洲必赢官网 16

1.3 v-html

详见:更新成分的 innerHTML 。注意:内容按一般 HTML 插入 – 不会作为 Vue
模板实行编写翻译 。假使计划利用v-html
组合模板,能够重新思索通过是或不是因而接纳组件来代替。

   v-if 和 v-show的区别

         v-show 的要素始终会被渲染并保留在 DOM
中。v-show是粗略地切换来分的 CSS 属性display。

        v-if
是“真正的”条件渲染,因为它会保险在切换进程中标准块内的风浪监听器和子组件适本地被销毁和重新建立。

     
 v-if也是惰性的:假设在开班渲染时规格为假,则什么也不做——直到条件第叁回形成真时,才会起来渲染条件块。

     
 相比之下,v-show就大致得多——不管初阶标准是怎么着,成分总是会被渲染,而且只是简短地基于
CSS 实行切换。

     
 一般的话,v-if有越来越高的切换费用,而v-show有越来越高的启幕渲染开支。因而,要是急需格外频仍地切换,则应用v-show较好;假若在运营时条
       件不太恐怕退换,则选择v-if较好。

在意:在网址上动态渲染大肆 HTML
是拾分惊险的,因为轻松产生XSS攻击。只在可靠内容上利用v-html,永不用在用户提交的开始和结果上。

v-for

循环数组 有 {{ value }} 和 {{ $index }} 五个参数 第二个是值 第一个是序号

循环对象二种办法 一种有自带的 {{ value }} 值  {{ $index }} 序号  {{ $key
}} 键

                             第二种 就是 v-for = “(k,v,index) in json”

亚洲必赢官网 17

亚洲必赢官网 18

实例:

v-on

缩写:@

参数:event (required)

修饰符:

.stop- 调用event.stopPropagation()。

.prevent- 调用event.preventDefault()。

.capture- 增加风云侦听器时接纳 capture 格局。

.self- 只当事件是从侦听器绑定的成分本人触发时才触发回调。

.{keyCode | key阿里as}- 只当事件是从特定键触发时才触发回调。

.native- 监听组件根成分的原生事件。

.once- 只触发贰遍回调。

.left- (2.2.0) 只当点击鼠标左键时接触。

.right- (2.2.0) 只当点击鼠标右键时接触。

.middle- (2.2.0) 只当点击鼠标中键时触发。

.passive- (2.3.0) 以{ passive: true }方式加上侦听器

用法:

亚洲必赢官网 19

<div id="app">
 <p v-html="message"></p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      message:'<h5>hello vue.js</h5>'
    }
  });
</script>

v-bind

缩写:  :

用法:

动态地绑定三个或二日性状,或三个零件 prop 到表达式。

亚洲必赢官网 20

2.规范化渲染 调整模板隐蔽:v-show
、v-if、v-else

v-model

相似表单成分(input) 双向数据绑定 随表单控件类型分化而各异。表单输入变化
另外值也变    都以随着val()变化 select和radio也是

修饰符:

.lazy- 取代input监听change事件

.number- 输入字符串转为数字

       纵然想活动将用户的输入值转为 Number 类型(假若原值的转变结果为
NaN 则赶回原值),可以加上三个修饰符number给v-model来管理输入值:

.trim-
输入首尾空格过滤

     
 假如要活动过滤用户输入的事由空格,能够增加trim修饰符到v-model上过滤输入:

模板:

{{msg}} 数据更新模板变化

{{*msg}} 数据只绑定一遍  不随着input变化而生成

{{{msg}}} HTML转义输出

亚洲必赢官网 21

2.1 v-show

v-cloak

堤防闪烁有花括号, 一般用在比非常大的段子

亚洲必赢官网 22

用法:遵照表达式之真假值,切换到分的 display CSS
属性。当条件变化时该指令触发过渡效果。

注意: v-show 不支持 <template> 语法

实例:

<div id="app">
 <p v-show="isShow">
  show
 </p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      isShow:true
    }
  });
</script>

2.2 v-if

v-show和v-if轮廓效果一样,分歧的是:v-show的要素会始终渲染并保证在DOM中。

用法:遵照表达式的值的真假条件渲染成分。在切换时成分及它的多少绑定 /
组件被销毁相提并论建。假如成分是 <template> ,

将建议它的开始和结果作为条件块。当准绳变化时该指令触发过渡效果。

实例:

<div id="app">
 <p v-if="isShow">
  show
 </p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      isShow:false
    }
  });
</script>

 2.3 v-else

范围:前一汉子元素必须有 v-if 或 v-else-if

用法:为v-if 或者v-else-if 添加 “else 块”

<div id="app">
 <p v-if="isShow">show</p>
 <p v-else>hide</p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      isShow:true
    }
  });
</script>

2.4 v-else-if

<div id="app">
 <p v-if="type === 'a'">A</p>
 <p v-else-if="type==='b'">B</p>
 <p v-else>C</p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      type:'b',
    }
  });
</script>

3. v-for 渲染循环列表

用法:基于源数据数十次渲染成分或模板块。此命令之值,必须采取一定语法 alias
in expression ,为当前遍历的要素提供别称:

v-for
暗许行为试着不转移全体,而是替换到分。迫使其重新排序的因素,您须求提供贰个key
的超过常规规属性:

实例:

<body>
 <div id="app">
  <ul>
   <li v-for="item in items" :key="item.id">{{item.name}}</li>
  </ul>
 </div>
 <script>
   new Vue({
     el:'#app',
     data: {
      items:[
        {name:'hxl'},
        {name:'zp'},
        {name:'hxlzp'},
      ],
     }
   });
 </script>

4. v-on绑定事件

用法:

绑定事件监听器。事件类型由参数钦命。表明式能够是二个艺术的名字或三个内联语句,若无修饰符也足以总结。

用在日常成分上时,只好监听 原生 DOM
事件。用在自定义成分组件上时,也得以监听子组件触发的自定义事件。

在监听原生 DOM
事件时,方法以事件为独一的参数。即使选取内联语句,语句能够访问叁个$event 属性:

修饰符:

.stop – 调用 event.stopPropagation()。
.prevent – 调用 event.preventDefault()。
.capture – 增多事件侦听器时使用 capture 情势。
.self – 只当事件是从侦听器绑定的因素本人触发时才触发回调。
.{keyCode | keyAlias} –
只当事件是从侦听器绑定的要素本身触发时才触发回调。
.native – listen for a native event on the root element of component.
.once – 触发一遍。
.left – (2.2.0+) only trigger handler for left button mouse events.
.right – (2.2.0+) only trigger handler for right button mouse events.
.middle – (2.2.0+) only trigger handler for middle button mouse
events.
.passive – (2.3.0+) attaches a DOM event with { passive: true }.

实例:

<div id="app">
 <!--方法处理器-->
 <button v-on:click="doSomething">方法处理器</button>
 <!--内联语句-->
 <button v-on:click="doSomething('Vue.js!',$event)">内联语句</button>
 <!--缩写-->
 <button @click="doSomething">缩写</button>
 <!--停止冒泡-->
 <button @click.stop="doSomething">停止冒泡</button>
 <!--阻止默认行为-->
 <button @click.prevent="doSomething">阻止默认行为</button>
 <!--串联修饰符-->
 <button @click.stop.prevent="doSomething">串联修饰符</button>
 <!--键修饰符,键别名-->
 <input @keyup.enter="onEnter" placeholder="回车键" v-model="msg">
 <button v-on:click.once="doSomething">执行一次</button>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
     name:'vue.js',
     msg:''
    },
    //在methods对象中定义方法
    methods:{
      doSomething:function (event) {
        //方法中的this指向Vue实例
        alert(this.name)
      },
      onEnter:function (event) {
        this.msg = '按下了回车键'
      }
    },
  });
</script>

5.v-bind 绑定属性

用法:

动态地绑定一个或两个特色,或三个零部件 prop 到表明式。

在绑定 class 或 style
特性时,帮忙任何类型的值,如数组或对象。能够透过下边包车型大巴教程链接查看实际情况。

在绑定 prop 时,prop
必须在子组件中宣称。能够用修饰符钦命分裂的绑定类型。

从未有过参数时,能够绑定到一个饱含键值对的对象。注意此时 class 和 style
绑定不扶助数组和对象。

修饰符:

.prop – 被用于绑定 DOM 属性。
.camel – (2.1.0+) transform the kebab-case attribute name into
camelCase.
.sync – (2.3.0+) a syntax sugar that expands into a v-on handler for
updating the bound value.

实例:

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

如上所述是小编给我们介绍的Vue.js常用命令的选拔,希望对我们全数支持,假使大家有另外疑问请给自家留言,小编会及时还原大家的。在此也特别感激大家对剧本之家网址的支撑!

您只怕感兴趣的小说:

  • Vue.JS入门教程之自定义指令
  • vue.js指令v-model实现格局
  • Vue.js常用命令汇总(v-if、v-for等)
  • vue.js指令v-for使用及索引获取
  • vue.js通过自定义指令达成多少拉取更新的兑现形式
  • 接纳Vue.js指令完结全选成效
  • Vue.js每一日必学之指令系统与自定义指令
网站地图xml地图