Vue生命周期 数据 手动挂载 指令 Vuejs入门教程的过滤器

原始教程：

http://cn.vuejs.org/guide/instance.html

http://cn.vuejs.org/guide/syntax.html

这篇博文在最初教程的基础上增加了一些例子，并试图更详细地解释它们。

(10)Vue实例的生命周期

如图：(我自己翻译的中文版和英文版请见本博文顶部的第一个链接)

(8)传入数据绑定

首先创建一个对象(如果它是obj)，然后将其作为数据属性值传递给Vue实例，然后

(1)obj值的变化会影响Vue实例中值的变化；

相反；

obj可以在Vue实例外操作，对Vue实例有同样的影响；

获取obj.a的值(如果它有这个属性的话)可以通过Vue实例(比如变量vm)和vm.a(它们是等价绑定的)来获取；

以后增加的价值无效

例如：

div id=' app ' { a } }/div button onclick=' add()' 1/button script var obj={ a : 1 } var VM=new Vue({ El : ' # app '，data: obj })函数add(){//VM . a；物体a；} /script add函数，这两个语句的效果是等价的，而且两者都可以使显示值为1

但是如果你像这样改变代码：

var obj={ b : 1 } var VM=new Vue({ El : ' # app '，data: obj })函数add(){ obj . a=1；}然后点击按钮后，该值将不显示(无绑定)。

注意：即使修改为vm.a=1，也是无效的

准确地说，在Vue实例创建后向其添加新属性不会触发视图更新。

在上述情况下，obj.a===vm.a，注意a之前没有数据。

功能：

函数test(){ if(VM . a===obj . a){ console . log(' VM . a===obj . a ')；}}其判断条件为真

(Vue实例暴露的接口

在前一篇文章中，提到了vm.a=obj.a was然而，我们没有得到数据的所有属性；

Vue提供了几个公开的接口：

接口(假设实例是虚拟机)效果

Vm。$data是虚拟机的数据属性

Vm。$el是vm的el属性所指向的dom节点

Vm。$watch示例：

虚拟机。$watch("a "，函数(newVal，oldVal){})

当数据中的发生变化时，回调函数将被触发

更多可以查看

http://cn.vuejs.org/api/

搜索$作为要查看的关键字。

(11) $mount()手动安装

当Vue实例没有el属性时，该实例还没有装载到dom中。

如果需要延迟装载，可以手动调用虚拟机。$mount()方法稍后挂载它。例如：

div id=' app ' { a } }/div button onclick=' test()' mount/button script varobj={ a : 1 } var VM=new vue({ data : obj })function test(){ VM。$ mount(' # app ')；}最初会显示{{a}}

当按钮被点击时，它变成1

(12)用Vue的v-for写一张表格

！doctype HTML head title Vue/title script src=' http : Vue . js '/script/head body div ID=' app ' button onclick=' load()'点击挂载表/button/div style table {边框-折叠3360折叠；边框间距： 0；边框-左侧： 1px实心# 888；border-top: 1px实心# 888；背景# efefef} th，TD { border-right : 1px solid # 888；border-bottom: 1px实心# 888；padding: 5px 15px} th { font-weight : bold；背景# ccc}/style script varobj={ grid :[{ ID 3360 ' ID '，name3360' name '，description:' description '，clickButton:' click event'}，}，{id: '1 '，name: 'a '，Description :' Amoous '，clickButton:' click弹出' }，{ID :' 2 '，Name : ' B '，Description 3:$ mount(' # app ')；} /script /body /html (XIII)数据绑定：

html标记的纯文本显示/视为html标记；

插值单次更新；

(1)使用两个大括号时，如果字符串内容为html标记，则不会被转义，但会正常显示；

当使用三个括号时，字符串中的html标记将被直接转义，

例如：

div id=' app ' { html } }/div脚本var VM=newvue ({el:' # app '，data : { html 3360 ' span/span ' })/脚本屏幕上显示的内容有：

跨度/跨度

如果三个大括号包含变量名：

div id=' app ' { { html } } }/div脚本var vm=new Vue({ el:'#app '，data : { html : ' span span/span ' })/脚本脚本函数load() { vm。$ mount(' # app ')；}/仅脚本显示

跨度

插入内容的数据绑定无效(不使用偏旁)

使用两个大括号或三个大括号是一样的

例如，将中的html更改为以下值

data : { html : ' span span { { val } }/span '，val :' 11'}显示以下结果：

span{{val}}

说明没有绑定数据；

根据说明，使用分音来绑定

http://cn.vuejs.org/api/#partial

但这是行不通的，等到研究明白了再说

禁止对用户提交的内容进行动态渲染，否则会遭到XSS的攻击

插值也可以用在html标签的属性中，比如class，或者id，或者其他。

但是，Vue.js的指令和特殊功能不能插值。

(14)结合表达

插值的位置可以使用JavaScript表达式，例如：

div id=' app“{ html？Html : val}}/div脚本var VM=newvue ({el:' # app '，data: {html3360 ' '，val : ' 11 ' })/script例如，

如果有html值，则输出hmtl值，否则输出val值；

您也可以输出一个字符串，例如，将其更改为：

{{html？html:“无文字”}}

不输出单词

但是你只能输出表达式，不能输出函数，或者只是放一个v-for标签。

但我推断后者应该可以。也许我写错了。

(十五)过滤器

(1)简单来说就是在插值中加入管道字符“|”，然后过滤器就会生效。

例如：

大写，一个过滤器，将字符串的第一个字母大写

Div id=' app ' { { { html |大写}}}/div脚本var VM=newvue ({el:' # app '，data: {html3360' Abc '，val 3360 ' 11 ' })/脚本输出值为Abc

如果是汉字、数字或其首字母，则没有响应。

过滤器不能作为表达式使用，所以不能在表达式内部使用，只能在表达式后面使用。

例如：

{ { html[0]|大写}}

是的，html的第一个字母将被输出并大写；

但是

(html |大写)[0]

它将报告一个错误(没有括号)，这意味着过滤器不能被视为表达式的一部分

参数可以添加到过滤器中。

第一个参数：固定为表达式的值(过滤目标)；

第二个参数，过滤器后的第一个字；

第三个参数，过滤器后的第二个单词，以此类推。

带引号的参数被视为字符串，不带引号的参数被视为表达式，表达式的值作为参数传递给过滤器。

官方例子有：

{{消息|筛选器A 'arg1' arg2 }}

过滤器可以自己写

(16)说明

(1)说明(指令)是特殊的，具有前缀v-。

简单粗暴地说，标签上的v- in就是说明书(当然Vue可以支持)。

指令的值仅限于绑定表达式，即等号后面的引号中。

例如：

div id=' app ' div v-if=' html ' { val } }/div button onclick=' test()'消失前一行/button/div脚本var VM=newvue ({el:' # app '，data: { html: 'abc '，val: '11' })函数test(){ vm.html=' '；}/脚本输出11

其中div v-if=“html”是一个指令，

您可以通过单击按钮使该行消失(因为html的值设置为null)

指令后可以添加参数：

有些指令(如v-bind)可以在名称后面的等号前添加一个属性。该属性的功能是响应性地更新HTML功能。

例如：

风格。白色{背景-color:白色；} .黑色{背景-颜色：黑色；}/style div id=' app ' div v-bind : class=' BC '背景颜色更改/div按钮onclick='test()'消失前一行/按钮/div脚本var VM=newvue ({el3360' # app '，data: { BC: 'black' } })函数test() { vm。BC='白色'；} /script最初，这个div的类绑定到数据中的BC。由于BC的值为黑色，相当于v-bind所在标签的class=“black”，因此背景颜色最初为黑色。

点击按钮时，BC的值变为白色，相当于标签的class=“white”，而白色的背景色为白色，所以div的背景色变为白色。

有一个类似的on:click事件，这意味着click事件受到监视，或者可以更改为

div v-: mouse up=' alert '背景颜色变化/div

指示当鼠标弹出时，标记执行方法的报警功能。

修饰语

修饰符用于指示指令应该以特殊的方式绑定。

例如。文字修饰符告诉指令，它的值应该被解析为字符串，而不是表达式

enter表示按下回车键时调用该函数

输入v-: keydown . enter=' alert '/input

缩写：

v-on的缩写是@班次编号2

v-bind的缩写是：也就是冒号

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！