qqxu
5/8/2018 - 6:44 AM

vue

vue挂载点、实例和模板

vue

1 . 挂载点、实例和模板

挂载点:vue实例el属性对应的dom节点。 vue只处理挂载点的下的内容

模板:挂载点内部的内容, 模板可以挂载点内部,也可以写在vue实例template属性中。

template模板下 只能有一个根元素

实例: 指定挂载点,写好模板,vue会自动生成最终展示的内容,放在挂载点下。

  1. 数据、事件、方法 插值表达式

模板指令:v-text、v-html

绑定事件:模板指令:v-on

v-on: 可以简写成@


<div v-on:click="handleClick"></div>
<div @click="handleClick"></div>


方法写在实例的method对象里,

数据发生变化时,vue自动更新dom

  1. 属性绑定,双向数据 属性绑定:输入模板指令后,等号后面的内容就变成表达式, v-bind: 可以简写成 :

单向绑定:数据决定页面的显示,但是页面无法决定数据的内容

双向绑定:模板指定 v-model:

  1. 计算属性和侦听器

计算属性computed:一个属性,根据其他数据项计算出来的结果。

侦听器watch: 监测某个数据项或计算属性,一旦变化,侦听器中书写逻辑。

v-if : 控制dom存在与否 v-show: 控制dom显示与否 v-for: 控制一组数据,循环显示每项

  1. vue组件命名,应当小写,不要使用驼峰式命名
  1. 父组件注册子组件,
 components: {
     "item": item
    }
    
    // 可以简写成
 components: {
     item
    }