当前位置: 首页 > 后端技术 > Node.js

node-vue前后端分离记录

时间:2023-04-03 16:05:56 Node.js

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元素和内部子元素,并可以通过设置别名获取数组中的数据并渲染到节点。例如:
  • {{item.title}}
  • {{item.description}}
  • v-forinvue1.x内置$index变量,在vue.2x中去掉了这个变量,直接使用{{index}},例如{{index}}修改数据直接修改数组可以改数据但不能直接改数组1.vm.items[0]={},这种情况下不能修改,解决方法:vm.item.$set(0,{})orvm.$set('item[0]',{})2.vm.item.length=0v——对于遍历对象,可以自定义key变量,形式为(key,value)。{{key}}:{{vue}}注意:`$key`变量在vue1.x中构建并在vue中移除。2x设置该变量后,直接使用`{{key}}`模板标签作为模板渲染的基础节点,但是渲染的节点不存在。事件绑定和监听v-on可以绑定实例属性方法中的方法作为事件处理器,v-on:可以接受所有原生的事件名称。缩写@:可以绑定methods函数,也支持内联js,但只能声明一条。绑定方法function和inlinejs都可以获取到原生的dom元素,event。当绑定多个事件时,它们是顺序执行的。您是否渴望ui组件?使用指南安装npminstallcnpminstallelement-ui--save-devimportfilemain.jsimportElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'Vue。使用(ElementUI,{size:'small'})用于在components文件夹下新建一个页面,从饿了么找你喜欢的组件,比如走马灯Carousel.vue把代码复制到这个页面的所需文件中这个组件接下来,比如在APP.vue中importCarouselfrom'./components/Carousel'exportdefault{name:'app',components:{//componentsaddsCarousel:Carousel}}加载模板中的组件这样你就可以运行自定义组件比如我要添加一个导航组件,名字叫headerBar,我在components中添加一个文件叫headerBar.vue:使用:需要在App中导入。vue先是这个组件,然后注册这个组件,最后使用