zoukankan      html  css  js  c++  java
  • 初见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页面,就会发现数据成功渲染了。

  • 相关阅读:
    s3c6410_uboot中的代码重定位(nand->sdram)
    s3c6410_uart初始化及读写
    6410裸机开发教程下载
    s3c6410_时钟初始化
    linux device model简述
    CentOS安装flash player插件
    实例分析ELF文件动态链接
    581. Shortest Unsorted Continuous Subarray
    221. Maximal Square
    95. Unique Binary Search Trees II
  • 原文地址:https://www.cnblogs.com/yunche/p/11077433.html
Copyright © 2011-2022 走看看