Vue 入门笔记

Vue.js 简介

壹.模板语法

# vuejs tutorial

证明及下载

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

vue.js若是当成叁个库来行使,能够透过上边地址下载:

1.壹Vue.js 使用了依照 HTML 的模板语法,允许开采者评释式地将 DOM
绑定至底层 Vue 实例的数量。全体 Vue.js 的模版都以官方的 HTML
,所以能被依据标准的浏览器和 HTML 深入分析器分析。

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

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代码实例(创设)

<!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.插值

## 搭建案例演示自动刷新情状

数据与艺术

当2个 Vue 实例被创立时,它向 Vue
的响应式系统中参预了其data对象中能找到的有着的属性。当这一个属性的值产生变动时,视图将会时有发生“响应”,即相称更新为新的值。还足以在Vue实例中定义方法,通过艺术来更动实例中data对象中的数据,数据变动了,视图中的数据也更动。

2.1.插文本:

创设叁个 `package.josn` 文件:

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

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

指令

指令 (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
指令,你也能举办1遍性地插值,当数码变动时,插值处的内容不会更新

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

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

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

2.3.插标签

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

  双大括号会将数听大人表达为纯文本,而非 HTML
。为了输出真正的 HTML ,你要求利用 v-html 指令:

开发终端,运营开辟预览服务:

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

“`bash
npm start
“`

3.属性


3.1.v-bind指令

## vuejs 介绍

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


  那对布尔值的属性也使得 —— 假若条件被求值为 false
的话该属性会被移除:

## 安装

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

– Vue.js 不援救 IE捌 及其以下版本,因为 Vue.js 使用了 IE捌 不能够模仿的
ECMAScript 五 性格

3.2.javaScript的支持

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

    {{ number + 1 }}


 

## Vue 实例

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

– 每一个 Vue.js 应用都以因而构造函数 Vue 创造的

 

  • 在实例化 Vue
    时,供给传入3个抉择对象,它能够包涵数据、模板、挂载元素、方法、生命周期钩子等选项
  • 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` 指令
  • 1遍性插值:
  • `<span v-once>This will never change: {{ msg
    }}</span>`
  • 瞩目:会影响该节点及里面节点有所的绑定

4.2.发令的参数:

#### 纯 HTML

  一些命令能经受3个“参数”,在指令后以冒号指明。比方, 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 攻击:跨站脚本攻击
  • 后天照旧后后天补课

  在此处参数是监听的风浪名。大家也会更详实地谈论事件处理。

#### 属性

四.三.修饰符:修饰符(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-` 前缀的独天性质。
一声令下属性的值预期是单1 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.缩写

另三个例证是 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 表明式(从
二.①.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 }}
“`

4语法缩写

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

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

这里,字符串 ‘arg壹’ 将传给过滤器作为第壹个参数,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>
“`

发表评论

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