你了解vue吗?你又是从什么地方开始听到过这框架的呢?我是在接触了laravel后才开始关注这么一个框架的!没办法,在开发中我一直试用的是混编模式开发,嗯大概如果你也是这样开发的话你也觉得很累吧.废话少说,我们先来初步学习下吧,后期我尽量坚持一周写篇技术文章进行分享.至于更新的时间只能听天由命了. ps:我也不是什么技术大牛,浮沉在技术圈两年时间了.不求成为什么厉害的人物,只有能做到不忘初心即可.撰写的文章如果有错漏,或者理解有误,欢迎指正交流!

什么是vue?

Vue (读音 /vjuː/&＃xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&＃xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。

上手需要准备神马?

最简单的方式就是像引入JQ一样,通过CDN引入加载吧.这样你就可以好好地根据这篇文章进快乐的玩耍了.

对应的:CDN地址

//在我们的学习过程中,不用考虑了,你最好试用第一个CND的链接地址这样你才可以在最短的时间最快的接触

下面:我们将对vue的一些基础应用和特性进行一下简单的说明

声明式渲染




{{ message }}





看是吧!其实vue框架最简单的应用就是如此,只需要按照官方所提供的实例化函数,只需要定位对应的元素标签,并对进行指定的数据绑定.即可马上显示你所需的内容.我也难得去截图给你运行的结果了.作为一个求学的你动手打一遍,或者直接cv好了!

#了文本插值&＃xff0c;我们还可以像这样来绑定元素特性




这里通过另一种方式进行数据的绑定





上面的例子其实就识展示了,通过V-bind绑定了span标签的title元素,同样地如果那你需要绑定不同的标签你可以按照这个例子进行扩展.

条件与循环

很多时候我们在页面渲染中,都会用到判断控制一个元素是否展示,或者有一个列表表格需要你进行渲染.那么这个时候我们在vue框架中就需要用到条件语句或者循环语句了.

#通过v-if指令我们可以对一个元素进行是否显示的操作

这段文字是通过vue的条件属性控制是否可以展示的





其实逻辑还是很简单的,只不过识通过v-if元素控制的对应值的真假.控制显示,真为显示,假为隐藏!

#v-for 指令可以绑定数组的数据来渲染一个项目列表&＃xff1a;

• {{todo.id}} | {{ todo.text }}




上面的例子,其实就是一个简单的列表循环.todos就是需要循环的列表数据,然后通过v-for进行数据的渲染,具体例子就参考我给出的示例代码吧~

处理用户输入

呃,这个概念其实就是可以通过vue处理下用户输入的数据.简单地举个例子吧~通过点击事件把用户的输入反转~

#v-on 通过添加一个事件监听器 例如:下面的代码通过对button绑定一个click事件




{{message}}

消息反转




如实例代码一样,通过methods方法可以回调触发的函数.接着在函数中去做你想做的事情吧!jsust do it!

#双向绑定v-model

什么是双向绑定?其实就是表单输入和应用状态之间的双向绑定,其中一者的改变另一者都回进行改变!





{{message}}








嗯,其实双向绑定的代码简单实例就是如此,如果不能好好理解那就运行一遍吧~你会发现有些东西只能意会不能言传~

组件化应用构建

在 Vue 里&＃xff0c;一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单&＃xff1a;




解析下吧: Vue.component,这个函数其实就是对应的注册组件,props:可以定义自定义不同组件的特性. template,其实就是对应的html组件模板.

接下来我们看一个完整的组件例子吧!









上面就是一个简单的组件模块.可能现在你会有一个疑问,vue的组件模块有什么用处呢?我们且看下官方的回复:

在一个大型应用中&＃xff0c;有必要将整个应用程序划分为组件&＃xff0c;以使开发更易管理.其实简单来说,就像我们在模块化开发的时候,对于一些公共的模块,如果要复用我们就会封装,在其他需要用的地方再引入调用.也使得不同模组之间的逻辑修改互不影响.

总结

其实vue的基础认识,我们刚刚已经大致了解.大概下一篇文章我们会简单讲解下vue的安装教程和试用,毕竟如果在开发一些特别的组件和应用这部份的知识还是需要拥有的.