node vue项目开发之前后端分离实战记录

2020-06-17 07:05:41易采站长站整理

v-cloak 感觉没啥用
v-once新增内置指令,用于标明元素或组件只渲染一次。

模板渲染

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

eg:


<ul v-for="item in items">
<li>{{item.title}}</li>
<li>{{item.description}}</li>
</ul>

2、v-for内置$index变量,可以在调用v-for的时候调用,例如

<li v-for="(index,item) in items">{{index}}-{{$index}}</li>

3、修改数据

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

不能直接改变数组的情况

     1.

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

     2.

vm.item.length=0

4、v-for遍历对象,可以使用(key,value)的形式自定义key变量。


<li v-for="(key,value)" in objectDemo>
{{key}}---{{$key}}:{{vue}}
</li>

5、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
}
}

在模板里载入组件


<template>
<div id="app">
<Carousel></Carousel>
<img src="./assets/logo.png">