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过滤器
7组件详解
7.1组件与复用
7.1.1为什么使用组件
使用组件的目的就是提高复用率
7.1.2组件用法
组件注册，有全局注册和局部注册两种方式
1. 全局注册
Vue.component('my-component',{
//选项
});
2. 局部注册，注册后的组件只在该实例作用域内有效
<script>
var Child={
template:'<div>局部注册组件的内容</div>'
}
var app= new Vue({
el:'#app',
components:{
'my-components':Child,
}
});
</script>
注意
1. <table>内规定只允许是<tr><td><th>等这些表格元素，这种情况可以用is属性来挂载组件
<table>
<tbody is="my-component"></tbody>
</table>
2.可以像Vue实例一样使用组件注册，但使用data时必须是函数，然后return出去
<script>
Vue.component('my-component',{
template:'<div>{{message}}</div>',
data:function(){
return {
message:'组件内容'
}
}
});
<script>
7.2使用props传递数据
7.2.1基本用法
1.使用
2.注意，如果要直接传递数字、布尔值、数组、对象，而且不食用v-bind，传递的仅仅是字符串
7.2.2单向数据流
1.子组件的作用域内任意修改父组件的初始值
2.prop作为需要被转变的原始值传入
7.2.3数据验证
可以在props使用对象写法，进行数据验证
7.3组件通信
7.3.1自定义事件
7.3.2使用v-model
实现这样一个具有双向绑定的v-model组件需要满足一下两个要求：
- 接受一个value属性
- 在有value时触发input事件
7.3.3非父子组件中通信
非父子组件通信的有两种，兄弟组件和跨多级组件：
1.中央事件总线 bus
2.父链
this.(parent和this.)children可以递归上下访问
3.子组件索引
ref =“子组件名”和this.$refs.子组件名，访问指定名称的子组件
7.4使用slot分发内容
7.4.1什么是slot
当需要让组件组合使用，混合父组件的内容与子组件的模板是，就会用到slot，这个过程叫做内容分发。
props传递数据，events触发事件和slot内容分发就构成了Vue的3个API来源，再复杂的组件也是这三个部分组成的
7.4.2作用域
1.编译的作用域
slot分发的内容，作用域是在父组件上的
7.4.3slot用法
单个slot
在子组件内使用特殊的
具名slot
给
7.4.4作用域插槽
还有些疑问
7.4.5访问slot
通过(slots可以访问某个具名slot，this.)slots.default包括了所有没有被包含在具名slot中的节点。
7.5组件高级用法
7.5.1递归组件
7.5.2内联模板
7.5.3动态组件
7.5.4异步组件
7.6其他
7.6.1$nextTick
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
7.6.2X-Templates
7.6.3手动挂载实例
在一些非常特殊的情况下，需要动态的创建Vue实例，Vue提供了Vue.extend和$extend两个方法来手动挂载一个实例
<div id="mount-div"></div>
<script>
var MyComponent=Vue.extend({
template:'<div>Hello:{{name}}</div>',
data:function(){
return {
name:'Aresn'
}
}
});
new MyComponent.$mount('#mount-div');
//另一种挂载方法
new MyComponent({
el:"#mount-div",
});
#或者在文档之外渲染挂载
var component = new MyComponent().$mount();
document.getElementById('mound-div').appendChild(component.$el);
</script>