当前位置:首页 > 前端开发 > Vue第二篇之在HTML中引入Vue.js,快速使用Vue

Vue第二篇之在HTML中引入Vue.js,快速使用Vue

7个月前 (05-20)60

对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目。

先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。

下载vue.js  地址:https://download.csdn.net/download/qq_31122833/10723310,下载完之后在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的双向绑定。

作者:小达哥的垃圾桶
来源链接:https://blog.csdn.net/qq_31122833/article/details/83070050

标签: vue

“Vue第二篇之在HTML中引入Vue.js,快速使用Vue” 的相关文章

搭建vue开发环境的步骤

搭建vue开发环境的步骤

相信很多人在刚开始学习vue这个框架的时候,最开始搭建开发环境的时候,都会遇到一些大大小小的坑,我之前学习angular的时候搭建过一次,过了一个月后再搭建第二次的时候,竟然有一些混乱,...

Vue的概述

Vue 一.概述 【1】vue是什么? 第三方开发的 基于MVVM设计模式的 渐进式的:可以逐步在项目中使用v...

VUE3 VUE-DEVTOOLS 安装

VUE3 VUE-DEVTOOLS 安装

VUE3 Vue-Devtools 正确安装,亲测有效 写在前面 正确的安...

Vue使用总结

Vue使用总结

       新建立的了一个交流群,欢迎在工作的开发者,尤其是VUE和小程序的同志们 771402271 好久没更新博客,确实是自...

Vue框架介绍

Vue框架介绍

Vue框架介绍   1.MVVM 1.1 什么是MVVM MVVM(Model-View-ViewModel)...

Vue定义常量、常量使用

Vue定义常量、常量使用

项目开发中常量的定义和使用都是广泛的 就比如说正则表达式等等 直接上码 有限创建存放常量的文件目录 (名字自拟) partten.js 文件用于存...

Vue—new Vue()

Vue—new Vue()

1.new Vue()创建一个新的 Vue 实例 2.el挂在原色 el绑定的元素内,都是Vue的作用范围...

VUE详解

VUE详解

JavaWeb项目前后端分离         前后端分离已成为...

Vue概述及入门

Vue概述及入门

vue概述及入门 Vue的基础认识 官网 https://cn.vuejs.orgl 介绍描述...

VUE中函数调用函数

VUE中函数调用函数

VUE中函数调用函数 VUE中函数调用函数 VUE中函数调用函数 有时候,需...