前言
本文主要介绍了关于node vue前后端分离的相关资料,分享出来供大家参考学习,下面随着小编来一起学习学习吧。
node vue项目开发
最近看了近一周的vue开发,有诸多感触,我之前接触过react、angular所以特别想学学久仰大名的vue。学习半天以后发现,接触到的东西多了,学习起来就是容易很多,vue的指令我能个联想到angular的指令,vue组件化设计类似于react的组件化设计,包括一些router的设置跟react里的路由或者nodejs里的路由都差不多,vuex更是根据redux、flux改写的,虽然我还搞不太明白怎么用,至于vue的模板渲染,跟expres渲染ejs没有太大的区别。使用vue可以完全脱离jq,虽然我还没感受到不用jq有什么神奇的赶脚,但是我觉得这种双向数据绑定的还是挺方便的,此文档用来记录我学习vue的一些新的知识和想法。
指令
- v-bind 主要用于动态绑定DOM元素属性,即元素属性实际的值是 有vm实例中的data属性提供的。
- v-model 主要对表单元素进行双向数据绑定,在修改表单元素的值时,实例vm中对应的vm对应的属性也同时更新。
- v-if,v-show,v-else这几个指令来说明模板和数据间的逻辑关系
v-if和v-else的作用是根据数值来判断是否输出该dom元素,以及包含的子元素。
eg:
<div v-if="yes">yes</div>
当vm实例中的data.yes=true
时,模板引擎会编 译这个dom节点,输出<div>yes</div>
值得注意的是:v-else要紧跟v-if否则不起作用。
v-show与v-if的效果差不多,都是通过判断真假显示内容,唯一不同的是,v-show不显示的时候是display:none
,也就是保留了dom节点,但是v-if不会。 - v-for 用于列表渲染,可以循环遍历数组和对象,注意
v-for="b in 10"
目前指的是1-10的迭代 - v-on 事件绑定,简写@:
v-text <p v-text="msg"><p>
相当于innerText,与{{msg}}
相比,避免了闪现的问题。- v-HTML 类似于innerHTML,也可以避免闪现
- v-el 这个指令相当于给dom元素添加了个索引,例如
<div v-el="demo">this is a test </div>
,如果想获取当前dom里的值,可以vm.$els.demo.innerText
,注意:html不区分大小写,驼峰式的写法会自动转成小写,可以通过-的方式转换成大写。 - v-ref 与v-el类似 通过
vim.$refs
访问 - v-pre 跳过编译这个元素
- v-cloak 感觉没啥用
- v-once新增内置指令,用于标明元素或组件只渲染一次。