一声令下和模板_02章,入门总计

By admin in 4858美高梅 on 2019年6月29日

正文实例为大家深入分析了vue中el、template、replace的因素,供大家参谋,具体内容如下

指令(是一种特殊的自定义行间属性)

1、指令的义务正是当其表达式的值改换时相应的将一些行为采用到DOM上,在vue中,指令以V-开端

html:

<div id=”demo”>

<span v-bind:customId=”id”> {{message}}</span>   // 渲染

</div>

一声令下和模板_02章,入门总计。js:

let obj={

message:”hello,vue!”,

id:”123″

}

var vm=new Vue({

el:”#demo”,

data:obj

});

2、内置指令

v-on:绑定事件监听器,简写为“@”

v-bind:动态的绑定数据,简写为 “:”

端详查看API….

# vuejs tutorial

生成vue的实例

var vm=new vue({

//这里是采纳  他能够分包数据、模板、挂载成分、方法、生命周期钩子等函数

})

api:

模板

1、html模板(基于DOM的模版,模板都以可深入分析的管事的HTML)

插值 

① 文本插值 {{value}}  — 
替换实例上的属性值,当班值日爆发转移时,插值内容处会自动更新;

② 原生的html:双大括号输出的是文本,不会分析html

html:

<div id=”demo”>

<div v-html=’html’>{{}}</div>

<div>

js:

let  data={

html:”hello,Vue!”

}

new Vue({

el:”#demo”,

data:data

})

③ 属性:使用v-bind实行绑定,能够响应变化

④ 使用javascript表明式:写一句话来表明式 如{{true?‘yes’:‘no’}}、{{1+2}}

2、字符串模板(template字符串)_引入用这种

html:

<div id=”demo”>

<span>{{message}}</span>

</div>

js:

let  data={

message:”我们”

}

var str = ‘<div>hello,{{message }}</div>’  //
新的模版,只可以有三个html标签,可以嵌套,不能够同仁一视

new Vue({

el:”#demo”,

data:data,

template:str       // 权限更加大学一年级部分,会把原先的沙盘内容替换掉

})

留心:只好有四个根节点 ;

          ES6语法中提供二个一级字符串的点子(`:功能键1旁边
)如:`<div>hello,{{message }}</div>`  这种方法得以换行

② 将html结构写在一对script标签中,设置type=“x-template”;

html:

<div id=”demo”>

<span>{{message}}</span>

</div>

<script  type=”x-template” id=”temp”>

<div>hello</div>

</script>

js:

let  data={

message:”我们”

};

new Vue({

el:”#demo”,

data:data,

template:”#temp”

});

瞩目:片段-复用性差

3、模块 – render 函数 (一般用在组件)

render选项对象的习性

createElement(标签名,[数据对象],子元素);

style:

.bg{background: red;}

html:

<div id=”demo”></div>

js:

let obj={}

var vm=new Vue({

el:”#demo”,

data:obj,

render(createElement){

return  createElement(

     “ul”, {    // :{ 对象 }

           class:{bg:true},   // 绑定 class    :{class名:true /
false}    true显示  false 隐藏

          style:{fontSize:”50px”},   // 绑定样式

          attrs:{abc:”mi”},     // 增添行间属性

          domProps:{innerHTML:”<li>作者是什么人</li>”},   //
DOM成分属性(权重高)

          on:{}         // 绑定事件

      },

      [          //子元素

          createElement(“li”,1),

          createElement(“li”,2),

          createElement(“li”,3)

     ]

);

}

});

![vue-logo](img/logo.png)

实例生命周期(在生命周期里this指向调用它的vue实例)

created在实例被创建后调用

created(){

    this.hello();

}

el


vue2.0生命周期:

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

类型: String | HTMLElement | Function

## 搭建案例演示自动刷新景况

模板语法(不行使模板能够运用render函数使用JSX语法)

底层完结上Vue将模板编写翻译成设想DOM渲染函数,在应用状态退换时,vue总结出重新渲染组件的小小代价并选用到DOM上。

先看怎么用

插值:双大括号!!!!!!必须的  数据变动 大括号内的值也随后变动 

<span>{{msg}}</span>

限制: 在组件定义中只好是函数。

创办二个 `package.josn` 文件:

v-once

纵然您想插入一遍接下去大括号内的数量不转移 则增加v-once属性

<span v-once>不改变{{msg}}</span>

详细:

“`bash
npm init -y
“`

v-html

<span>{{msg}}</span>效果和<span
v-html=”msg”></span>一样 ,可是前面一个是将数据变化为纯文本
不是HTML 为了输出HTML 所以使用v-html

为实例提供挂载成分。值能够是 CSS 选拔符,或实际 HTML 成分,或重回 HTML
成分的函数。注意成分只用作挂载点。若是提供了模版则成分被替换,除非
replace 为 false。成分得以用 vm.$el 访问。

安装 `browser-sync`:

v-bind

大括号不可能在HTML属性中运用 要使用v-bind

<span v-bind:id=”msg”></span>

倘使msg为false  移除属性

<span></span>

用在 Vue.extend 中必须是函数值,这样具备实例不会分享成分。

“`bash
# npm install –save-dev browser-sync
# 将 browser-sync 包保存到支付正视中
# 就能够施行 npm install 的时候投入 –production 选项不设置那一个包
npm i -D browser-sync
“`

使用JS表达式

{{msg+1}}

{{msg==true?0:1}}

=

只要在开始化时钦命了那一个选项,实例将随即进入编写翻译进度。不然,须求调用
vm.$mount(),手动初阶编写翻译。

在 package.json 文件中投入以下内容:

指令

带有v-前缀

<div v-if=”msg”>如果msg为true则插入div标签</div>

<div
v-bind:id=”msg”>借使msg为false则移除属性,不然显示</div>

<div v-on:click=”toDo”>点击触发函数</div>

<input v-model=”msg”/>//双向数据绑定

…..等等  vue还帮助自定义指令。前面说。

template

“`json
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“start”: “browser-sync start –server –directory –files
\”code/*.html\””
}
“`

命令缩写

v-bind:href  或然 v-bind:id 能够缩写为 :href  和:id 正是总结前边的
v-bind

v-on:click  缩写为@click=””

类型: String

张开终端,运维开垦预览服务:

测算属性

computed 总括属性会依据data 的值改造

<div>{{getNewMsg}}</div>

new Vue({

      el:’#App’,

      data:{

            msg:’hello’

      },

      computed:{

            getNewMsg:function(){

                        return this.msg.split(”).reverse().join(”);

            } 

      }

})

下面代码总结属性只用到了get,未有set。所以大家能够给和睦三个set

new Vue({

      el:’#App’,

      data:{

            msg:’hello’,

            text:’word’

      },

      computed:{

            all:{

                      get:function(){

                                    return this.msg+this.text;

                       },

                     set:function(val){

                                   return val+this.msg+this.text

                      }

            }

      }

})

然后vm.all=”你好” 会返回 你好 hello word

详细:

“`bash
npm start
“`

函数

methods也得以兑现刚才computed的功力。

<div>{{getNewMsg}}</div>

new Vue({

      el:’#App’,

      data:{

            msg:’hello’

      },

       methods:{

             getNewMsg:function(){

                   return this.msg.split(”).reverse().join(”);

            }

      }

})

实例模板。模板暗许替换挂载成分。假使 replace 选项为
false,模板将插入挂载成分内。二种状态下,挂载成分的剧情都将被忽视,除非模板有内容分发
slot。


computed和methods比较

虽说最后的结果同样,但是总计属性基于缓存重视,唯有在她依据的多少产生转移才会另行总结取值,而methods
每一趟都会再一次总括取值。

如若值以 # 起初,则它用作选项符,将运用相称成分的 innerHTML
作为模板。常用的本事是用 <script type=”x-template”> 包括模板。

## vuejs 介绍

wach方法

用来观望VUE实例上的数目变动

<div>{{msg}}</div>

new Vue({

      el:’#App’,

      data:{

            msg:’hello’,

            text:’word’,

            all:”

      },

      watch:{

            msg:function(){

                  this.all=this.msg+this.text;

            }

      }

})

在意在有的景色下,举个例子如模板包蕴七个一流成分,或只含有普通文书,实例将变为贰个片断实例,管理八个节点而不是一个节点。片断实例的挂载成分上的非流程序调节制指令被忽视。


class与style绑定

<div class=”boxStyle”
 v-bind:class=”{active:isActive}”></div>

纵然isActive为false 则不呈现 active 那一个class,不然反而。

class和v-bind:class能够共同使用。

class援助三目运算符

<div v-bind:class=”active?style01:style02″></div>

内联样式

<div
v-bind:style=”{color:red,fontSize:fontSize+’px’}”></div>

还足以绑定到一个对象上

<div v-bind:style=”obj”></div>

data(){

     return{

            obj:{

                     color:’red’,

                      fontSize:’12px’

            }

     }

}

replace

## 安装

标准渲染

v-if 、 v-else、v-else-if

<div v-if=”msg>0″>大于0</div>

<div v-else-if=”msg==0″>等于0</div>

<div v-else>小于0</div>

还足以行使template

<template v-if=”msg>0″>

          <div>1111</div>

</template>

<template v-else>

        <div>2222</div>

</template>

下边的代码修改msg切换差异的div内容,不过vue是不会重新渲染div标签的。依据就地复用攻略,只是交替div里面包车型大巴内容。如若想每便都再一次渲染div标签。须要动用key,key差异则每一回重复渲染。

类型: Boolean

– Vue.js 不援救 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不可能效仿的
ECMAScript 5 天性

v-if 和 v-show

v-show只是决定display。

v-if有更加高的切换消耗,v-show有越来越高的初阶化消耗。

默认值: true

  • 各种版本的立异日志见:
  • 独立 js 文件
  • 支付版本(未压缩):
  • 生育版本(压缩):
  • CDN:
  • NPM: `npm install vue`
  • Bower: `bower install vue`
  • 兼容 AMD 规范
  • 独自下载版本或通过 Bower 安装的本子已用 UMD 包装,由此它们得以向来当做
    英特尔 模块。

列表渲染

v-for

data(){

     return{

            parents:”我是”,

            msg:[

                    {name:’foo’},

                    {name:’bar’},

             ]

      }

}

<div>

       <div v-for=”{data,index} in msg”>

              {{parents}}-{{index}}-{{data.name}}

       </div>

</div>

渲染结果: 小编是-0-foo  作者是-1-bar

限制: 只可以与 template 选项一同用


事件管理器

使用template的好处

1。通过HTML模板就足以轻便定位JS对应方法

2。无需JS手动绑定事件,易于测量试验

3。当viewmodel销毁 全部的事件管理器自动删除,无需手动删除

<div v-on:click=”msg”>点击</div>

new Vue({

          el:’app’,

          methods:{

          say:function(name,event){

                     alert(name+’我是vue’)

                    if(event){event.preventDefault}

                    }

           }

})

比方要博得原生DOM事件,必要传入event

详细:

## Vue 实例

事件修饰符

.stop 组件单击事件冒泡

.prevent   提交事件不在重载页面

.capture   使用事件捕获方式

.self          只当在本成分才发出

.once       新增

利用办法:

<div v-on:click.stop></div>

修饰符能够串联

<div v-on:click.stop.prevent=”todo”></div>

调整是或不是用模板替换挂载成分。若是设为
true(那是暗许值),模板将掩盖挂载元素,并统一挂载成分和模板根节点的
attributes。如若设为 false
模板将覆盖挂载成分的内容,不会交替挂载元素本人。

– 每一个 Vue.js 应用都以经过构造函数 Vue 创制的

表单控件

v-model 实现双向数据绑定

<span>{{msg}}</span>

<input v-model=”msg”/>

new Vue({

    el:’#app’,

   data:{

          msg:’作者是暗中同意’

   }

})

不论复选框  单选框  下拉列表  
基本上获取到用户选中的值的艺术,正是应用v-model到二个数组

<input type=”checkbox” id=”jack” value=”jack”
v-model=”checkedName”/>

<label for=”jack”>jack</label>

<input type=”checkbox” id=”mini” value=”mini”
v-model=”checkedName”/>

<label for=”mini”>mini</label>

一经用户选中,则数组会把选中指标的value值存入数组中。

示例:

  • 在实例化 Vue
    时,需求传入三个增选老婆,它能够包含数据、模板、挂载成分、方法、生命周期钩子等选择
  • data: 属性数据
  • computed: 总结属性
  • methods: 方法
  • el: 挂载点
  • directives: 自定义指令
  • filters: 自定义过滤器
  • 全数采取可以在 API 文书档案中查阅:

修饰符

.lazy   撤废input事件转为change事件同步

.number   将用户输入的值转为number类型,倘诺回去NAN,则赶回原值

.trim      裁撤前后空格

运用方法:

<input v-model.lazy=”msg”/>

<div id=”replace”
class=”foo”></div>

– 实例选项:data

组件

new Vue({
 el: '#replace',
 template: '<p class="bar">replaced</p>'
})
  • [选项/数据 – data]()
  • [深深响应式原理]()
  • 成效:遵照视图抽象数据模型
  • 小心:视图中采纳的数额必须在 data 中早先化
  • 种种 VUe 实例都会代理其 data 对象里存有的习性
    * 也足以透过 vue 实例的 $data 属性访问 data 中的数据
    * 提议:假诺要接纳 vm 读取或修改 data 中的数据,指出加上 vm.$data
    去做客
  • 唯有被开始代理的习性是响应式的
    * 要是是在实例创设之后增多新的性质到实例上,它不会触发视图更新
  • Vue 不容许在曾经创办的实例上动态增进新的根级响应式属性
  • Vue 不能够检查测试到目的属性的动态增进或删除
  • 也正是说动态增进或删除的靶子属性不是响应式的
  • 假诺指望动态拉长和删除对象的属性是响应式的则需求经过:
    * `Vue.set( object, key, value )`
    * 或 `vm.$set( object, key, value )`
  • 一旦除去对象属性是响应式的:
    * `Vue.delete( object, key )`
    * 或 `vm.$delete( object, key )`

注册全局组件

Vue.component(‘my-component’,{

    //选项

    data:function(){

              //在组件里 data 必须是函数,并且无法使用箭头函数

    }

})

结果:

– 实例选项:methods

挂号局部组件

通过使用组件实例选项注册,能够使组件在另一个零部件中利用

var child={

template:'<div>笔者是组件</div>’

}

new Vue({

          components:{

                    ‘my-components ‘:child

           }

})

<p class=”foo bar”
id=”replace”>replaced</p>

  • 效益:为视图交互提供行为函数
  • 可以在作为函数中通过 `this` 访问 data 中的数据成员
  • 专注:methods 中的行为函数不要写箭头函数
    * 因为如此会退换内部 this 的对准

组件通讯

合计:父组件通讯子组件,使用props。子组件通讯父组件使用自定义事件,通过$on(’事件名称’)监听事件
和 $emit(‘事件名称’) 触发事件。

要是选取vuex,在根组件注册,大家在自由组件中都能够透过$store得到store对象。假若子组件想要获取到父组件的数目,或然说非父子组件想要得到相互的数码,最高效的方法是采取vuex。

唯独,还是要说下主题的props用法。

replace 设为 false:

– 实例属性

props

Vue.components(‘child’,{

          props :[‘msg’],

          template:'<div>{{msg}}</div>’

})

<child msg=”hello”></child>

注意:因为HTML不区分轻重缓急写,所以在传递props时,驼峰写法要透过短横线隔开分离

<div my-props=”hello”></div>

Vue.components(‘child’,{

        props:[‘myProps’],

        template:'<div>{{myProps}}</div>’

})

<div id=”insert”
class=”foo”></div>

  • $data
    * Vue 实例阅览标数目对象。Vue 实例代理了对其 data 对象属性的造访。
  • $el
    * Vue 实例使用的根 DOM 成分

动态props

传递props使用 v-bind,那样父组件修改子组件也取得修改

<div>

        <input  v-model=”msg”/>

        <child v-bind:msg=”msg”></child>

</div>

Vue.components(‘child’,{

              props:[‘msg’],

              template:'<div>{{msg}}</div>’

})

new Vue({
 el: '#insert',
 replace: false,
 template: '<p class="bar">inserted</p>'
})

– 实例方法/数据

字面量语法和动态语法

字面量:<child msg=”1″></child>        props为   “1”

动态语法: <child v-bind:msg=”1″></child>      props为   1

结果:

  • $watch
  • $set Vue.set 的别名
  • $delete Vue.delete 的别名

单向数据流

props是单向绑定的,父组件修改影响子组件,不过不可能扭转,那是为着幸免子组件修改父组件的意况,让数据流难以驾驭。

能够通过Vuex管理state,那样子就防止了累赘的props传递。后边会公布VUEX疏解的稿子,请关怀~

<div id="insert" class="foo">
 <p class="bar">inserted</p>
</div>

props验证

只用于new创设的实例中,创造实例时传递 props。重要成效是便利测量检验。

支撑项目:string  number  boolean  function  object   array

props:{

     msg:Number,//只检验项目

    //检查实验项目+别的注解

    call:{

       type:Number,

        default:0,

        requiredLtrue,

        validator:function(val){

            return val>=0

        }

     }

}

如上便是本文的全部内容,希望对大家的上学抱有援救,也可望我们多多补助脚本之家。

## 模板语法

自定义事件

运用 v-on 绑定事件

父组件在使用子组件的地点平昔用v-on监听子组件触发的事件,
 子组件触发事件会触发父组件事件

子组件中要利用this.$emit(‘事件’,参数)

父组件就足以行使 $on去监听

 比方 在父组件中:

<child
v-on:子组件$emit的事件名称=”父组件事件名称”></child>

您恐怕感兴趣的小说:

  • Vue2
    模板template的四种写法总括
  • Sublime
    Text新建.vue模板并高亮(图像和文字教程)
  • Vue.js学习笔记之常用模板语法详解
  • Vue.js学习记录之在要素与template中使用v-if指令实例
  • vue.js
    template模板的利用(仿饿了么布局)

### 插值

非老爹和儿子组件通讯

动用贰个空的vue实例作为中心事件总栈

var bus=new Vue()

在A组件中触发事件

bus.$emit(‘a’,1);

在B组件成立的钩子中监听事件

bus.$on(‘a’,function(id){

})

#### 文本

slot

在子组件中

<div>

           <h1>笔者是子组件标题</h1>

           <slot>唯有在没分发的从头到尾的经过才展现</slot>

</div>

在父组件中

<div>

      <child>

             <p>这里的从头到尾的经过会交替掉子组件中的slot</p>

     </child>

</div>

渲染结果为

<div>

        <div>

                <h1>作者是子组件标题</h1>

              <p>这里的原委会交替掉子组件中的slot</p>

       </div>

</div>

– 响应插值:

具名slot

给slot添加name属性

在子组件中

<div>

           <h1>小编是子组件标题</h1>

            <slot name=”body”>作者是签名slot</slot>

</div>

在父组件中

<div>

           <child>

                   <div slot=”body”>这里替换掉
name为body的slot</div>

           </child>

</div>

  • `<span>Message: {{ msg }}</span>`
  • 细心: Mustache 语法不能够在 HTML 属性中央银行使,应使用 `v-bind` 指令
  • 贰遍性插值:
  • `<span v-once>This will never change: {{ msg
    }}</span>`
  • 留神:会潜移默化该节点及里面节点有所的绑定

Render函数

不想利用template,也足以用render写JSX。举例依照剖断自动生成DOM结构,要是大度的剖断用template会有恢宏的代码,那时候可以用render,使用createElement去创制标签。

此间只写个小用法。

new Vue({

      el:”#app”,

     render:h=>h(App)

})

假设不应用render大家得以这么

new Vue({

          el:’#app’,

          components:{App},

          template:'<App/>’

})

综上说述JSX能够采用JS的一心编制程序本事。详细:

#### 纯 HTML

自定义指令

不经常大家须求对DOM成分进行底层操作,所以必要自定义事件。

双大括号会将数据悉明为纯文本,而非 HTML 。为了输出真正的 HTML
,你要求选择 v-html 指令:

全局注册

例如说大家创设v-focus

Vue.directive(‘focus’,{

     inserted:function(el){

          el.focus();

     }

})

“`html
<div v-html=”rawHtml”></div>
“`

有的注册

组件接收一个精选

directives:{

         focus:{

                   //钦点的概念

         }

 }

使用:<div v-focus></div>

– 为啥不直接出口 HTML

自定义指令钩子函数

刚刚我们全局定义 用到了 inserted函数,那正是钩子函数。

bind:function(){} //只调用三回,指令第一回绑定到成分时调用。

inserted:function(){} //被绑定成分插入到父节点 调用

update:function(){}  //更新时调用

componentUpdated:function(){}  
//被绑定成分所在模板实现一次立异周期时调用

unbind:function(){}  //指令与成分解绑调用

  • 怎么样是 XSS 攻击:跨站脚本攻击
  • 先天要么后后天补课

钩子函数参数

el:指令绑定的因素对象

binding:七个obj对象,他回顾以下属性:

               name:指令名称

               value:绑定的值

               oldValue:前三个值
只好在update函数和componentUpdate函数中央银行使

               expression:绑定的值是字符串格局 举个例子  v-demo=”1″  为1

               arg: 传给指令的值  v-demo:foo   arg值为foo

               modifiers: 修饰符对象
只可以在update函数和componentUpdate函数中选用

vnode:vue编写翻译生成的杜撰节点

oldVnode:上叁个虚拟节点

#### 属性

混合mixin

var mixin={

            created:function(){

                   this.hello();

             },

            methods:{

                  hello:function(){

                   console.log(“Hello”);

                   }

           }

}

var Component=Vue.extend({

        mixins:[mixin]

})

要是同样的性格,都会被调用,只是混合对象的钩子就要组件本身钩子之前调用

借使 例如 方法的名字同样,就取组件自己的法子

以上正是vue2.0常用的小点,省略了有个别剧情。包含像是vue-router、vuex、编写插件等等。

本篇只是总括基础知识点,希望能帮到你。

**瞩目:Mustache 不能够在 HTML 属性中央银行使,应运用 v-bind 指令:**

-by 麦浪XPEKI

“`html
<div v-bind:id=”dynamicId”></div>
“`

这对布尔值的习性也平价 —— 借使条件被求值为 false 的话该属性会被移除:

“`html
<button
v-bind:disabled=”someDynamicCondition”>Button</button>
“`

#### 使用 JavaScript 表达式

Vue.js 都提供了一心的 JavaScript 表达式帮衬:

“`html
{{ number + 1 }}

{{ ok ? ‘YES’ : ‘NO’ }}

{{ message.split(”).reverse().join(”) }}

<div v-bind:id=”‘list-‘ + id”></div>
“`

那几个表明式会在所属 Vue 实例的数量作用域下作为 JavaScript 被深入分析。
有个限制就是,种种绑定都只能分包单个表明式,所以下边包车型地铁例子都不会一蹴而就:

“`html
<!– 那是言辞,不是表明式 –>
{{ var a = 1 }}

<!– 流动调查整也不会收效,请使用长富表达式 –>
{{ if (ok) { return message } }}
“`

### 指令

### Vue 内置指令

– v-text

  • 和 {{}} 效果是一样
  • 但是 {{}} 会闪烁
  • 杀鸡取卵办法正是接纳 v-text 绑定数据
  • 只要又想用 {{}}} 还亟需防止闪烁
  • 使用 v-cloak 处理
  • v-html
  • 私下认可 {{}} 和 v-text 会把 html 格式字符串原样输出
  • 能够应用 v-html 将 html 格式字符串作为 HTML 渲染到节点中
  • v-show
  • 是否出示和藏身
  • v-if
  • 是否渲染和移除
  • v-else
  • v-if 的 else 块
  • v-else-if
  • 是 v-if 的逻辑块
  • 一样的,也非得紧跟着 v-if
  • v-for
  • 巡回遍历输出
  • v-on
  • DOM 成分的风云绑定
  • 例如:`v-on:click`、`v-on:blur`
  • v-bind
  • 动态绑定 HTML 属性
  • 例如:`v-bind:title`、`v-bind:class`
  • v-model
  • 和表单控件实行双向数据绑定
  • v-pre
  • 不管理内定节点及中间有着节点的 vue 准则
  • 比方说能够用来突显原始的 Mustache 标签
  • 成效:跳过多量从未有过指令的节点能够加速编写翻译速度
  • v-cloak
  • 能够拍卖表达式闪烁的难点
  • v-once
  • 二回性绑定,后续数据的换代不会响应

指令(Directives)是带有 `v-` 前缀的非常性质。
一声令下属性的值预期是纯净 JavaScript 表明式(除了
`v-for`,之后再评论)。指令的天职正是当其表明式的值改换时相应地将有个别行为采纳到
DOM 上。

“`html
<p v-if=”seen”>Now you see me</p>
“`

那边, v-if 指令将基于表明式 seen 的值的真假来移除/插入 <p> 成分。

#### 参数

有的下令能接受贰个“参数”,在指令后以冒号指明。
诸如, v-bind 指令被用来响应地立异 HTML 属性:

“`html
<a v-bind:href=”url”></a>
“`

在这里 `href` 是参数,告知 `v-bind` 指令将该因素的 `href`
属性与表达式 `url` 的值绑定。

另二个例证是 v-on 指令,它用于监听 DOM 事件:

“`html
<a v-on:click=”doSomething”>
“`

在此处参数是监听的平地风波名:`click`。

#### 修饰符

修饰符(Modifiers)是以半角句号 .
指明的例外后缀,用于提议贰个发令应该以异样方式绑定。
诸如,.prevent 修饰符告诉 v-on 指令对于触发的风浪调用
event.preventDefault():

“`html
<div>
<input type=”text” v-on:keyup.enter=”xxx”>
</div>
“`

“`html
<form v-on:submit.prevent=”onSubmit”></form>
<input type=”text” v-on:keyup.enter=”addTodo”>
“`

### 过滤器

> 注意:Vue 2.x 中,过滤器只可以在 mustache 绑定和 v-bind 表明式(从
2.1.0 起先帮助)中采纳,
>
因为过滤器设计目标就是用来文书转变。为了在别的指令中落到实处更复杂的数量转变,你应该利用
**算算属性**。

– Vue.js 允许你自定义过滤器,可被用作一些大面积的文本格式化

  • 过滤器能够用在三个地点:`mustache 插值` 和 `v-bind 表达式`

全局过滤器:

“`js
Vue.filter(‘capitalize’, function (value) {
if (!value) return ”
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
“`

一部分过滤器:

“`js
new Vue({
// …
filters: {
capitalize: function (value) {
if (!value) return ”
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
“`

过滤器使用格式:

“`html
<!– in mustaches –>
{{ message | capitalize }}

<!– in v-bind –>
<div v-bind:id=”rawId | formatId”></div>
“`

过滤器能够串联:

“`html
{{ message | filterA | filterB }}
“`

过滤器是 JavaScript 函数,因而得以接受参数:

“`html
{{ message | filterA(‘arg1’, arg2) }}
“`

此地,字符串 ‘arg1’ 将传给过滤器作为第3个参数,arg2
表明式的值将被求值然后传给过滤器作为第多个参数。

### 缩写

#### v-bind 缩写

“`html
<!– 完整语法 –>
<a v-bind:href=”url”></a>
<!– 缩写 –>
<a :href=”url”></a>
“`

#### v-on 缩写

“`html
<!– 完整语法 –>
<a v-on:click=”doSomething”></a>
<!– 缩写 –>
<a @click=”doSomething”></a>
“`


## 计算属性

模板内的表明式是相当便利的,不过它们其实只用于轻巧的运算。
在模板中归入太多的逻辑会让模板过重且难以保险。比如:

“`html
<div id=”example”>
{{ message.split(”).reverse().join(”) }}
</div>
“`

在这种气象下,模板不再轻巧和明显。
那正是对于任何复杂逻辑,你都应该采纳计算属性的原由。

#### 基础例子:反转字符串

“`js
var vm = new Vue({
el: ‘#example’,
data: {
message: ‘Hello’
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split(”).reverse().join(”)
}
}
})
“`

您能够像绑定普通属性同样在模板中绑定总计属性。
Vue 知道 `vm.reversedMessage` 依赖于 `vm.message` ,
因此当 `vm.message` 爆发转移时,全部信赖于 `vm.reversedMessage`
的绑定也会被再一次计算举办立异。


## Class 与 Style 绑定

在 `v-bind` 用于 `class` 和 `style` 时, Vue.js 特地加强了它。
表达式的结果类型除了 **字符串** 之外,还足以是 **对象** 或
**数组** 。

### 绑定 HTML Class

#### 对象语法

“`html
<div v-bind:class=”{ active: isActive }”></div>

<!– v-bind:class 指令能够与平日的 class 属性共存 –>
<div class=”static”
v-bind:class=”{ active: isActive, ‘text-danger’: hasError }”>
</div>
“`

也能够一直绑定数据里的一个对象:

“`html
<div v-bind:class=”classObject”></div>
<script>
new Vue({
data: {
classObject: {
active: true,
‘text-danger’: false
}
}
})
</script>
“`

#### 数组语法

“`html
<!– 能够把贰个数组传给 v-bind:class ,以利用三个 class 列表 –>
<div v-bind:class=”[activeClass, errorClass]”>

data: {
activeClass: ‘active’,
errorClass: ‘text-danger’
}

<!– 依据条件切换列表中的 class ,可以用安慕希表明式: –>
<div v-bind:class=”[isActive ? activeClass : ”, errorClass]”>

<!– 可以在数组语法中选拔对象语法: –>
<div v-bind:class=”[{ active: isActive }, errorClass]”>
“`

### 绑定内联样式

“`html
<!– CSS 属性名能够用驼峰式(camelCase)或名短横分隔命(kebab-case)
–>
<div v-bind:style=”{ color: activeColor, ‘font-size’: fontSize + ‘px’
}”></div>

data: {
activeColor: ‘red’,
fontSize: 30
}

<!– 直接绑定到一个体制对象 –>
<div v-bind:style=”styleObject”></div>
data: {
styleObject: {
color: ‘red’,
fontSize: ’13px’
}
}

<!– v-bind:style 的数组语法能够将多少个样式对象应用到二个元素上
–>
<div v-bind:style=”[baseStyles, overridingStyles]”>
“`


## 条件渲染

### v-if-else-elseif

“`html
<!– 基本用法 –>
<h1 v-if=”ok”>Yes</h1>

<!–
通过 template 包装多个因素,渲染结果不带有 template
v-else 成分必须紧跟在 v-if 可能 v-else-if
成分的背后——不然它将不会被辨认。
–>
<template v-if=”ok”>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

<!– 使用 v-else 指令来表示 v-if 的“else 块” –>
<div v-if=”Math.random() > 0.5″>
Now you see me
</div>
<div v-else>
Now you don’t
</div>

<!–
v-else-if,顾名思义,充当 v-if 的“else-if 块”。能够链式地采纳频仍:
v-else,,v-else-if 必须紧跟在 v-if 也许 v-else-if 成分之后
–>
<div v-if=”type === ‘A'”>
A
</div>
<div v-else-if=”type === ‘B'”>
B
</div>
<div v-else-if=”type === ‘C'”>
C
</div>
<div v-else>
Not A/B/C
</div>
“`


## 列表渲染


## 事件管理器


## 表单控件绑定


## 组件

组件是 Vue.js 最强劲的意义,组件能够扩充自定义 HTML
成分,封装可选拔代码。

### 组件的命名

– 纵然二个单词就只写二个单词就能够

  • 假使是多少个单词组成的名字
  • 提出选择短横杠的法子
  • 倘诺使用的是驼峰命名
  • 则在 DOM 模板中必须将 驼峰命名的零件名改为短横杠的章程
  • 在 字符串模板中,无论是驼峰依旧短横杠都行

### 组件基础

– 注册全局组件

  • 挂号局地组件
  • 零件的沙盘
  • 组件的 data

#### 注册全局组件:`Vue.component(tagName, options)`

注册:

“`js
Vue.component(‘my-component’, {
template: ‘<div>A custom component!</div>’
})
“`

使用:

“`html
<div id=”example”>
<my-component></my-component>
</div>
“`

渲染为:

“`html
<div id=”example”>
<div>A custom component!</div>
</div>
“`

#### 组件的 template

零件的 template 必须有所四个根节点,不然,模板编写翻译报错。

– 能够是内联模板

  • 可以是 script 标签模板
  • 可以是 .vue 模板

#### 局地注册组件:实例选项的 `components`

毋庸在大局注册每一个组件。
透过动用组件实例选项注册,能够使组件仅在另一个实例/组件的功效域中可用:

“`html
<body>
<div id=”app”>
<!– 渲染为 <div>局地组件</div> –>
<my-component></my-component>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
new Vue({
el: ‘#app’,
components: {
‘my-component’: {
template: ‘<div>局地组件</div>’
}
},
data: {
},
})
</script>
</body>
“`

#### 在 DOM 模板中使用组件注意事项

当使用 DOM 作为模版时(比如,将 `el` 选项挂载到贰个已存在的成分上),
你会晤前遭受 HTML 的部分限量,
因为 Vue 唯有在浏览器分析和条件 HTML 后技术赢得模版内容。
越是像这一个要素 `<ul>` , `<ol>`, `<table>` ,
`<select>` 限制了能被它包裹的因素,
`<option>` 只可以出现在此外成分内部。

在自定义组件中央银行使这个受限制的因素时会导致有的主题材料,比方:

“`html
<table>
<my-row>…</my-row>
</table>
“`

自定义组件 `<my-row>`
被认为是船到江心补漏迟的从头到尾的经过,因而在渲染的时候会产生错误。
变迁的方案是应用特殊的 `is` 属性:

“`html
<table>
<tr is=”my-row”></tr>
</table>
“`

**应该注意,假若您使用来源以下来源之一的字符串模板,那几个限制将不适用:**

– `<script type=”text/x-template”>`

  • JavaScript内联模版字符串
  • `.vue` 组件

因而,推荐应用字符串模板。

#### 组件的 `data` 必须是函数

在组件中,data 必须是函数,上边是荒唐的措施:

“`js
Vue.component(‘my-component’, {
template: ‘<span>{{ message }}</span>’,
data: {
message: ‘hello’
}
})
“`

没有错的不二秘诀:

“`js
data: function () {
return {
message: ‘组件的 data 必须是函数重回一个json字面量对象’
}
}
“`

### 组件通讯

– 使用 prop 传递数据

  • props 命名准则
  • camelCase 和 kebab-case
  • 动态 prop
  • v-bind
  • 字面量语法 vs 动态语法
  • 单向数据流

组件意味着协同职业,平常老爹和儿子组件会是那样的涉及:组件 A
在它的模板中央银行使了组件 B 。
它们之间必然要求相互通讯:

– 父组件要给子组件传递数据

  • 子组件必要将它在那之中发生的事体告知给父组件

然而,在三个地道定义的接口中尽量将老爹和儿子组件解耦是很重点的。
那保险了各类组件能够在相对隔断的条件中书写和清楚,也大幅提升了组件的可维护性和可重用性。

在 Vue.js 中,老爹和儿子组件的关联足以总括为 `props down, events up`:

– 父组件通过 `props` 向下传递数据给子组件

  • 子组件通过 `events` 给父组件发送信息

![img/props-events.png](img/props-events.png)

#### 使用 prop 传递数据

零件实例的功效域是孤立的。
那意味着无法(也不该)在子组件的沙盘内一贯援用父组件的多少。
要让子组件使用父组件的数量,大家需求通过子组件的props选项。

子组件要显式地用 `props` 选项注脚它仰望得到的多寡:

“`js
Vue.component(‘child’, {
// 声明 props
props: [‘message’],
// 就如 data 一样,prop 能够用在模板内
// 一样也能够在 vm 实例中像 “this.message” 那样使用
template: ‘<span>{{ message }}</span>’
})
“`

下一场我们得以这么向它传到一个常备字符串:

“`html
<child message=”hello!”></child>
“`

#### camelCase 和 kabab-case 命名准绳

#### 动态 prop

#### 字面量语法 vs 动态语法

#### 单向数据流

prop 是单向绑定的:

– 当父组件的属性产生变化时,将传输给子组件

  • 子组件动态绑定的 prop,当父组件更新,子组件全体的 prop 都会拿走更新
  • 可是不会反过来
  • 也便是说,在子组件内部修改 prop 数据
    * 子组件内部会响应更新
    * 更新不会传导给父组件
    * 同有的时候间 Vue 会在调控台发出警告
    * 对象和数组除却
    * 假诺 prop 是一个指标或数组,在子组件内部修改它会影响父组件的动静
    * 假如直白给 prop
    中的对象或数组类型数据再一次赋值,父组件也不会赢得更新
  • 这是为了幸免子组件无意间修改了父组件的情事
  • 那会让数据流的走向变得杂乱无章而麻烦驾驭

为啥大家会有修改 prop 中数量的冲动呢?

  1. prop 作为初步值传入后,子组件想要把它当做局地数据来用
  2. prop 作为起头值传入后,由子组件管理成其它数据输出

对于那二种原因,准确的格局是:

  1. 概念二个片段变量,并用 prop 的值伊始化它

“`js
props: [‘initialCounter’],
data: function () {
return {
counter: this.initialCounter
}
}
“`

  1. 概念贰个总计属性,处理 prop 的值并重临

“`js
props: [‘size’],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
“`

#### Prop 验证

小编们可感觉组件的 props 钦命验证规格。
倘使传入的数目不符合标准,Vue 会发出警告。
当组件给其旁人使用时,那就很有用了。

要钦定验证规格,供给使用对象的款型,而不可能用字符串数组:

“`js
Vue.component(‘example’, {
props: {
// 基础项目检验 (`null` 意思是任何项目都足以)
propA: Number,
// 各体系型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字,有暗中认可值
propD: {
type: Number,
default: 100
},
// 数组/对象的暗中认可值应当由二个厂子函数再次来到
propE: {
type: Object,
default: function () {
return { message: ‘hello’ }
}
},
// 自定义表明函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
“`

`type` 能够是底下原生的数据类型:

– String

  • Number
  • Boolean
  • Function
  • Object
  • Array

`type` 也得以是多少个自定义构造器函数(举个例子 Person),
Vue 会使用 `instanceof` 对数码进行检验。

当 prop 验证退步,Vue会在抛出警告 (固然应用的是付出版本)。

### 自定义事件(老爹和儿子通讯)

– 使用 v-on 绑定自定义事件

  • 使用自定义事件的表单输入组件
  • 非老爹和儿子组件通讯

父组件是利用 props 传递数据给子组件,
但假设实组件要把数量传递回去,应该什么做?
那就是自定义事件!

#### 使用 v-on 绑定自定义事件

种种 Vue 实例都完毕了风浪接口:

– 使用 $on(eventName) 监听事件

  • 利用 $emit(eventName) 触发事件

父组件能够在使用子组件的地方平昔动用 `v-on` 监听子组件发射的风浪。
留心:不能利用 `$on` 侦听子组件抛出的事件,而必须在模板里一向利用
`v-on` 绑定。

“`html
<body>
<div id=”app”>
<p>{{ total }}</p>
<child v-on:increment=”incrementTotal”></child>
<child v-on:increment=”incrementTotal”></child>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
Vue.component(‘child’, {
template: `
<div>
<span>{{ counter }}</span>
<button @click=”increment”>increment</button>
</div>`,
data () {
return {
counter: 0
}
},
methods: {
increment () {
this.counter += 1
this.$emit(‘increment’)
}
}
})
new Vue({
el: ‘#app’,
data: {
total: 0
},
methods: {
incrementTotal () {
this.total += 1
}
}
})
</script>
</body>
“`

在本示例中,子组件已经和它外表完全解耦了。
它所做的只是报告本人的内部事件,至于父组件是不是关心则与它无关。

有的时候候,恐怕想要在有些组件的根成分上绑定七个原生事件。
能够应用 `.native` 修饰 `v-on`。例如:

“`html
<my-component
v-on:click.native=”doTheThing”></my-component>
“`

#### 非老爹和儿子组件通讯

突发性两个零部件也供给通讯(非父亲和儿子关系)。
在简要的光景下,能够应用三个空的 Vue 实例作为主旨事件总线:

“`html
<body>
<div id=”app”>
<child-a></child-a>
<child-b></child-b>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
const bus = new Vue()
Vue.component(‘child-a’, {
template: `
<div>
<p>组件 child A</p>
<button @click=”emitDataToB”>发射数量到</button>
</div>
`,
methods: {
emitDataToB() {
// 在组件 A 中经过 $emit 发射 data 事件,组件 B 中的钩子监听了 data
事件
bus.$emit(‘data’, ‘组件a传递过来的数据’)
}
}
})
Vue.component(‘child-b’, {
template: `
<div>
<p>组件 child B</p>
<p>{{ message }}</p>
</div>
`,
created() {
const vm = this
// 在组件 B 的钩中通过 bud 的 $on 监听事件
bus.$on(‘data’, function (data) {
vm.message = data
})
},
data() {
return {
message: ‘hello child b’
}
}
})
new Vue({
el: ‘#app’,
data: {},
})
</script>
</body>
“`

### 使用 Slot 分发内容

– 编写翻译成效域

  • 单个 Slot
  • 具名 Slot
  • 功用域插槽

在行使组件的时候,大家平常要像那样组合它们:

“`html
<app>
<app-header></app-header>
<app-footer></app-footer>
</app>
“`

注意两点:

  1. `<app>` 组件不亮堂它的挂载点会有怎样内容。挂载点的原委是由
    `<app>` 的父组件决定的
  2. `<app>` 组件很也许有它自个儿的沙盘

为了让组件能够组成,大家供给一种方式来混合父组件的从头到尾的经过和子组件自身的模版。
以此进度被誉为 **内容分发**(或 “transclusion”)。

Vue.js 达成了贰个内容分发 API,参照了当下 Web 组件标准草案,
行使非常的 `<slot>` 成分作为土生土养内容的插槽。

#### 编写翻译效用域

#### 单个 Slot

– 若是实组件未有 `<slot>` 插口,不然父组件的剧情会被吐弃

  • 当子组件模板唯有贰个尚无品质的 slot 时
  • 父组件全副内容片段都将插入到 slot 所在的 DOM 地点
  • 并替换掉 slot 标签本身
  • 在 slot 标签中的任何内容都被视为 备用内容
  • 备用内容在子组件的成效域内编写翻译
  • 再者唯有宿主成分为空的时候,备用内容才会被编写翻译彰显出来

示范如下:

“`html
<body>
<div id=”app”>
<bs-panel title=”面板1″>
面板1的内容
</bs-panel>
<bs-panel title=”面板2″>
面板2的内容
</bs-panel>
<bs-panel title=”未有散发内容的面板”>
</bs-panel>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
Vue.component(‘bs-panel’, {
template: `
<div class=”panel panel-default”>
<div class=”panel-heading”>
<h3 class=”panel-title”>{{ title }}</h3>
</div>
<div class=”panel-body”>
<slot>
唯有才未有散发的开始和结果时才会议及展览示
</slot>
</div>
</div>
`,
props: {
title: { type: String, required: true }
}
})
new Vue({
el: ‘#app’,
data: {},
})
</script>
</body>
“`

#### 具名 slot

– 在结合组件时,内容分发 API 是丰裕平价的编写制定

  • `<slot>` 成分能够用八个特有的属性 `name`
    来配置怎么样分发内容
  • 两个 slot 能够有分化的名字。
  • 具名 slot 将相称内容片段中有对应 slot 天性的要素
  • 如故能够有四个无名氏 slot,它是暗中同意 slot
  • 用作找不到卓越的内容片段的备用插槽
  • 借使没有私下认可的 slot,那些找不到插槽的剧情片段将被废弃

“`html
<body>
<div id=”app”>
<app-layout>
<h1 slot=”header”>顶部</h1>
<p>内容段落</p>
<p>内容段落</p>
<p slot=”footer”>尾部新闻</p>
</app-layout>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
Vue.component(‘app-layout’, {
template: `
<div class=”container”>
<header>
<slot name=”header”></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name=”footer”></slot>
</footer>
</div>
`
})
new Vue({
el: ‘#app’,
data: {},
})
</script>
</body>
“`

#### 作用域插槽

– 指标:成效域插槽的目的正是可以将子组件内部的数据传递到表面

  • 在子组件中,在 `slot` 标签上通过品质的措施将 prop 数据传递到表面
  • 在父组件中,通过装有特殊属性 `scope` 的 `<template>`
    元素,表示它是功能域插槽的沙盘
  • `scope` 的值对应多少个权且变量名
  • 该变量接收来自子组件中通过 `slot` 成分属性传递的 prop 数据

示范如下:

“`html
<body>
<div id=”app”>
<child>
<template scope=”props”>
<p>hello from parent</p>
<p>{{ props.text }}</p>
<p>{{ props.message }}</p>
</template>
</child>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
Vue.component(‘child’, {
template: `
<div class=”child”>
<input v-model=”message” />
<slot text=”hello from child” :message=”message”></slot>
</div>
`,
data () {
return {
message: ‘child message’
}
}
})
new Vue({
el: ‘#app’,
data: {
},
})
</script>
</body>
“`

成效域插槽更具代表性的用例是列表组件,允许组件自定义应该怎么渲染列表各式:

“`html
<body>
<div id=”app”>
<my-awesome-list :todos=”todos”>
<template slot=”item” scope=”props”>
<li class=”my-fancy-item”>{{ props.text }}</li>
</template>
</my-awesome-list>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
Vue.component(‘my-awesome-list’, {
props: [‘todos’],
template: `
<ul>
<slot name=”item”
v-for=”item in todos”
:text=”item.title”>
<!– fallback content here –>
</slot>
</ul>
`
})
new Vue({
el: ‘#app’,
data: {
todos: [
{ id: 1, title: ‘吃饭’ },
{ id: 2, title: ‘睡觉’ },
{ id: 3, title: ‘打豆豆’ },
]
},
})
</script>
</body>
“`

### 动态组件

通过保留的 `<component>` 成分,动态的绑定到它的 is 天性,
我们让多少个零部件能够应用同一个挂载点:

简短示例

“`html
<body>
<div id=”app”>
<select v-model=”currentView”>
<option value=”home”>home</option>
<option value=”posts”>posts</option>
<option value=”archive”>archive</option>
</select>
<component v-bind:is=”currentView”></component>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
new Vue({
el: ‘#app’,
data: {
currentView: ‘home’
},
components: {
home: {
template: ‘<div>home</div>’,
},
posts: {
template: ‘<div>posts</div>’,
},
archive: {
template: ‘<div>archive</div>’,
}
}
})
</script>
</body>
“`

登入注册示例:

“`html
<body>
<div id=”app”>
<ul>
<li><a href=”JavaScript:void(0)” @click=”defaultView =
‘register'”>注册</a></li>
<li><a href=”JavaScript:void(0)” @click=”defaultView =
‘login'”>登陆</a></li>
</ul>
<div>
<component :is=”defaultView”></component>
</div>
<hr><hr><hr><hr>
<div>
<!– 能够采用 keep-alive 保持组件状态 –>
<keep-alive>
<component :is=”defaultView”></component>
</keep-alive>
</div>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
new Vue({
el: ‘#app’,
components: {
login: {
template: `
<form action=””>
<div>
<label for=””>用户名</label>
<input type=”text” />
</div>
<div>
<label for=””>密码</label>
<input type=”password” />
</div>
<div>
<input type=”submit” value=”点击登入” />
</div>
</form>
`
},
register: {
template: `
<form action=””>
<div>
<label for=””>用户名</label>
<input type=”text” />
</div>
<div>
<label for=””>密码</label>
<input type=”password” />
</div>
<div>
<label for=””>确认密码</label>
<input type=”password” />
</div>
<div>
<label for=””>验证码</label>
<input type=”password” />
</div>
<div>
<input type=”submit” value=”点击注册” />
</div>
</form>
`
}
},
data: {
defaultView: ‘login’
},
})
</script>
</body>
“`

 

 

 

 

 

 

 


## 使用 Vue 的有个别经验

### 调试 Vue

### 化解表明式闪烁

  1. 将所有 `{{}}` 通过 `v-text` 替换
  2. 4858美高梅,使用 `v-cloak` 解决

率先,在要渲染管理的 DOM 节点上加多一个指令 `v-cloak`:

“`html
<div id=”app” ng-cloak>
{{ message }}
</div>
“`

第二,在 style 中到场贰个性子选取器样式:

“`css
[v-cloak] {
display: none;
}
“`

其三,深入分析试行机制:

  1. 当浏览器深入分析管理到增加了 `v-cloak`
    属性的节点的时候,属性样式被功用上来,也正是说暗中同意这一个容器正是东躲湖南着的
  2. 然后当 Vue 程序解析渲染完HTML模板的时候,自动将容器上的 `v-cloak`
    属性移除

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有