vue实例与容器之间的关系

vue实例与容器之间是一一对应的关系，每个实例只能被一个容器接管

模板语法

• 插值语法：
  • 功能：用于解析标签体内容（一对标签中间夹杂的内容）
  • 写法：{{ xxx }} , xxx 是 js 表达式，且可以直接读取到 data 中 的所有操作
• 指令语法：
  • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）
  • 举例：v-bind:herf=“xxx” 或 简写为 :herf=“xxx”, xxx同样要写 js 表达式且可以直接读取到data中的所有属性
  • 备注：vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举例说明

数据绑定的两种方式

• 单向数据绑定（v-bind）：数据只能从data流向页面
• 双向数据绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
  注：
  1. 双向绑定一般都应用在表单类元素上（如：input、select等）
  2. v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

el 和 data 的两种写法

• el 的两种写法：
  （1）new Vue时候配置 el 属性
  （2）先创建Vue实例，随后再通过 vm.$mount(’#root’)指定 el 的值
• data有两种写法
  （1）对象式
  （2）函数式
  选择：在使用Vue组件时，data必须使用函数式，否则会报错
• 注意一个重要的原则：
  由Vue管理的函数，一定不要写箭头函数，由于箭头函数没有自己的this，一旦写了箭头函数，this就不再是Vue实例了