本文共 5917 字,大约阅读时间需要 19 分钟。
本人是个新手,写下博客用于自我复习、自我总结。 如有错误之处,请各位大佬指出。 学习资料来源于:尚硅谷
大家只要进入到Vue官网,就会知道一个信息:
何为渐进式?Vue的库分为核心库以及相关的插件,核心库比较小,能实现一些基本的功能。显然做项目时,只有核心库肯定不够,需要时就要用其他相关的插件。 所以渐进式就是:我们先只用核心库,当我们需要用到某些特定的功能时,我们就添加我们所需要的这些插件。Vue的作用:动态构建用户界面。即将后台的数据,在前台的界面上动态渲染显示出来。
这里用的Vue版本是2.x版本,目前大部分情况用的也是2.x版本。
如何下载:
(在这里需要说的是,Vue的中文官网也是配有教程讲解的,如果遇到什么问题查阅官方文档很方便)
Vue.js存放的目录:
在这里,如果之前学了AngularJS,那么对这里的理解就很方便了,而且语法也十分相近,比如,在Angular中,用的是ng-model
,这里用的就是v-model
。同时可以用{ {}}
来获取属性。 数据绑定: 数据从一个位置自动流向另一个位置。
View–>Model Model–>View单向数据绑定: 只支持一个方向。
双向数据绑定:数据可以从View(视图层)流向Model(模型),也可以从Model流向View。
和Angular中一样,v-model
是双向数据绑定, 而{ {}}
是单向数据绑定。如果有需要,可以去我之前的AngularJS博文简单的看一看数据绑定部分,因为很好理解且是很简单的语法。
test.html
在Vue里,这个MVVM到底是什么,到底是如何办到上面代码效果的: 首先有一个监听,会监听这个输入框内容,当输入框中的内容发生了改变,监听器就触发。这个监听器的回调函数就会把输入框的内容保存到data里,同时将这个数据输出到页面里去显示。而这个过程就会用到DOM监听和数据绑定。具体的之后会有涉及。01_HelloWorld hello {
{msg}}
MVVM:
model:模型,数据对象(data) view:视图,模板页面 viewModel:视图模型(Vue的实例)在代码中的体现:
02_模板语法
03_计算属性和监视 姓: 名: 姓名1(单向): 姓名2(单向): 姓名3(双向):{
{fullName1}}{
{fullName1}}
04_class与style绑定 1. class绑定: :class='xxx'
xxx是字符串
xxx是对象
xxx是数组
2. style绑定
:style="{ color: activeColor, fontSize: fontSize }"
05_条件渲染 成功
失败
成功
失败
06_列表渲染 测试: v-for 遍历数组
- { {index}}--{ {p.name}}--{ {p.age}} -- --
测试: v-for 遍历对象
- { {key}}={ {item}}
- { {key}}={ {item}}
06_列表渲染_过滤与排序
- { {index}}--{ {p.name}}--{ {p.age}}
07_事件处理
08_表单输入绑定
根据图示,我们可以看到Vue生命周期的几个阶段。首先,当建立了一个Vue实例后,马上就会调用beforeCreate
,之后Vue做一些准备工作:监视属性值的变化用来实现数据绑定以及初始化事件。之后调用created
。
接着就进行判断,就是判断我们用的el
有没有设置。当我们设置了,也就指定了Vue会为谁服务,假如我们不设置,也可以通过手动设置(显然,我们没必要手动设置,使用el
很简单)。然后判断是否设置了template
,像我们之前没有设置过,那它就会以el
指定的区域作为模板,来进行解析。在这里有一个概念叫批量处理。即在解析的时候并不是在页面上直接进行解析,而是先在内存中对所有内容进行解析处理(批量处理),编译好之后再一次性全部送回到页面。而送回之前就是beforeMount
,送回之后就是mounted
。 到这里为止是生命周期的第一个阶段,初始化显示。
生命周期的第二个阶段:更新。在数据发生改变之前就是beforeUpdate
,更新后就是updated
。
生命周期的第三个阶段:销毁 / 死亡。当调用到了vm.$destroy()
就意味着要开始进行销毁了。通常使用beforeDestroy
来做一些销毁前的工作,比如清除定时器。在Vue里销毁会把组件移除掉,页面中也许还会有显示,但是会失去绑定,失去交互。销毁后就是destroyed
。
09_Vue实例_生命周期 hello
09_Vue实例_生命周期 hello
阶段输出示意图:(当点击了按钮才会触发销毁,否则肯定会更新无数次)
对于Vue里的过渡和动画,实际上操作的就是css的trasition或animation。
当我们想使用的时候,我们需要在在目标元素外包裹<transition name="xxx">
(注意:这个name可以为任何值)。 先看一个简例,完整代码在下面。 hello
在这里想实现的效果就是hello的消失与出现。简单来看,这段代码貌似没有什么办法可以触发过渡和动画效果,实际上Vue帮我们做了一个事:给目标元素添加/移除特定的class。比如它的效果应该是这样的:<p v-show="show" class="xxx-enter">
就像下图中展示的过程,在这里就以出现和消失举例,其他效果也是同理的。
当最开始的时候,元素是隐藏的状态,即Opacity:0
,它会给元素加一个类名: xxx-enter
,也就是通过xxx-enter
来指定了元素隐藏时候的样式。元素要出现时(出现的过程),就会给它加xxx-enter-active
的类名,过渡/动画 效果结束的时候,就会给它加xxx-enter-to
的类名。 对于消失部分也是同样的,在要消失前是xxx-leave
,消失的过程是
xxx-leave-active
,消失后就是xxx-leave-to
,同时通过xxx-leave-to
来指定了元素隐藏时候的样式。 (当然 过渡/动画 效果不仅限于出现和消失,也会有其他效果,在这里以出现和消失举例,并不意味着这种方法只能实现出现和消失或者必须实现出现和消失)
所以通过整个过程的分析,也就不难看出,对于该元素来将:
xxx-enter
和xxx-leave-to
,都用来指定隐藏时的样式,只不过一个是出现前,一个是出现后,通常一起实现。 xxx-enter-active
和xxx-leave-active
,分别用来记录出现的过程和消失的过程,即用它们来指定过渡效果。 在这里需要注意的是,xxx-enter-to
和xxx-leave
只代表着 过渡/动画 效果结束时和元素准备实现动画效果这两个瞬间,即这两个类名不会长时间存在。所以通常也不实现它们。
xxx-enter-to
加一些css样式就会在 过渡/动画 效果实现后触发,只要不触发leave
操作,这个类名就可以长时间存在。但是只要尝试后就会发现,确实是不行。) 10_过渡&动画1 hello
hello
10_过渡&动画2 Lorem
对于具体moment.js的使用,大家可以去moment查看官方文档查看,这里就展示一下格式:
11_过滤器 显示格式化的日期时间
{
{time}}最完整的: {
{time | dateString}}年月日: {
{time | dateString('YYYY-MM-DD')}}
12_指令_内置指令 {
{content}}abcd
在这里需要说一下v-cloak
:其实这些指令有一种特性就是:就是在页面被解析后,这些指令就消失了,如下图所示。而v-cloak
正是用了这样的特性,在没被解析之前,因为这个指令的存在,设置了css样式display:none
,所以指定的标签就不会出现,当页面被解析后,因为指令的消失从而让标签内容出现。
v-cloak
后,如果你第一次进网页(网页还没被解析时),你会看到它的表达式形式,即:{ {content}}
。正常看大家可能看不出效果,可以在新建Vue对象前,加一个alert,看一下效果。也就是说,为了避免这种情况,我们就可以使用v-cloak
显然,Vue提供的指令可能不能满足所有需求,所以自定义指令的存在就格外重要了。
12_指令_自定义指令
以后当我们想用其他人的插件的时候,就也需要用Vue.use()
17_插件
vue-myPlugin.js
(function (window) { const MyPlugin = { } MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { console.log('Vue函数对象的myGlobalMethod()') } // 2. 添加全局资源 Vue.directive('my-directive',function (el, binding) { el.textContent = 'my-directive----'+binding.value }) // 3. 添加实例方法 Vue.prototype.$myMethod = function () { console.log('vm $myMethod()') } } window.MyPlugin = MyPlugin})(window)
转载地址:http://ulyki.baihongyu.com/