模板语法、数据绑定、el和data的两种写法

2021-10-08

模板语法

Vue模板语法有2大类:

1、插值语法
- 功能：用于解析标签体内容
- 写法: ，xxx是js表达式，可以直接读取到data中的所有属性(插值语法中可以直接读取vm上的属性)
2、指令语法
- 功能：用于解析标签(包括：标签属性、标签体内容、绑定事件…)
- 举例: v-bind:href="xxx" 或简写 :href="xxx", xxx同样要写js表达式

数据绑定

Vue中有两种数据绑定的方式：

1、单向绑定(v-bind):数据只能从data流向页面
2、双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data

v-model只能用于表单类元素上(用于用户交互)
简写:

(1). v-bind:href="xxx" ==> :href="xxx"
(2). v-model:value="xxx" => v-model="xxx"
v-model:value可以简写成v-model,因为v-model默认收集的就是value值

el和data的两种写法

1、el有2种写法
(1).new Vue时候配置el属性
(2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
2、data有2种写法
(1).对象式
(2).函数式
如果使用组件时，必须使用函数式，否则会报错
3、一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
原理：箭头函数没有自己的this,在它内部使用this会执行父级作用域所在的环境

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置：

  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

勤奋的代码搬运工<br>一位刚出来实习的前端程序员<br>谢谢大家