Vue 2020/4/24

1.什么是Vue

1.遵守JavaScript框架
2.简化Dom操作
3.响应式数据驱动
https://cn.vuejs.org/ Vue官网

2.第一个Vue程序

引入Vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

前者适合学习时使用

• 导入开发版本的Vue.js
• 创建Vue实例对象,设置el属性和data属性
• 用间接的模板语法将数据渲染到页面上

{{}}为插值表达式：插值表达式内填入data里面的变量即可在页面取到变量值{{ data里的变量 }}

3.el属性：挂载点

• 获取Vue实例关联的DOM元素 。
• el命中的元素内部可以任意嵌套。
• 可以使用其他选择器，但建议使用id选择器，其他选择器可能不好控制
• 支持双标签，不支持单标签。（不支持HTML和BODY)

4.data属性:数据对象

• Vue中所需的数据定义在data属性中
• data中可以写复杂数据类型
• 渲染复杂数据类型时，遵守js的语法即可

data:{
        message:"Hello Vue!",
        person:{
          name:"hyh",
          school:"jnu",
          habits:["lol","rap music","Variety Show"]
        }
      }

<div id="app">
    {{message}}
    <h1>{{person}}</h1>
    <h2>{{person.name}}</h2><h2>{{person.school}}</h2>
    <ul>
      <li>{{person.habits[0]}}</li>
      <li>{{person.habits[1]}}</li>
      <li>{{person.habits[2]}}</li>
    </ul>
  </div>

效果：