java1234开源博客系统
博客信息

vue HelloWorld实现

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

打开webstorm,新建项目

我们这里用vue 2.6版本;


我们做一个效果:

GIF.gif


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


这里 核心就是 ViewModel 里面有DOM监听以及数据绑定,View是页面数据展示  Model也就是前面data里定义的,通过Vue来实现各种快捷功能,我们用普通js写的话 得写一大串Js代码;


mvvm设计模式  这里的 

第一m是 model 也就是vm的data属性   

第二个v是 view 视图 网页模版

最后vm就是中间vue的 viewmodel 代码体现就是vm对象或者vm实例;



关键字:   vue     helloWorld  
关注Java1234微信公众号
博主信息
Java1234_小锋
(知识改变命运,技术改变世界)
Powered by Java1234 V3.0 Copyright © 2012-2016 Java知识分享网 版权所有