在Chrome浏览器中安装vue-devtools调试工具

了解vue是什么

vue的两个特性

vue框架的特性，主要体现在如下两方面:

数据驱动视图
双向数据绑定

MVVM

vue的版本:

vue基础用法——初步使用vue

基本使用步骤:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
  <!-- 希望Vue能够控制下面的这个div，帮我们在把数据填充到div内部 -->
  <div id="app">{{ username }}</div>

  <!-- 1.导入vue文件，在window全局就有了Vue这个构造函数-->
  <script src="./lib/vue-2.6.12.js"></script>
  <!-- 2.创建Vue的实例对象-->
  <script>
    // 创建Vue的实例对象
    const vm = new Vue({
        // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
        el: '#app',
        // data对象就是要渲染到页面上的数据
        data: {
            username: 'zhangsan'
        }
    })
  </script>
</body>
</html>

vue基础用法——体验vue调试工具和数据驱动视图

基本代码与MVVM的对应关系:

vue基础用法——内容渲染指令

指令的概念

内容渲染指令

v-text:

{{}}:

v-html:

vue基础用法——el属性的使用注意点

vue基础用法——属性绑定指令

属性绑定指令

插值表达式{{}}只能用在元素的内容节点中，不能用在元素的属性节点中!

在vue中，可以使用v-bind:指令，为元素的属性动态绑定值；简写是:

<div id="app">
    <input type="text" v-bind:placeholder="tips">
    <input type="text" :placeholder="tips">
    <img v-bind:src="photo" alt="图片" style="width: 150px">
    <img :src="photo" alt="">
</div>