一、Vue.js快速入门-Vue基础

今天药忘吃喽~ 2021-09-25 14:24 410阅读 0赞

# Vue基础 #

## 01-基本介绍 ##

1.  学前需掌握HTML,CSS,JavaScript,AJAX基础知识
2.  选择开发工具（VSCode或者Webstorm）（用过IDEA上手Webstorm会更快）

## 02-Vue简介 ##

1.  JavaScript框架
2.  简化Dom操作
3.  响应式数据驱动

官方文档-[Vue.js][]

## 03-第一个Vue程序 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Vue基础</title>
    </head>
    
    <body>
      <div id="app">
        {
       { message }}
      </div>
      
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
        var app = new Vue({
          el:"#app",
          data:{
            message:" 你好 程序员! "
          }
        })
      </script>
    </body>
    
    </html>

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

### el：挂载点 ###

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

var app = new Vue({
                el:"#app",
                data:{
    	            message:"程序员"
                }
            })

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

### data：数据对象 ###

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

var app = new Vue({
                el:"#app",
                data:{
    	            message:"程序员",
                }
            })

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

[Vue.js]: https://cn.vuejs.org