vuejs学习
Posted 千里之行_始于足下
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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一起使用时，注册的值将是一个数组。
3.1.11v-el
通过所属实例的$els访问这个元素。可以用v-el:some-el设置this.$els.someEI
3.1.12v-pre
编译时跳过当前元素和它的子元素。可以用来显示原始Mustache标签。跳过大量没有指令的节点便会加快编译
3.1.13v-cloak
v-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.对象字面量
//如果指令需要多个值，则可以传入一个javascript对象字面量。
<div id="demo" v-demo="{color:'white',text:'hello'}"></div>
<script>
Vue.directive('demo',function(value){
console.log(value.color);
});
</script>4.字面修饰符
当指令使用了字面修饰符.literal，它的值将按普通字符串处理并传递给update方法。update方法将只调用一次，因为普通字符串不响应数据变化
5.元素指令
<body id="demo">
<my-directive class="hello" name="hi"></my-directive>
</body>
<script>
Vue.elementDirective('my-directive',{
bind:function(){
console.info(this.el.className);
console.info(this.el.getAttribute("name");
}
});
</script>
var demo= new Vue({
el:'#demo',
});3.2.2高级选项
3.3内部指令解析
3.4常见问题解析
4计算属性
4.1什么是计算属性
var vm = new Vue({
el:'#example',
data:{
didi:'didi',
family:'family'
}
computed:{
didiFamily:{
get:function(){
//一个计算属性的getter
return this.didi+' '+this.family;
},
set:function(newVal){
//一个计算属性的setter
var names = newVal.split(' ');
this.didi=names[0];
this.family=names[1];
}
}
}
});4.2计算属性缓存
计算属性提供了缓存开关
computed:{
example:{
cache:false,
get:function(){
return Data.now()+this.welcome;
}
}
}4.3常见问题
4.3.1计算属性getter不执行的场景
//当包含计算属性的节点被移除且模板中其他地方没有再引用该属性时，那么对应的计算属性的getter方法不会执行
<div>
<button @click='toggleShow'>Toggle Show Total Price</button>
<p v-if="showTotal">Total Price = {{totalPrice}}</p>
</div>4.3.2在v-repeat中使用计算属性
5表单控件绑定
5.1基本用法
5.1.1text
<span>{{ span }}</span>
<br>
<input type="text" v-model="name" placeholder="join DDFE"></input>5.1.2checkbox
//复选
<input type="checkbox" id="flash" v-model="bizLine">
<label for="flash">快车</label>
<input type="checkbox" id="premium" v-model="bizLine">
<label for="premium">专车</label>
<input type="checkbox" id="checkbox" v-model="bizLine">
<label for="bus">巴士</label>new Vue({
el:'...',
data:{
bizLine:[]
}
});5.1.3radio
<input type="radio" id="flash" v-model="bizLine">
<label for="flash">快车</label>5.1.4select
<select v-model="bizLine">
<option selected value="falsh">快车</option>
<option value="premium">专车</option>
<option value="bus">巴士</option>
</select>
<span>selected:{{ bizLIne }}</span>5.2值绑定
在通常情况下，通过v-model绑定的值都是字符串，checkbox可能是布尔值。绑定表单控件的value为某个属性值。
1.checkbox
\单个checkbox
<input type="checkbox" v-model="toggle"2.radio
<input type="radio" v-model="pick" :value="a"></input>3.select
<select v-model="selected">
<option :value="{number:123}">123</option>
</select>5.3v-model修饰指令
5.3.1lazy
默认情况下，v-model在input事件中同步输入框的值与数据，可以添加一个lazy特性，从而改到chang事件中去同步。
<input v-model="msg" lazy><br/>
{{msg}}5.3.2debounce
设置一个最小的延时，在每次敲击之后延时同步输入框的值到Model中。如果每次更新都要进行高耗操作，它较为有用。
<input v-model="msg" debounce="500“>5.3.3number
将用户输入同步到model中的时候转换为数值类型，如果转换结果为NaN，则对应的Model值还是用户输入的原始值
<input v-model="age" number>5.4修饰指令原理
6过滤器
以上是关于vuejs学习的主要内容，如果未能解决你的问题，请参考以下文章