Vue 安装

VUE

创建时间:2019-11-30 11:44

字数:321 阅读:

VUE安装

方式一，CDN直接引入

方式二，NPM安装

实例 hello world

VUE安装

方式一，CDN直接引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二，NPM安装

在终端中执行下面命令

# cd 到你项目所在的目录
$ cd vue-01-core
# 快速初始化当前项目
$ npm init -y 
# 安装2.6.10版本
npm install vue@2.6.10

1 2	<!-- html中引入 --> <script src="./node_modules/vue/dist/vue.js"></script>

实例 hello world

示例：当input框输入任何内容就会直接显示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app01">
        Hello, {{ msg }} <br/>
        <!-- v-model进行数据双向绑定 -->    
        <input type="text" v-model="msg">

    </div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app01", //指定被管理VUE的入口，el其实是一个标签选择器，可以选择其他元素标签，但是不允许选择body，html
        data: { //初始化数据
            msg: 'World'
        }
    })
</script>
</body>
</html>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com