01: vue.js基本使用

1.1 npm安装教程

　　1、使用之前，我们先来掌握3个东西是用来干什么的

　　　　　　1. npm: Nodejs下的包管理器。
　　　　　　2. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
　　　　　　3. vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

　　2、下载安装　　

　　　　　　1. 下载node.js： https://nodejs.org/en/ （选择左边，不要选最新的）

　　　　　　2. 安装完成node.js后就会生成npm工具，安装完成后即可下载其他工具

　　　　　　3. 利用npm安装vue.js： npm install bower -g

　　　　　　4. 安装完成后会将文件下载到：D:\nodejs\node_global\node_modules 目录下

　　　　　　5. 我们使用vue.js时只需到 D:\nodejs\node_global\node_modules 文件夹下，复制 vue.js 只需在使用时引用即可

　　3、引入vue.js，基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <!-- 向容器中渲染新闻-->
    <div id="app">{{ msg }}</div>
    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">
        // 定义数据模型
        var data = {
            msg:"vue.js基本使用！！！"   // 使用的数据
        };

        // 定义视图模型
        var app = new Vue({
            // 绑定视图
            el:'#app',
            // 绑定模型
            data:data
        });
    </script>
</body>
</html>

vue.js基本使用

1.1 npm安装教程

3、引入vue.js，基本使用

猜你喜欢

　　3、引入vue.js，基本使用