前端-Vue.js

前端-Vue.js

  • 1、介绍
    • 1.1、什么是vue.js
    • 1.2、Vue入门程序
      • 1.2.1、创建文件夹vue
      • 1.2.2、在vue官网下载vue.min.js文件
      • 1.2.3、下载完成
      • 1.2.4、将vue.min.js引入项目文件夹
      • 1.2.5、创建 hello.html,引入vue.min.js
      • 1.2.6、第一个vue程序:
      • 1.2.7、运行
    • 1.3、创建vue代码片段,方便以后使用
      • 1.3.1、设置存放代码片段的文件名vue-html.code-snippets
      • 1.3.2、复制下方代码到vue-html.code-snippets文件中
      • 1.3.3、测试
  • 2、vue基本语法
    • 2.1、单向绑定v-bind
    • 2.2、双向绑定v-model
    • 2.3、绑定事件
    • 2.4、条件渲染
    • 2.5、列表渲染、循环渲染
  • 3、vue实例生命周期

1、介绍

1.1、什么是vue.js

在为 AngularJS 工作之后,Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分,构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内,Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时,在 JavaScript 框架/函数库中,Vue 所获得的星标数已超过 React,并高于 Backbone.js、Angular 2、jQuery 等项目。

Vue.js 是一款流行的 JavaScript 前端框架,目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层,同时,它也能方便地获取数据更新,实现视图与模型的交互。
官方网站:https://cn.vuejs.org

1.2、Vue入门程序

1.2.1、创建文件夹vue

前端-Vue.js_第1张图片

1.2.2、在vue官网下载vue.min.js文件

vue.min.js文件官网
前端-Vue.js_第2张图片

1.2.3、下载完成

在这里插入图片描述

1.2.4、将vue.min.js引入项目文件夹

前端-Vue.js_第3张图片

1.2.5、创建 hello.html,引入vue.min.js

前端-Vue.js_第4张图片

1.2.6、第一个vue程序:

<body>
    
    <script src="vue.min.js">script>

    
    <div id="app">
        
        {
    {message}}
    div>
    <script>
        //创建一个vue对象
        new Vue({
       
            el: '#app',     //绑定vue作用的范围
            data:{
                 //定义页面中显示的模型数据
                message:'hello vue!'
            }
        })
    script>
body>

1.2.7、运行

前端-Vue.js_第5张图片

这就是声明式渲染:Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
这里的核心思想就是没有繁琐的DOM操作,例如jQuery中,我们需要先找到div节点,获取到DOM对象,然后进行一系列的节点操作

1.3、创建vue代码片段,方便以后使用

文件 => 首选项 => 用户片段 => 新建全局代码片段文件

1.3.1、设置存放代码片段的文件名vue-html.code-snippets

前端-Vue.js_第6张图片

1.3.2、复制下方代码到vue-html.code-snippets文件中

{
    "vue htm": {
        "scope": "html",
        "prefix": "vuehtml",
        "body": [
            "DOCTYPE html>",
            "",
            "",
            "<head>",
            "    ",
            "    ",
            "    ",
            "    <title>Documenttitle>",
            "head>",
            "",
            "<body>",
            "    
", "", " div>", "

你可能感兴趣的:(医院挂号系统)