vue2.0学习
2019-01-07 本文已影响0人
M_JavaScript
关于mvvm/mvc/mv*框架的理解:
前端关于此类框架更加贴近于后端编程模式,使代码功能清晰,也更便于理解;
此类框架中用户对View的操作交给了Controller处理,在Controller中响应View的事件调用Model的接口对数据进行操作,一旦Model发生变化便通知相关视图进行更新。
对于vue的mvc处理过程:
mvc.png
1.引用
<script src="js/vue2.5.js" type="text/javascript" charset="utf-8"></script>
2.简单实例
html代码块:
<div id="app">{{ msg }}</div>
//绑定数据用{{}}
js代码块:
var vm = new Vue({
el: '#app',
//表示new Vue实例所要控制的区域(代码生效区域)
data:{
//存放所有用到的数据
msg:'vueDemo'
//不用操作DOM就可以将数据渲染到页面中,通过vue指令
}
})
3.解决闪烁问题:
html标签加v-cloak属性;在css中定义[v-cloak]{display:none}
4.关于属性的绑定:
<input type="button" v-bind:value="val">
data:{
val:'按钮'
}
简写:
<input type="button" :value="val">
这里v-bind将val当变量处理,所以可以拼接字符串等 “val + 'aaaa'”
注意:v-bind不能双向数据绑定,想要实现数据双向绑定用‘{{}}’
.......未完待续