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:'按钮'
}

1.png
简写:<input type="button" :value="val">
这里v-bind将val当变量处理,所以可以拼接字符串等 “val + 'aaaa'”
注意:v-bind不能双向数据绑定,想要实现数据双向绑定用‘{{}}’
.......未完待续
上一篇下一篇

猜你喜欢

热点阅读