Vue自学复习笔记--Vue2初始认识

Vue的学习需要有一定的html、js、css基础,建议学习一段时间的前置语言后再进行学习Vue

Vue2初始认识

  • Vue的使用包括两种
    1.js下载并引入或使用网络地址
    2.脚手架创建(后面详细介绍)
  • Vue的实例化
    1. 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
    2. root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
    3. root容器里的代码被称为【Vue模板】;
    4. Vue实例和容器是一一对应的;
    5. 真实开发中只有一个Vue实例,并且会配合着组件一起使用;
    6. {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
    7. 一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue初始认识title>
  
  <script src="../js/vue.js">script>
head>
<body>
  <div id="root">  
    <h1>{{a}}h1> 
  div>
    <h1>{{a}}h1> 
  <script>
    // 2.1创建Vue的示例对象 new Vue({...})
    new Vue({
      el:'#root', // 2.2 el:使用id命名的方法对一个html模块进行“监控”
      data:{ // 2.3  此处为数据的存放“仓库”
        a:1,
      }
    })
  script>
body>
html>

Vue自学复习笔记--Vue2初始认识_第1张图片
Vue自学复习笔记--Vue2初始认识_第2张图片

如有看不懂或错误请私信<0^0>

你可能感兴趣的:(vue.js,html)