1 / 14
文档名称:

【最新】vue.js新手入门.docx

格式:docx   大小:519KB   页数:14页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

【最新】vue.js新手入门.docx

上传人:朱老师 2022/7/28 文件大小:519 KB

下载得到文件列表

【最新】vue.js新手入门.docx

文档介绍

文档介绍:
这是官网教程地址:/
从代码能看出el是用来绑定元素的,data顾名思义就是一个json格式的数据源。
v-bind属性被称为指令。指令带。为了输出真正的HTML,你需要使用v-html指令
〔可以这么说,假设data里的rawHtml是“id=〞id〞〞,html是可以识别为html的代码〕
这个div的内容将会被替换成为属性值rawHtml,直接作为HTML——会忽略解析属性值中的数据绑定。注意,你不能使用v-html来复合局部模板,因为Vue不是基于字符串的模板引擎。反之,对于用户界面(UI),组件更适合作为可重用和可组合的根本单位。
使用JavaScript表达式
迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,。
每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
v-bind缩写
v-on缩写
它们看起来可能与普通的HTML略有不同,但:与@对于特性名来说都是合法字符,。而且,它们不会出现在最终渲染的标记中。缩写语法是完全可选的,但随着你更深入地了解它们的作用,你会庆幸拥有它们。
计算属性
结果:
Originalmessage:"Hello"
Computedreversedmessage:"olleH"
(‘’).reverse().join(‘’)=(‘’).reverse().join(‘’),这个方法就是将翻转字符串
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message还没有发生改变,屡次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。
〔这块你只需要了解就行了,说的是计算属性具有缓存功能,如果不需要缓存那就用方法的形式写就行,就是method:{reversedMessage:function()}这种,就不会有缓存了〕
自定义的侦听器
教程里有dome,最好去试试,看他的实现过程,〔#侦听器〕
在输入框里写英文问号就行
Class与Style绑定
这块对你来说也很重要,好似都很重要似得,哈哈。。。
我们可以传给v-bind:class一个对象,以动态地切换class:
上面的语法表示active这个class存在与否将取决于数据属性isActive是否为truthy(就是true)。你可以在对象中传入更多属性来动态切换多个class。此外,v-bind:class指令也可以与普通的class属性共存。
这种方式结果是class=〞active〞
还可以用数组的形式,就跟jquery里的css({})方式一样
结果就成这个样子了
还可以用三元表达式
v-bind:style的对象语法十分直观——看着非常像CSS,但其实是一个JavaScript对象。CSS属性名可以用驼峰式(camelCase)或短横线分隔(kebab-case,记得用单引号括起来)来命名:
直接绑定到一个样式对象通常更好,这会让模板更清晰
〔看起来和上面的Class用起来没什么差啦〕
,常用于提供多个带前缀的值,例如:
<div:style="{display:['-webkit-box','-ms-flexbox','flex']}"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的flexbox,那么就只会渲染display:flex。
〔这个我就不懂什么意思了,应该和浏览器有关系吧,真的,学到这里我发现这东西跟PHP语言特别特别的像,你是不是也感觉了〕
条件渲染
先说说ifelse的用法吧,官网说的有些啰嗦,上一张图你就懂了
<h1v-if="ok">Yes</h1>
<h1v-else>No</h1>
对,就是这么简单
用key管理可复用的元素
<templatev-if="loginType==='username'">
<labe