Vuejs新手入门.docx
《Vuejs新手入门.docx》由会员分享,可在线阅读,更多相关《Vuejs新手入门.docx(13页珍藏版)》请在冰点文库上搜索。
Vuejs新手入门
这是官网教程地址:
https:
//cn.vuejs.org/v2/guide/
从代码能看出el是用来绑定元素的,data顾名思义就是一个json格式的数据源。
v-bind属性被称为指令。
指令带有前缀v-,以表示它们是Vue提供的特殊属性。
可能你已经猜到了,它们会在渲染的DOM上应用特殊的响应式行为。
条件判断
for循环方法
为了让用户和你的应用进行互动,我们可以用v-on指令绑定一个事件监听器,通过它调用我们Vue实例中定义的方法,也就是添加事件,举一反三飞,比如v-on:
blur,我觉得可行呀
注意在reverseMessage方法中,我们更新了应用的状态,但没有触碰DOM——所有的DOM操作都由Vue来处理,你编写的代码不需要关注底层逻辑。
Vue还提供了v-model指令,它能轻松实现表单输入和应用状态之间的双向绑定。
也就是你在输入框写的值,P标签也会更改。
(可以这么说vue.js不能说是MVVM模型,但是vue都到了mvvm的启发而形成的)
你只需要明白所有的Vue组件都是Vue实例,并且接受相同的选项对象即可
我理解vue是一个完全是响应式的东西。
当数据改变时,视图会进行重渲染
除了data属性,Vue实例暴露了一些有用的实例属性与方法。
它们都有前缀$,以便与用户定义的属性区分开来。
实例生命周期
每个Vue实例在被创建之前都要经过一系列的初始化过程。
例如需要设置数据监听、编译模板、挂载实例到DOM、在数据变化时更新DOM等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。
比如created钩子可以用来在一个实例被创建之后执行代码:
(重点)下图说明了实例的生命周期。
你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。
(图在下面呢,太长,装不下了。
。
。
)
插值
数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值:
通过使用v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。
(简单的说就是就算更改data也不会改变标签里的值)
双大括号会将数据解释为普通文本,而非HTML代码。
为了输出真正的HTML,你需要使用v-html指令
(可以这么说,假如data里的rawHtml是“id=”id””,html是可以识别为html的代码)
这个div的内容将会被替换成为属性值rawHtml,直接作为HTML——会忽略解析属性值中的数据绑定。
注意,你不能使用v-html来复合局部模板,因为Vue不是基于字符串的模板引擎。
反之,对于用户界面(UI),组件更适合作为可重用和可组合的基本单位。
使用JavaScript表达式
迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。
但实际上,对于所有的数据绑定,Vue.js都提供了完全的JavaScript表达式支持。
每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
v-bind缩写
v-on缩写
它们看起来可能与普通的HTML略有不同,但:
与@对于特性名来说都是合法字符,在所有支持Vue.js的浏览器都能被正确地解析。
而且,它们不会出现在最终渲染的标记中。
缩写语法是完全可选的,但随着你更深入地了解它们的作用,你会庆幸拥有它们。
计算属性
结果:
Originalmessage:
"Hello"
Computedreversedmessage:
"olleH"
this.message.split(‘’).reverse().join(‘’)=data.message.split(‘’).reverse().join(‘’),这个方法就是将翻转字符串
我们可以将同一函数定义为一个方法而不是一个计算属性。
两种方式的最终结果确实是完全相同的。
然而,不同的是计算属性是基于它们的依赖进行缓存的。
计算属性只有在它的相关依赖发生改变时才会重新求值。
这就意味着只要message还没有发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。
(这块你只需要了解就行了,说的是计算属性具有缓存功能,如果不需要缓存那就用方法的形式写就行,就是method:
{reversedMessage:
function()}这种,就不会有缓存了)
自定义的侦听器
教程里有dome,最好去试试,看他的实现过程,(https:
//cn.vuejs.org/v2/guide/computed.html#侦听器)
在输入框里写英文问号就行
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用起来没什么差啦)
从2.3.0起你可以为style绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:
style="{display:
['-webkit-box','-ms-flexbox','flex']}">