威尼斯人线上娱乐

js下载格局及基本概念,入门笔记

25 5月 , 2019  

Vue.js 简介

一.模板语法

# vuejs tutorial

Vue.js 教程

威尼斯人线上娱乐 1

Vue.js(读音 /vjuː/, 类似于 view) 是一套创设用户分界面包车型大巴渐进式框架。
Vue 只关怀视图层, 选取自底向上增量开拓的宏图。
Vue 的目的是由此尽也许轻易的 API 达成响应的数码绑定和组成的视图组件。
Vue 学习起来特别轻巧,本课程基于 Vue 二.壹.八 版本测试。


证实及下载

Vue.js使用文书档案已经写的很齐全和详细了,通过以下地点能够查看:

vue.js假若当成1个库来使用,能够通过上边地址下载:

一.壹Vue.js 使用了依靠 HTML 的沙盘语法,允许开采者评释式地将 DOM
绑定至底层 Vue 实例的数据。全体 Vue.js 的模版都以合法的 HTML
,所以能被遵照规范的浏览器和 HTML 深入分析器深入分析。

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

第一个HelloWord

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
​
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

Vue.js基本概念

大家下载了vue.js后,要求在页面上经过script标签引进vue.js,开拓中能够动用支付版本vue.js,产品上线要换来vue.min.js。

script type=”text/javascript” src=”js/vue.min.js”></script

一.2.在底层的落实上, Vue 将模板编写翻译成虚拟 DOM
渲染函数。结合响应系统,在行使状态改动时, Vue
能够智能地总结出重新渲染组件的微小代价并选择到 DOM 操作上。


Vue.js 安装

Vue代码实例(创立)

<!DOCTYPE html>

 

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">{{ message }}</div>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">


    var vm=new Vue({
        //el属性对应一个标签 当el对象创建后,这个标签内的区域就被Vue对象接管,
        //接下来就可用Vue来做一些为所欲为的事情啦
        el:'#app',
        data : {message:'好湿呀'}
    });
    </script>

2.插值

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

一、独立版本

咱俩得以在 Vue.js 的官英特网直接下载 vue.min.js 并用 <script>
标签引入。
下载 Vue.js

数据与艺术

当壹个 Vue 实例被创建时,它向 Vue
的响应式系统中参预了其data对象中能找到的保有的品质。当那一个属性的值发生变动时,视图将会产生“响应”,即般配更新为新的值。还足以在Vue实例中定义方法,通过艺术来退换实例中data对象中的数据,数据变动了,视图中的数据也改动。

2.1.插文本:

成立八个 `package.josn` 文件:

2、使用 CDN 方法

以下推荐海外相比较牢固的八个CDN,国内还没开采哪一家比较好,近期可能指出下载到本地。
BootCDN(国内) :
https://cdn.bootcss.com/vue/2.2.2/vue.min.js

unpkg:https://unpkg.com/vue/dist/vue.js,
会保持和 npm 公布的风行的本子同样。

cdnjs :
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

BootCDN(国内)

<div id="app"> <p>{{ message }}</p></div>

品尝一下
»
unpkg(推荐)

<div id="app"> <p>{{ message }}</p></div>

品味一下
»
cdnjs

<div id="app"> 
<p>{{ message }}</p>
</div>

品尝一下
»

Vue实例代码(方法)

window.onload = function(){

var vm = new Vue({
    el:'#app',
    data:{message:'hello world!'},
    methods:{
        fnChangeMsg:function(){
            this.message = 'hello Vue.js!';
        }
    }
});

div id=”app”

<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>

/div

  数据绑定最广泛的花样便是使用 “Mustache” 语法(双大括号)的文书插值:

“`bash
npm init -y
“`

3、NPM 方法

由于 npm 安装速度慢,本课程使用了Tmall的镜像及其命令
cnpm,安装使用介绍参照:运用天猫商城 NPM
镜像。

npm 版本需要大于 3.0,如果低于此版本需要升级它:
# 查看版本$ npm -v2.3.0#升级 npmcnpm install npm -g
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
# 最新稳定版$ cnpm install vue

命令行工具
Vue.js 提供四个法定命令行工具,可用来快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

进去项目,安装并运维:

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

注意:Vue.js 不援救 IE捌 及其以下 IE 版本


Vus.js模板语法

模板语法指的是怎么将数据放入html中

数量绑定最布满的方式就是利用“Mustache”语法 (双大括号) 的文本插值,比方:

{{ msg }}

插入的值个中还足以写表达式:

{{ number + 1 }}

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

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

<a v-bind:href=”url”>链接文字

    <span>Message: {{ msg
}}</span>

安装 `browser-sync`:

Vue.js 目录结构

指令

指令 (Directives)
是带有“v-”前缀的奇特性质。指令属性的值预期是单个JavaScript表明式,指令的天职是,当表达式的值改造时,将其发出的相干影响,响应式地功用于DOM。常见的授命有v-bind、v-if、v-on。

<– 遵照ok的布尔值来插入/移除 p成分 –>

<p v-if=”ok”>是不是出示那壹段

 

<– 监听开关的click事件来实行fnChangeMsg方法 –>

<button v-on:click=”fnChangeMsg”>按钮

本身的小boby ,有不懂的,应接下方研商!!!

  通过运用 v-once
指令,你也能推行一遍性地插值,当数码变动时,插值处的内容不会更新

“`bash
# npm install –save-dev browser-sync
# 将 browser-sync 包保存到支付信赖中
# 就足以实行 npm install 的时候插足 –production 选项不安装这么些包
npm i -D browser-sync
“`

目录剖析

目录/文件 说明
build 最终发布的代码存放位置。
config 配置目录,包括端口号等。我们初学可以使用默认的。
dist 打包后发布时文件目录
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件
assets: 放置一些图片,如logo等。
components: 目录里面放了一个组件文件,可以不用。
App.vue: 项目入口文件,我们也可以直接将组建写这里,而不使用 components 目录。
main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或同统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式

在眼下大家张开 应用软件.vue 文件,代码如下(解释在讲解中):
src/APP.vue

<!-- 展示模板 -->
<template>
  <div id="app">
    ![](./assets/logo.png)
    <hello></hello>
  </div>
</template>

<script>
// 导入组件
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<!-- 样式代码 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

接下去大家可以尝试修改下初始化的体系,将 Hello.vue 修改为以下代码:

src/commponents/Hello.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '欢迎来到菜鸟教程!'
    }
  }
}
</script>

    <span v-once>This will never change: {{ msg }}</span>

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

Vue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法,允许开垦者表明式地将 DOM 绑定至底层
Vue 实例的多少。
Vue.js 的大旨是三个同意你利用轻便的沙盘语法来表明式的将数据渲染进 DOM
的系统。
整合响应系统,在使用状态改变时, Vue
能够智能地持筹握算出双重渲染组件的异常的小代价并应用到 DOM 操作上。

2.3.插标签

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

插值

文本
数码绑定最广大的款式就是运用 {{…}}(双大括号)的文本插值:
文件插值

<div id="app">
  <p>{{ message }}</p>
</div>```

###Html
使用 v-html 指令用于输出 html 代码:

v-html 指令
<div id=”app”>
<div v-html=”message”></div>
</div>

<script>
new Vue({
el: ‘#app’,
data: {
message: ‘<h一>新手教程</h一>’
}
})
</script>

###属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
###表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。

JavaScript 表达式
<div id=”app”>
{{5+5}}

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

{{ message.split(”).reverse().join(”) }}
<div v-bind:id=”‘list-‘ + id”>新手教程</div>
</div>

<script>
new Vue({
el: ‘#app’,
data: {
ok: true,
message: ‘RUNOOB’,
id : 1
}
})
</script>

###指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
实例

<div id=”app”>
<p v-if=”seen”>未来您看到本身了</p>
</div>

<script>
new Vue({
el: ‘#app’,
data: {
seen: true
}
})
</script>

###参数
参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
实例

<div id=”app”>
<pre><a v-bind:href=”url”>新手教程</a></pre>
</div>

<script>
new Vue({
el: ‘#app’,
data: {
url:
‘http://www.runoob.com’
}
})
</script>

###修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

<form v-on:submit.prevent=”onSubmit”></form>

###用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定:
字符串反转

<div id=”app”>
<p>{{ message }}</p>
<input v-model=”message”>
</div>

<script>
new Vue({
el: ‘#app’,
data: {
message: ‘Runoob!’
}
})
</script>

###过滤器
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下:

{{ message | capitalize }}

<div v-bind:id=”rawId | formatId”></div>

过滤器函数接受表达式的值作为第一个参数。


###缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:

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

<a :href=”url”></a>

v-on 缩写

js下载格局及基本概念,入门笔记。<a v-on:click=”doSomething”></a>

<a @click=”doSomething”></a>

##Vue 实例

###构造器
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的:

var vm = new Vue({
// 选项
})

###属性与方法
每个 Vue 实例都会代理其 data 对象里所有的属性:

var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原来数据
vm.a = 2
data.a // -> 2
// … 反之同样
data.a = 3
vm.a // -> 3

除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。例如:

var data = { a: 1 }
var vm = new Vue({
el: ‘#example’,
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById(‘example’) // -> true
// $watch 是三个实例方法
vm.$watch(‘a’, function (newVal, oldVal) {
// 这些回调将要 vm.a 更改后调用
})

#Vue.js 条件与循环
###条件判断
v-if
v-else
v-else-if
###显示
v-show
****
#循环语句
循环使用 v-for 指令。
v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表:

v-for 指令
<div id=”app”>
<ol>
<li v-for=”site in sites”>
{{ site.name }}
</li>
</ol>
</div>

<script>
new Vue({
el: ‘#app’,
data: {
sites: [
{ name: ‘Runoob’ },
{ name: ‘Google’ },
{ name: ‘Taobao’ }
]
}
})
</script>

v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据
你也可以提供第二个的参数为键名:

v-for
<div id=”app”>
<ul>
<li v-for=”(value, key) in object”>
{{ key }} : {{ value }}
</li>
</ul>
</div>

第三个参数为索引:

v-for
<div id=”app”>
<ul>
<li v-for=”(value, key, index) in object”>
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>

v-for 迭代整数
v-for 也可以循环整数

<div id=”app”>
<ul>
<li v-for=”n in 10″>
{{ n }}
</li>
</ul>
</div>

****
#Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:

<div id=”app”>
{{ message.split(”).reverse().join(”) }}
</div>

###computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
***
#Vue.js 样式绑定
###Vue.js class
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

###数组语法
我们可以把一个数组传给 v-bind:class ,实例如下:

<div v-bind:class=”[activeClass, errorClass]”></div>

###Vue.js style(内联样式)
1、我们可以在 v-bind:style 直接设置样式:

<div id=”app”>
<div v-bind:style=”{ color: activeColor, fontSize: fontSize + ‘px’
}”>hello</div>
</div>

2、也可以直接绑定到一个样式对象,让模板更清晰:

<div id=”app”> <div
v-bind:style=”styleObject”>hello</div</div>

3、v-bind:style 可以使用数组将多个样式对象应用到一个元素上:

<div id=”app”> <div v-bind:style=”[baseStyles,
overridingStyles]”>hello</div></div>

****
#Vue.js 事件处理器
事件监听可以使用 v-on 指令:

v-on
<div id=”app”>
<button v-on:click=”counter += 1″>增加 1</button>
<p>那个开关被点击了 {{ counter }} 次。</p>
</div>

<script>
new Vue({
el: ‘#app’,
data: {
counter: 0
}
})
</script>

除了直接绑定到一个方法,也可以用内联 JavaScript 语句:

<div id=”app”>
<button v-on:click=”say(‘hi’)”>Say hi</button>
<button v-on:click=”say(‘what’)”>Say what</button>
</div>

<script>
new Vue({
el: ‘#app’,
methods: {
say: function (message) {
alert(message)
}
}
})
</script>

###事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
* .stop
* .prevent
* .capture
* .self
* .once

<a v-on:click.stop=”doThis”></a>

<form v-on:submit.prevent=”onSubmit”></form>

<a v-on:click.stop.prevent=”doThat”></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture=”doThis”>…</div>

<div v-on:click.self=”doThat”>…</div>

<a v-on:click.once=”doThis”></a>“`

  双大括号会将数据他们说明为纯文本,而非 HTML
。为了输出真正的 HTML ,你供给运用 v-html 指令:

开拓终端,运维开拓预览服务:

万事的按钮小名:

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

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

“`bash
npm start
“`

Vue.js 表单

那节大家为大家介绍 Vue.js 表单上的选用。
您能够用 v-model 指令在表单控件成分上创办双向数据绑定。
v-model 会依据控件类型自动采纳正确的措施来更新成分。
输入框
实例中示范了 input 和 textarea 成分中使用 v-model 完毕双向数据绑定:

<div id="app">
  <p>input 元素:</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>

  <p>textarea 元素:</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }
})
</script>

3.属性


修饰符

3.1.v-bind指令

## vuejs 介绍

.lazy

在暗许情形下, v-model 在 input
事件中联手输入框的值与数码,但您可以加多二个修饰符 lazy ,从而转变为在
change 事件中协同:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

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


.number

假若想活动将用户的输入值转为 Number 类型(假设原值的转移结果为 NaN
则赶回原值),能够增加三个修饰符 number 给 v-model 来管理输入值:

<input v-model.number="age" type="number">

这一般很有用,因为在 type=”number” 时 HTML
中输入的值也连续会回去字符串类型。

  那对布尔值的性质也实惠 —— 假使基准被求值为 false
的话该属性会被移除:

## 安装

.trim

要是要自行过滤用户输入的原委空格,能够加上 trim 修饰符到 v-model
上过滤输入:

<input v-model.trim="msg">

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

– Vue.js 不支持 IE八 及其以下版本,因为 Vue.js 使用了 IE八 不可能模拟的
ECMAScript 五 个性

Vue.js 组件

组件(Component)是 Vue.js 最精锐的作用之一。
零件能够扩大 HTML 成分,封装可采纳的代码。
零件系统让大家得以用独立可复用的小组件来营造大型应用,大致任性档案的次序的利用的分界面都足以抽象为多少个零件树:

威尼斯人线上娱乐 2

挂号三个大局组语法格式如下:

Vue.component(tagName, options)

tagName 为组件名,options
为布局选项。注册后,大家得以应用以下措施来调用组件:

<tagName></tagName>

3.2.javaScript的支持

  • 种种版本的更新日志见:
  • 独立 js 文件
  • 付出版本(未压缩):
  • 生产版本(压缩):
  • CDN:
  • NPM: `npm install vue`
  • Bower: `bower install vue`
  • 兼容 AMD 规范
  • 独立下载版本或透过 Bower 安装的本子已用 UMD 包装,由此它们能够直接当做
    英特尔 模块。

Prop

prop 是父组件用来传递数据的叁个自定义属性。
父组件的数码需求通过 props 把数据传给子组件,子组件必要显式地用 props
选项注解 “prop”:


    {{ number + 1 }}


Vue.js 自定义指令

除去默许设置的主干指令( v-model 和 v-show ), Vue
也同意注册自定义指令。
上面我们报了名2个大局指令 v-focus,
该指令的成效是在页面加载时,成分获得大旨:

<div id="app">
    <p>页面载入时,input 元素自动获取焦点:</p>
    <input v-focus>
</div>

<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

 

## Vue 实例

Vue.js 路由

本章节大家将为我们介绍 Vue.js 路由。
Vue.js 路由允许我们由此差别的 U途乐L 访问不相同的源委。
透过 Vue.js 可以完毕多视图的单页Web应用(single page web
application,SPA)。
Vue.js 路由索要载入 vue-router

汉语文书档案地址:vue-router文档。


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

– 各种 Vue.js 应用都以经过构造函数 Vue 创造的

参照他事他说加以考察链接

新手教程
法定文书档案:http://vuejs.org/v2/guide/syntax.html
汉语文书档案:
https://cn.vuejs.org/v2/guide/syntax.html

 

  • 在实例化 Vue
    时,要求传入一个选项对象,它能够包括数据、模板、挂载成分、方法、生命周期钩子等选取
  • data: 属性数据
  • computed: 总计属性
  • methods: 方法
  • el: 挂载点
  • directives: 自定义指令
  • filters: 自定义过滤器
  • 整整选择能够在 API 文书档案中查看:

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

– 实例选项:data

 

  • [选项/数据 – 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 )`

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

– 实例选项:methods

  那么些表明式会在所属 Vue 实例的数目成效域下作为
JavaScript
被分析。有个限制就是,每种绑定都只可以分包单个表达式,所以下边包车型大巴例证都不会生效。(流程序控制制语句不会生效)

  • 职能:为视图交互提供行为函数
  • 能够在行为函数中通过 `this` 访问 data 中的数据成员
  • 注意:methods 中的行为函数不要写箭头函数
    * 因为这么会变动内部 this 的指向

  <!– 那是讲话,不是表明式 –>

– 实例属性

    {{ var a = 1 }}

  • $data
    * Vue 实例观看的数额对象。Vue 实例代理了对其 data 对象属性的拜访。
  • $el
    * Vue 实例使用的根 DOM 成分

 

– 实例方法/数据

  <!– 流动调查整也不会收效,请使用长富表明式
–>

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

    {{ if (ok) { return message } }}


4.指令:

## 模板语法

  指令(Directives)是带有 v- 前缀的特种品质。指令属性的值预期是纯净
JavaScript
表明式(除了 v-for,之后再商量)。指令的天职便是当其表达式的值改动时相应地将有个别行为选拔到
DOM 上。

### 插值

4.1 v-if:

#### 文本

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

– 响应插值:

  这里, v-if 指令将依据公布式 seen 的值的真真假假来移除/插入 <p> 元素。

  • `<span>Message: {{ msg }}</span>`
  • 瞩目: Mustache 语法不可能在 HTML 属性中央银行使,应运用 `v-bind` 指令
  • 一回性插值:
  • `<span v-once>This will never change: {{ msg
    }}</span>`
  • 留意:会影响该节点及里面节点有所的绑定

肆.二.限令的参数:

#### 纯 HTML

  一些指令能接受多少个“参数”,在指令后以冒号指明。比方, v-bind 指令被用来响应地创新HTML 属性

双大括号会将数据他们表达为纯文本,而非 HTML 。为了输出真正的 HTML
,你须求采用 v-html 指令:

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

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

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

– 为何不直接出口 HTML

    <a v-on:click=”doSomething”>

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

  在这里参数是监听的轩然大波名。我们也会更详细地商量事件管理。

#### 属性

4.三.修饰符:修饰符(Modifiers)是以半角句号 . 指明的独具匠心后缀,用于提议二个指令应该以独特措施绑定。

**注意:Mustache 不能在 HTML 属性中应用,应利用 v-bind 指令:**

  .prevent 修饰符告诉 v-on 指令对于触发的轩然大波调用 event.preventDefault()

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

  <form v-on:submit.prevent=”onSubmit”></form>

这对布尔值的属性也使得 —— 假设基准被求值为 false 的话该属性会被移除:

4.4过滤器

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

  Vue.js
允许你自定义过滤器,可被看做一些广大的文本格式化。过滤器能够用在四个地方:mustache
插值和 v-bind 表明式。过滤器应该被加多在 JavaScript
表明式的尾巴,由“管道”符提示:

#### 使用 JavaScript 表达式

  {{ message | capitalize }}

Vue.js 都提供了一心的 JavaScript 表明式帮助:

 

“`html
{{ number + 1 }}

  <!– in v-bind –>

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

  <div v-bind:id=”rawId | formatId”></div>

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

 过滤器函数总接受表明式的值作为第叁个参数。

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

  new Vue({

那一个表达式会在所属 Vue 实例的数码成效域下作为 JavaScript 被深入分析。
有个限制正是,每种绑定都只可以分包单个表明式,所以上面包车型大巴例证都不会立见成效:

    filters: {

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

    capitalize: function (value)
{

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

      if (!value) return ”

### 指令

      value = value.toString()

### Vue 内置指令

      return value.charAt(0).toUpperCase() + value.slice(1)

– 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> 成分。

  {{ message | filterA | filterB }}

#### 参数

过滤器是 JavaScript 函数,由此还可以参数:

局地下令能接受二个“参数”,在命令后以冒号指明。
举例, v-bind 指令被用来响应地革新 HTML 属性:

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

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

这里,字符串 'arg1' 将传给过滤器作为首个参数, arg2 表明式的值将被求值然后传给过滤器作为第几个参数。

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

5.缩写

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

5.1.v-bind缩写

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

<!– 完整语法 –>

在那边参数是监听的风浪名:`click`。

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

#### 修饰符

<!– 缩写 –>

修饰符(Modifiers)是以半角句号 .
指明的独竖一帜后缀,用于提议两个命令应该以极其形式绑定。
举例,.prevent 修饰符告诉 v-on 指令对于触发的事件调用
event.preventDefault():

<a :href=”url”></a>

“`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”>
“`

5.2v-on缩写:

### 过滤器

<!– 完整语法 –>

> 注意:Vue 二.x 中,过滤器只可以在 mustache 绑定和 v-bind 表明式(从
二.1.0 起始接济)中动用,
>
因为过滤器设计指标正是用来文书转变。为了在别的指令中完结更目迷五色的数额转换,你应该使用
**测算属性**。

<a v-on:click=”doSomething”></a>

– Vue.js 允许你自定义过滤器,可被当做一些广大的文本格式化

<!– 缩写 –>

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

<a @click=”doSomething”></a>

大局过滤器:

 

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

总结:

部分过滤器:

1.插入值

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

 插入文本、插入结构

过滤器使用格式:

2.属性

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

 绑定值给模板、对ja表明式的支撑,可是不援助流程序调整制语句

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

3.指令

过滤器能够串联:

 指令参数、指令修饰符、指令修饰符

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

四语法缩写

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

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

那边,字符串 ‘arg1’ 将传给过滤器作为第二个参数,arg贰说明式的值将被求值然后传给过滤器作为第四个参数。

### 缩写

#### 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>
“`

也能够向来绑定数据里的2个指标:

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

#### 数组语法

“`html
<!– 能够把3个数组传给 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
成分,封装可选拔代码。

### 组件的命名

– 假如贰个单词就只写1个单词就可以

  • 假如是四个单词组成的名字
  • 建议利用短横杠的办法
  • 假诺选取的是驼峰命名
  • 则在 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 必须怀有1个根节点,否则,模板编写翻译报错。

– 能够是内联模板

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

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

毋庸在大局注册各个组件。
通过运用组件实例选项注册,能够使组件仅在另3个实例/组件的成效域中可用:

“`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>
“`

**相应注意,借让你使用来源以下来源之1的字符串模板,那几个限制将不适用:**

– `<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
    中的对象或数组类型数据再次赋值,父组件也不会博得更新
  • 那是为了幸免子组件无意间修改了父组件的景观
  • 这会让数据流的走向变得乱7八糟而难以理解

何以大家会有改换 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>
“`

在本示例中,子组件已经和它外表完全解耦了。
它所做的只是告诉自个儿的里边事件,至于父组件是否关注则与它非亲非故。

突发性,或然想要在有个别组件的根元素上绑定1个原惹事件。
能够使用 `.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>` 组件很恐怕有它和睦的沙盘

为了让组件能够结合,大家要求壹种艺术来混合父组件的开始和结果和子组件本身的模板。
其1历程被称呼 **内容分发**(或 “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>` 成分能够用3个独特的属性 `name`
    来配置怎么样分发内容
  • 多个 slot 能够有分化的名字。
  • 签字 slot 将相称内容片段中有对应 slot 本性的要素
  • 还是能够有1个无名 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. 使用 `v-cloak` 解决

率先,在要渲染处理的 DOM 节点上增加1个指令 `v-cloak`:

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

第一,在 style 中参预二天性质选取器样式:

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

其3,分析实施机制:

  1. 当浏览器深入分析处理到增加了 `v-cloak`
    属性的节点的时候,属性样式被作用上来,也正是说私下认可那一个容器正是隐身着的
  2. 然后当 Vue 程序剖析渲染完HTML模板的时候,自动将容器上的 `v-cloak`
    属性移除

 


相关文章

发表评论

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

网站地图xml地图