vue HelloWorld实现_Java开源博客系统-Powered by java1234

博客信息

vue HelloWorld实现

发布时间：『 2019-05-04 10:45』博客类别：Vue.js 阅读(5749) 评论(0)

打开webstorm，新建项目

我们这里用vue 2.6版本；

我们做一个效果：

Input输入框和下方文本同步，用vue来实现，核心原理是数据监听和双向绑定；

项目结果如下

QQ鎴浘20190504102849.jpg

这里有几点重要说明：

new Vue 我们创建了Vue对象；

el 指定了绑定DOM，接管DOM操作；

data：初始化数据，页面可以直接访问；

v-model 重点可以实现数据双向绑定，改变了这里的值，其他地方也根据改变；

{{xxxxx}} 显示数据；

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <p>{{message}}</p>
</div>
<script type="text/javascript" src="../js/vue2.6.js"></script>
<script type="text/javascript">
    // 创建vue实例
   var app=new Vue({
       el:'#app', // 绑定id=app的DOM
       data:{   //
           message:'vue.js大爷你好！'
       }
   })
</script>
</body>
</html>

核心原理mvvm；

QQ鎴浘20190504103952.jpg