目录
-
Vue的前世今生
-
实例化参数
-
指令
Vue前世
Vue 框架诞生于2014年,他的作者为中国人–尤雨溪(江苏无锡人)。Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架,该框架遵循CMD规范,并且提供的设计模式为MVVM模式。发展至今已经有诸多版本,目前推荐使用比较稳定的1.0.24版本
Vue今生
什么是Vue?Vue是一套用于构建用户界面的渐进式框架.提到Vue就不得不提前端框架的三驾马车:angular 谷歌公司,react Facebook,Vue 尤雨溪.这三种框架都有不同的特性,如要一教高下的话也只能说是伯仲之间,各有千秋.以我目前的能力我还不能将三种框架的特性聊的十分透彻,在这里只能浅谈一下之所以选择Vue的原因:
首先作为一名中国人,选择Vue存在一些主观因素,我觉得这无可厚非.然后我们来谈谈Vue的诸多有点:1.不存在依赖关系 2.轻便(25 + gzip 72k min) 3.适用范围广 4.学习成本低,语法升级平滑 5.双向数据绑定(所见即所得) 6.语法简洁.
实例化参数
new Vue({
el:"#app", //指定模板数据
data:{
msg:"你好vue", //指定数据
msg2:"左右重装你好",//指定数据
}
})
指令
什么是指令?
指令:指令的值是可以是简单的javascript命令
文本渲染指令:
{{}} |
v-text |
v-html |
属性绑定:
v-bind:属性="指令值"
简写: :属性="值"
条件渲染:
v-if |
v-else-if |
v-else |
v-show |
条件渲染的小建议:假如频繁使用切换的话建议用v-show
一次性切换用v-if
条件渲染的区别:v-show隐藏是通过css的方式隐藏节点
v-if是注释掉
列表渲染:
v-for="item in list" //list是遍历的数组 //item当前遍历的项目
v-for="(item,index) in list" //index当前遍历项的索引 从0开始
事件指令:
v-on:click="say()" | v-on:事件类型="响应函数" |
@click="say()" | 事件的简写 |
@click="num++" | 行内事件响应 |
事件修饰符:
.stop | 阻止事件冒泡 |
.prevent | 阻止默认事件 |
.once | 只执行一次 |
总结
我对于Vue的了解目前还只是冰山一角,但我已经深深的爱上了Vue(此处应有呕吐).综上所述,Vue真的是太神奇了,我会在Vue的探索道路上奋勇向前,”一去不复返”