您的位置：首页 > 产品设计 > UI/UE

vue.js之快速入门

2017-11-03 18:09 519 查看

vue的安装

安装先不详讲，先直接引入官方cdn

<script src="https://cdn.jsdelivr.net/npm/vue"></script>


数据驱动视图vue 实例

<!-- 这是我们的 View -->
<div id="app">
大量vue视频教程请加群：{{ name }}
</div>


<script type="text/javascript">
// 这是我们的 Model
let model = {
name: "347615774"
}

// 创建一个 Vue 实例或 "vm"
// 它连接 View 与 Model
let vm = new Vue({
el: '#app',
data: model
})
</script>


我们通过new Vue( )创建一个实例vm，参数是一个json对象，属性el提供一个在页面上存在的DOM 元素(id=’app’)，表明这个实例是关联指定的DOM节点。

页面渲染如下：



在此过程中，我们并没有写过操作DOM节点的代码，在MVVM模式中的viewModel充当着监控者的角色，假如它监控到model数据发生了变化，便会通知view视图进行更新，这个过程并不需要你去参与。

一旦name的值被改变了，页面上立马跟着发生了变化，而不需要你再写innerHTML去更新视图了



双向绑定

v-model用在表单控件上的，用于实现双向数据绑定，如果用在除了表单控件以外的标签是没有任何效果的。

<div id="app">
<input v-model="name"/></br>
大量vue视频教程请加群：{{ name }}
</div>
<script type="text/javascript">
let model ={
name: "347615774"
}

let vm = new Vue({
el: '#app',
data: model
})
</script>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航