vue基础

1.vue简介

1. vue是一个JavaScript框架
2. 简化Dom操作
3. 响应式的数据驱动，页面同步更新

2.第一个Vue程序

步骤：

1. 导入Vue.js

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   

2. 创建Vue实例对象，设置el属性和data属性

  <script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello vue!"
        }

    })
    </script>

3. 使用简洁的模板语法把数据渲染到页面上

  <div id="app">
      {{message}} 
   </div> 

3.el：挂载点

• el是干嘛的？

  设置vue挂载的元素

• vue实例的作用范围？

  el命中元素及其后代元素

• 是否可以使用其他的选择器？

  可以，但建议使用id

• 是否可以设置其他dom元素？

  可以使用其他的双标签，不能使用html和body

4.data数据对象

1. Vue 中用到的数据定义在data中
2. data可以写复杂类型数据
3. 渲染复杂类型数据时，遵守js语法

<div id="app">
      {{message}} 
      <h2>
          {{school.name}}
          {{school.mobile}}
      </h2>
      <ul>
          <li>{{campus[0]}}</li>
          <li>{{campus[1]}}</li>
      </ul>
   </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   

    <script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello vue!",
            school:{
                name:"清华",
                mobile:"123-23456"
            },
            campus:["北京校区","深圳校区"]
        }

    })
    </script>