vue渐进式开发的理解和指令

1.vue渐进式开发

vue是一个渐进式的框架，轻量，易于上手，为啥是渐进式那，我当时也很蒙，比如的官网是jquery写的，就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或者是通过http引入官网的代码。如下，

 

 

 

 

 

 

 然后在body下面写个script或者单独写个js文件引导这个页面。el属性是这个页面的根节点，里面的data就可以随便定义了。

 

 

 使用vue里的数据就跟平常一样，{{变量名}}，  v-for渲染数组或者对象就ok了。这就是最简单的vue的渐进式开发，不需要借助vue脚手架。并且一些静态数据比较多的话，

 还是比较适合的。这是我对vue渐进式开发的理解，后面如果项目大，就可以npm install vue vuex了。

2.vue的一些基本指令，语法：v-指令名

v-text 只能解析文本，解析出来的文本作为标签的内容展示 =={{}}

v-html 解析标签

v-bind ：属性名 //绑定动态属性 简写 ：属性名

属性名=“变量名”按字符串解析

：属性名=“变量名” 按变量解析

v-for

//循环对象

(value,key,index) in obj 

：key="唯一标识" 如index

第一个value是对象里面的每一项value值，第二个是对象里面的每一项的key,第三项下标；

//循环数组

（item,index,key）in list

第一个是数组里面的每一项 第二个是下标 第三个 没用

//循环数字

（item,index,key）in Number

第一个是从1开始的一个整数，第二个是下标，第三个没用

v-show ="true"展示或隐藏 ===>style="display:none;"或display:block;

v-on:eventname=""//绑定事件 简写@eventname 

eventname(click,keyup input change)

@eventname.修饰符

prevent 阻止默认事件的修饰符 @click.prevent

stop 阻止冒泡行为

self 只触发自身事件，不会触发其他元素 与冒泡类似

captrue 捕获阶段触发的

once 只触发一次

left 左键触发

rigth 鼠标右键触发

middle鼠标中建触发

keyCode/keyalias 键盘状态码/键盘别名