初见Vue

Posted yunche

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初见Vue相关的知识,希望对你有一定的参考价值。

一、What

官方定义:是一套用于构建用户界面的渐进式框架。这,what?不明觉厉,我反正现在还是不知道,在这之前,就只知道Vue.js是用来渲染数据的,其实它的核心库只关注视图层。不多说,用多了就知道了。

二、How

因为Vue.js本身就是javascript脚本,那么要使用它,就必须要引入。可以使用在线的方式引入,这里选择使用NPM包管理器下载到本地,然后再引用。

命令如下:

npm init -f # 初始化一个含有package.json的空项目
npm install vue # 安装vue 

然后就将vue的所有脚本下载了下来,vue结构如下:

lichen-pc% ls node_modules/vue
dist  LICENSE  package.json  README.md  src  types

三、Do Now

<!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>Document</title>
</head>
<body>
    
    <!-- 3.数据渲染根元素-->
    <div id="app">
     msg  <!-- 插值模板语法 -->
    </div>
    <!-- 1.引入vue-->
    <script type="text/javascript"  src="../node_modules/vue/dist/vue.js">
    </script>

    <!-- 2.创建实例化vue对象-->
    <script type="text/javascript">
    
    // new出vue对象
    new Vue(
        el: "#app", // 数据渲染的目标根元素
        template: ``, // 模板(可选)
        // 从服务端接收到的数据
        data: function() 
            // 模拟出服务端返回的数据
            return 
                msg: 'Hello Vue'
            
        
    );
    </script>
</body>
</html>

在浏览器中打开该HTML页面,就会发现数据成功渲染了。

以上是关于初见Vue的主要内容,如果未能解决你的问题,请参考以下文章

ruoyi前后端分离版学习001--初见

初见Python基础语法_人生若只如初见

初见Python运算符_人生若只如初见

python人生如初见之初见yield

人生若只如初见,何事秋风悲画扇?

Netty初见