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:

当vm实例中的data.yes=true时，模板引擎会编 译这个dom节点，输出

yes

值得注意的是：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

相当于innerText,与{{msg}}相比，避免了闪现的问题。

v-HTML 类似于innerHTML,也可以避免闪现

v-el 这个指令相当于给dom元素添加了个索引，例如

,如果想获取当前dom里的值,可以vm.$els.demo.innerText,注意：html不区分大小写，驼峰式的写法会自动转成小写，可以通过-的方式转换成大写。

v-ref 与v-el类似 通过vim.$refs访问

v-pre 跳过编译这个元素

v-cloak 感觉没啥用

v-once新增内置指令，用于标明元素或组件只渲染一次。

模板渲染

v-for 主要用于列表渲染，讲根据接受到的数组重复渲染v-for绑定到的dom元素及内部子元素，并可以通过设置别名的方式，获取数组内数据渲染到节点中。
eg:

    

      
{{item.title}}
      
{{item.description}}
    

v-for在vue1.x内置$index变量，在vue.2x移除了此变量，直接使用{{index}},例如

{{index}}

修改数据

直接修改数组可以改变数据

不能直接改变数组的情况

1.vm.items[0]={},这种情况下无法修改，解决：vm.item.$set(0,{})或者vm.$set("item[0]",{})

2.vm.item.length=0

v-for遍历对象，可以使用（key,value）的形式自定义key变量。

   {{key}}:{{vue}}

注意：在vue1.x内置`$key`变量，在vue.2x移除了此变量，直接使用`{{key}}`

template标签

用来作为模板渲染的跟节点，但是渲染出来不存在此节点

事件绑定与监听

v-on可以绑定实例属性methods中的方法作为事件的处理器，v-on:后面可以接受所有的原生事件名称。

简写 @:

可以绑定methods函数，也支持内联js，但是仅限一个语句。

绑定methods函数和内联js都可以获取原生dom元素，event.

绑定多个事件时，为顺序执行。

ui组件 饿了吗 使用指南

安装

npm install cnpm install element-ui --save-dev

引入文件main.js

import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
Vue.use(ElementUI, { size: "small" })

使用

在components文件夹下新建一个页面，从饿了吗找到自己喜欢的组件，比如走马灯 Carousel.vue 把代码复制到这个页面

在需要的此组件的文件下，比如APP.vue里

import Carousel from "./components/Carousel"
export default {
  name: "app",
  components: {  //components加s
    Carousel: Carousel
  }
}

在模板里载入组件

这样就可运行了

自定义组件

例如我想在加一个导航组件名字叫做headerBar,我在components里加一个文件叫做headerBar.vue：

使用：
在App.vue中需要先导入这个组件，再注册这个组件，最后使用它