Vue框架学习-Vue基础

前言

本文是Vue框架学习的第一篇文章，Vue框架学习总共大概有4部分，本文从第一个部分Vue基础开始学习。
学习Vue之前最好对html，css以及JavaScript有基本的了解。
学习资料来源是B站的一个教学视频，我在文末会附上链接。

简介

1. JavaScript框架
   相比较于JQuery这样的JS库，Vue框架的功能更为强大，但是为了使用Vue，必须遵守一整套规则。
2. 简化DOM操作
   不再需要去获取元素，再进行操作，Vue自动实现这一功能。
3. 响应式数据驱动
   页面由数据来生成，当数据改变以后，页面会同步更新。

第一个Vue程序

安装

通过如下方式引入 Vue（导包）

1. 开发环境版本：
   适合学习阶段的编码使用，含有提示

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

2. 生产环境版本：
   速度很快，代码经过压缩，没有提示

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

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
html：

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

JavaScript：

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

浏览器中会显示 Hello Vue!

这第一个Vue小程序开发经历了三个步骤：

1. 导入开发版本的Vue.js
2. 创建Vue实例对象，设置el属性和data属性
3. 使用简介的模板语法把数据渲染到页面上

el：挂载点

el是用来设置Vue实例挂载（管理）的元素。

Vue实例的作用范围：
Vue会管理el选项命中的元素及其内部的后代元素

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

选择器：
只有div内部的message会显示，这里使用的默认的id选择器。
id选择器：el:"#app"
class选择器：el:".app"
标签选择器：el:"div"
效果都一样，但是推荐使用id，因为是唯一的，不会出现语义分歧。
dom元素：
除了body和html这两个标签，别的都可以作为el挂载点，建议使用div。

data：数据对象

data的类型可以是数组，可以是对象。
array:[]
ojb:{}

    <div id="app">
        {
    { message }}
    div>
    <script>
        var app = new Vue({
      
            data: {
      
                message: "Hello Vue!",
                school:{
      
                    name: "schoolname",
                    mobile: "12345678"
                },
                campus:["A","B","C","D"]
            }
        })
    script>

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

小结

第一部分Vue基础就到这里结束了，学到这里基本上对Vue有了个大概的认识，并且知道如何使用了，下一部分就要开始学习一些本地应用的知识以及案例练习。

视频链接