vue中渲染对象中属性时显示未定义_Vue全解

一.Vue实例

内存图：

1.把Vue的实例命名为vm，vm对象封装了对视图的所有操作包括 数据读写、事件绑定、DOM更新
2.vm的 构造函数是Vue，按照ES6的说法vm所属的类是Vue
3.options是new Vue的参数一般称为 选项或 构造选项

1.options里面有什么

• 英文文档搜options中文文档搜选项即可得相关所有文档
• options的五类属性

★数据： data, props,propsData, computed, methods, watch
★Dom： el，template,render,renderError
★生命周期钩子：beforeCreate, created,beforeMount, mounted,beforeUpdate, updated, activated, deactivated,beforeDestroy, destroyed,errorCaptured
★资源： directives,filters, components
★组合：parent, mixins,extends,provide,inject
★其他

template（HTML模板）语法：

1. 展示内容：

表达式

★{ { object.a }}表达式

★{ { n+1 }}可以写任何运算符

★{ { fn(n) }}可以调用函数

★如果值为undefined或者null就不显示

★另一种写法为<div v-text="表达式"></div>

HTML内容

★假设data.x的值为<strong>hi</strong>

★<div v-html="data.x"></div>即可显示粗体的hi

我就想展示{ { n }}

★<div v-pre>{ { n }}</div>

★v-pre不会对模板进行编译

2.绑定属性：

★绑定src：<img v-bind:src="x"/>

★v-bind：简写为：<img :src="x"/>

★绑定对象：
<div :style="{border:'1px solid red',height:100}"</div>
//注意这里把'100px’写成100

3.绑定事件：

★v-on:事件名

<button v-on:click="add">+1</button>//点击之后，Vue会运行add()
<button v-on:click="xxx(1)">xxx</button>//点击之后，Vue会运行xxx(1)
<button v-on:click="n+=1">xxx</button>//点击之后，Vue会运行n+=1
//即发现函数就加括号调用之，否则直接运行代码

★缩写

<button @click="add">+1</button>//正常人都用缩写

4.条件判断：

★if...else

<div v-if="x>0">x大于0</div>
<div v-else-if="x===0">x等于0</div>
<div v-else>x小于0</div>

5.循环：

★for(value,key) in 对象或数组

<ul>
<li v-for="(u,index) in users" :key="index">
索引：{
    {index}} 值{
    {u.name}}
</li>
</ul>
<ul>
<li v-for="(value, name) in obj" :key="name">
属性名：{
    {name}} 属性值：{
    {value}}
&l