vue.js初学入门教程（1）
|
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 0.MVVM什么是MVVM？就是Model-View-ViewModel。
ViewModel是Vue.js的核心，它是一个Vue实例。 不太懂也没关系，慢慢就懂了。 1.基础示例代码： <meta charset="utf-8"> <div id="didi-navigator"> <li v-for="tab in tabs"> {{ tab.text }} <script src="js/vue.js" type="text/javascript" charset="utf-8"> <script type="text/javascript"> new Vue({ el: '#didi-navigator',data: { tabs: [ { text: '巴士' },{ text: '快车' },{ text: '专车' },{ text: '顺风车' },{ text: '出租车' },{ text: '代驾' } ] } })
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。 · 定义View · 定义Model · 创建一个Vue实例或"ViewModel"，它用于连接View和Model 2.数据绑定2.1 插值 有时候只需渲染一次数据，后续数据变化不再关心，可以通过“*”实现： Text: {{*text}} 双大括号标签会把里面的值全部当作字符串来处理，如果值是HTML片段，则可以使用三个大括号来绑定： Logo: {{{logo}}} DDFE' 2.2 表达式 Mustache标签也接受表达式形式的值。 3.指令（上）v-if指令 v-show指令 v-else指令 v-for指令 v-bind指令 v-on指令 v-model指令 v-if：是否渲染。 v-show：肯定渲染，是否显示。 其中，v-show不支持 3.1 关于v-for 使用基础可参看。 补充： Vue.js增加了两个方法观测变化：$set、$remove。 3.1.1 应该尽量避免直接设置数据绑定的数组元素 因为这些变化不会被Vue.js检测到，因而也不会更新视图渲染。这时，我们可以使用$set方法：
$remove是splice的语法糖，用于从目标数组中查找并删除元素。
3.1.2 有时可能需要用全新对象来替换数组 Vue.js应尽可能地复用已有实例。如果没有唯一的键供追踪，则可以使用track-by=”$index”，它强制让v-for进入原位更新模式：片段不会被移动，而是简单地以对应索引的新值刷新。这时DOM节点不再映射数组元素顺序的改变，不能同步临时状态（比如元素的值），以及组件的私有状态。 因为js的限制，Vue.js不能检测到下面数组的变化： 直接用索引设置元素，如vm.items[0]={}。
修改数据的长度，如vm.items.length = 0。
前一个问题可用$set解决，后一个问题只需用一个空数组替换items即可。 3.1.3 v-for可以和vue.js提供的内置过滤器（filterBy）或排序（orderBy）数据一起使用 filterBy的例子： 当我搜破车的时候： orderBy的例子：
其他： v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。 v-model指令后面可以添加number、lazy、debounce参数。 Number可以将用户的输入转换为Number类型（如果原值的转换结果为NaN，则返回原值）。 在input中时添加lazy将数据改到在change事件中发生。 Debounce可设置延时。 参考：大神写的：《vue.js权威指南》 本文已被整理到了《》，欢迎大家学习阅读。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
