2020-10-27 Vue基础笔记（1）

最新推荐文章于 2024-10-16 16:26:58 发布

_blacksunligjt

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量121

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/blacksunlight/article/details/109319609

版权

Vue基础

Vue简介

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

第一个Vue程序

Vue官网对新手及其友好，因为作者尤雨溪是中国人QvQ

操作顺序：

引入开发版本的Vue.js

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

创建Vue实例对象，设置el属性和data属性，使用简介的模板语法将数据渲染到页面上。

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

用浏览器访问

Hello Vue!

第一个Vue程序已经完美运行了，但是没有什么很亮眼的操作，此时打开控制台修改app.message的值，发现上例也在更新，称之为响应式 ，作用就是将我们的数据和页面结构关联起来。
官方对此的解释是：

我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

el：挂载点

我们要解决三个问题

Vue实例的作用范围是什么？
el：是用来设置Vue实例挂载（管理）的元素，Vue会管理el选项命中的元素及其内部的后代元素。
是否可以使用其他的选择器？
类，以及标签选择器均可使用，黑马建议使用id选择器，因为在实际开发过程中，id选择器大多数都是唯一的。
是否可以设置其他的dom元素？
只能支持双标签，不支持单标签，但也不是所有的双标签都支持，例如：body标签

data数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据（对象，数组）
渲染复杂类型数据时，遵守javaScript的语法

本节小练习

<body>
  <div id="my_info">
    <span>my_sex:{{message.sex}}</span>
    <h2>my_name:{{message.name}}</h2>
    <h2>my_age:{{message.age}}</h2>
    <ul>
      <li>{{message.school[0]}}</li>
      <li>{{message.school[1]}}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
  el: '#my_info',
  data: {
    message:{
      name:'blacksunlight',
      age:'20',
      sex:'boy',
      school:["PK","MIT"]
      } 
  }
})
</script>
</body>