初探Vue.js-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43370373/article/details/118354092

@第一个vue程序
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue简介

JavaScript框架
简化Dom操作
响应式数据驱动

第一个Vue程序

<!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>
</head>
<body>
<!--导入vue.js 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <div class="app">
    {{message}}
  </div>
  <script>
  <!--创建实例，设置el挂载点属性和data数据对象属性，使用简洁的模板语法把数据渲染到页面上 -->
    var app = new Vue({
      el:'.app',
      data:{
        message:"hello vue!"
      }
})
    
  </script>
</body>
</html>

el:挂载点

<!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>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <p id="app">
{{message}}
</p>
<!--
<div id="app" class="app">
    {{message}}
    {{message}}
<span>{{message}}</span>
<p>{{message}}</p>
  </div>-->
  <script>
    var app = new Vue({
      //el:".app",
     //el:"#app",
      //el:"div",
      el:"#app",
      data:{
        message:"hello vue!"
      }
})
    
  </script>
</body>
</html>

Vue实例的作用范围是什么呢？

Vue会管理el选项命中的元素及其内部的后代元素

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

可以使用其他的选择器,但是建议使用ID选择器

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

可以使用其他的双标签,不能使用HTML和BODY

el是用来设置Vue实例挂载（管理）的元素；
Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器,但是建议使用ID选择器
可以使用其他的双标签,不能使用HTML和BODY

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>data</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 
 <div id="app" >
    {{message}}
  <h2>{{area.name}}{{area.tel}}</h2>
      <ul>
             <li>{{campus[0]}}</li>
              <li>{{campus[1]}}</li>
              <li>{{campus[2]}}</li>
              <li>{{campus[3]}}</li>
        </ul>
  </div>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        message:"今天也要加油哦!",
       area:{
        name:"晓恒",
        tel:"19095440021"
      },
     campus:["江苏","上海","杭州","深圳"]}
})
    
  </script>
</body>
</html>