Vue快速入门

01-Vue快速入门-Vue的介绍

  • Vue是一套构建用户界面的渐进式前端框架。
  • 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合。
  • 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
  • 特点
    易用:在有HTMLCSSJavaScript的基础上,快速上手。
    灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
    性能:20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

02-Vue快速入门-Vue的快速入门

  • 开发步骤
  1. 下载和引入vue.js文件。
  2. 编写入门程序。
    视图:负责页面渲染,主要由HTML+CSS构成。
    脚本:负责业务数据模型(Model)以及数据的处理逻辑。
  • 代码实现

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>快速入门title>
    head>
    <body>
        
        <div id="div">
            {{msg}}
        div>
    body>
    <script src="js/vue.js">script>
    <script>
        // 脚本
        new Vue({
            el:"#div",
            data:{
                msg:"Hello Vue"
            }
        });
    script>
    html>
    

03-Vue快速入门-快速入门的升级

1.3、Vue快速入门详解

  • Vue 核心对象:每一个 Vue 程序都是从一个 Vue 核心对象开始的。

    let vm = new Vue({
     选项列表;
    });
    
  • 选项列表
    el选项:用于接收获取到页面中的元素。(根据常用选择器获取)。
    data选项:用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。
    methods选项:用于定义方法。方法可以直接通过对象名调用,this代表当前Vue对象。

  • 数据绑定
    在视图部分获取脚本部分的数据。
    {{变量名}}

1.4、Vue快速入门的升级


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门升级title>
head>
<body>
    
    <div id="div">
        <div>姓名:{{name}}div>
        <div>班级:{{classRoom}}div>
        <button onclick="hi()">打招呼button>
        <button onclick="update()">修改班级button>
    div>
body>
<script src="js/vue.js">script>
<script>
    // 脚本
    let vm = new Vue({
        el:"#div",
        data:{
            name:"张三",
            classRoom:"黑马程序员"
        },
        methods:{
            study(){
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }
    });

    //定义打招呼方法
    function hi(){
        vm.study();
    }

    //定义修改班级
    function update(){
        vm.classRoom = "传智播客";
    }
script>
html>

04-Vue快速入门-快速入门的小结

  • Vue是一套构建用户界面的渐进式前端框架。
  • Vue的程序包含视图和脚本两个核心部分。
  • 脚本部分
    • Vue核心对象。
    • 选项列表
      • el:接收获取的元素。
      • data:保存数据。
      • methods:定义方法。
  • 视图部分
    • 数据绑定:{{变量名}}

你可能感兴趣的:(Vue快速入门)