vuejs学习
标签：
1遇见vuejs 第一个HelloWorld程序 <div id="didi-navigator"> <ul> <li v-for="tab in tabs">{{ tab.text}}</li> </ul> </div> new Vue({ el:'#didi-navigator', data:{ tabs:[ {text:'巴士'}, {text:'快车'}, {text:'专车'}, {text:'顺风车'}, {text:'出租车'}, {text:'代驾'} } }); 2数据绑定 2.1语法 2.1.1插值 <span>Text:{{text}}</span> //替换text <span>Text:{{*text}}</span> //只渲染一次，不再发生后续变化 <span>Text:{{{text}}}</span> //将text当作字符串来处理 <li data-id='{{id}}'></li> //可以放在HTML标签内 2.1.2表达式 {{example | toUppercase}} //管道 2.1.3指令 2.2分隔符 //配置分隔符 //1.delimiters Vue.config.delimiters=["<%","%>"]; //2.unsafedelimiters或者HTML插值 Vue.config.unsafedelimiters=["<$","$>"]; 3指令 3.1内部指令 3.1.1v-if 3.1.2v-show 3.1.3v-else 3.1.4v-model 双向数据绑定number 将用户的输入转为Number类型
lazy
debounce 延时
3.1.5v-for触发数组更新观察的的变异方法：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
$set
$remove
3.1.6v-text 3.1.7v-html 3.1.8v-bind在绑定class或style时，支持其他类型的值，如数组或对象。
没有参数时，可以绑定到一个对象。此时class和style绑定不支持数组和对象（对象key会转化为小写）
//在绑定prop时，prop必须在子组件中声明 <my-component :prop="something"></my-component> //双向绑定 <my-component :prop.sync="something"></my-component> //单词绑定 <my-component :prop.once="something"></my-component> //将绑定的特性名字转换为驼峰命名 <my-component :prop.camel="something"></my-component> 3.1.9v-on用于绑定事件监听器 <!--内联语句--> <button v-on:click="doThat('hello',$event)"></button>v-on后面不仅可以跟参数，还可以增加修饰符：
.stop调用event.stopPropagation()
.prevent调用event.preventDefault()
.capture添加事件侦听器使用capture模式
.self只当事件从侦听器绑定的元素本身触发时才出发回调
.{keyCode|keyAlias}只在指定按键上触发回调
3.1.10v-ref在父组件上注册一个子组件的索引，便于直接访问。不需要表达式，必须提供参数id。可以通过父组件的$refs对象访问子组件。
v-ref和v-for一起使用时，注册的值将是一个数组。
通过所属实例的$els访问这个元素。可以用v-el:some-el设置this.$els.someEI
3.1.12v-pre编译时跳过当前元素和它的子元素。可以用来显示原始Mustache标签。跳过大量没有指令的节点便会加快编译
3.1.13v-cloakv-cloak这个指令保持在元素上直到关联实例结束编译。当和[v-cloak]{display:none}一起使用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕，否则在渲染页面时，有可能用户会先看到Mustache标签，然后看到编译后的数据。
3.2自定义指令 3.2.1基础vuejs用Vue.directive(id,definition)方法注册一个全局自定义指令，它接受两个参数：指令ID与定义对象。也可以用组件的directive选项注册一个局部自定义指令。
1.钩子函数
bind——只调用一次，在指令第一次绑定到元素上时调用
update——在bind之后立即以初始值为参数第一次调用，之后每当绑定值变化时调用，参数为新值与错值
unbind——只调用一次，在指令从元素上解绑时调用
2.指令实例属性
所有的钩子函数都将被复制到实际的指令对象中，，在钩子内this指向这个指令对象。这个指令对象暴露了一些有用的属性：
el——指令绑定的元素
vm——拥有该指令的上下文viewModel
expression——指令的表达式，不包括参数和过滤器
arg——指令的参数
name——指令的名字，不含前缀
modifiers——一个对象，包含指令的修饰符
descriptor——一个对象，包含指令的解析结果
3.对象字面量
4.字面修饰符
当指令使用了字面修饰符.literal，它的值将按普通字符串处理并传递给update方法。update方法将只调用一次，因为普通字符串不响应数据变化
5.元素指令
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/41694.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")