vue.js 怎样引入到 html 中? 下面本篇文章给大家介绍一下在 HTML 中引入 vue.JS 的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
对于没有接触过 es6 和 webpack 的童鞋来说, 不建议直接用官方的脚手架 vue-cli 构件项目.
先按文档顺序最少学习完组件那一章. 直接在 HTML 文件中引入 vue.JS 开始学习, 了解 vue 的基础指令, 和整个 vue 实例的基础架构.
下载 vue.JS 地址: https://vuejs.org/v2/guide/installation.html, 下载完之后在 HTML 中加入 vue.JS 包.
<script src="${path}/web/constant/vue.js"></script>
在当前 HTML 中, 写入 JS 代码:
- <script type="text/javascript">
- new Vue({
- el: '#app',
- data: {
- message: 'hello vue.js.'
- }
- });
- </script>
HTML 中, 加入如下代码:
- <h1>
- Vue demo
- </h1>
- <div id="app">
- <div>
- {{message}}
- </div>
- <input type="text" v-model="message">
- </div>
修改文本框中的内容, 可以看到文本框上方的内容也在相应改变; 这就是 vue 的双向绑定.
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17185.html