node-vue前后端分离记录
nodevue项目开发看了近一周的vue开发,感触颇多。之前接触过react和angular,所以特别想学一下成名已久的vue。学习久了,发现接触了很多东西,学起来就容易多了。我可以将vue的命令与angular的命令相关联。vue的组件设计和react类似,包括一些router的设置和react中的nodejs或者nodejs中的路由类似,vuex是基于redux和flux重写的。虽然我还是不太明白怎么用,但是对于vue的模板渲染,和express渲染ejs没有太大区别。使用vue可以完全脱离jq。虽然没有感受到不使用jq的神奇之处,但是我觉得这种双向数据绑定还是挺方便的。本文档用来记录自己学习到的一些关于vue的新知识和思想。v-bind指令主要用于动态绑定DOM元素属性,即元素属性的实际值由vm实例中的data属性提供。v-model主要对表单元素进行双向数据绑定。当修改表单元素的值时,实例vm中对应vm的相应属性也同时更新。命令v-if、v-show和v-else说明了模板和数据之间的逻辑关系。v-if和v-else的作用是根据value判断是否输出dom元素及其包含的子元素。eg:yes
当vm实例中data.yes=true时,模板引擎会编译dom节点,输出
yes
值得注意的是that:v-else应该跟在v-if之后,否则它将不起作用。v-show和v-if的效果几乎是一样的。它们都是通过判断内容的真假来展示内容。唯一不同的是,不显示v-show时是display:none,即保留dom节点,而v-if则不会。v-for用于列表渲染,可以循环遍历数组和对象。注意v-for="bin10"目前指的是迭代1-10次v-on事件绑定,缩写为@:v-text
相当于innerText,与{{msg}}相比,避免了闪退的问题。v-HTML和innerHTML类似,也可以避免闪烁v-el这条指令相当于给dom元素加了一个索引,比如thisisatest
,如果要获取当前dom中的值可以是vm.$els.demo.innerText,注意:html不区分大小写,驼峰式会自动转为小写,可以转为大写经过-。v-ref类似于v-el通过vim.$refs访问v-pre跳过编译这个元素v-cloak感觉没用使用v-once添加内置指令来指示元素或组件只渲染一次。模板渲染v-for主要用于列表渲染。它根据接收到的数组重复渲染v-for绑定的dom元素和内部子元素,并可以通过设置别名获取数组中的数据并渲染到节点。例如: