标签：self modifier else 模板 类型 hang 否则 attribute 其他
<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:'代驾'}
}
});<span>Text:{{text}}</span> //替换text
<span>Text:{{*text}}</span> //只渲染一次，不再发生后续变化
<span>Text:{{{text}}}</span> //将text当作字符串来处理
<li data-id='{{id}}'></li> //可以放在HTML标签内{{example | toUppercase}} //管道//配置分隔符
//1.delimiters
Vue.config.delimiters=["<%","%>"];
//2.unsafedelimiters或者HTML插值
Vue.config.unsafedelimiters=["<$","$>"];触发数组更新观察的的变异方法：
$remove
//在绑定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><!--内联语句-->
<button v-on:click="doThat('hello',$event)"></button>v-on后面不仅可以跟参数，还可以增加修饰符：
在父组件上注册一个子组件的索引，便于直接访问。不需要表达式，必须提供参数id。可以通过父组件的$refs对象访问子组件。
v-ref和v-for一起使用时，注册的值将是一个数组。
通过所属实例的$els访问这个元素。可以用v-el:some-el设置this.$els.someEI
编译时跳过当前元素和它的子元素。可以用来显示原始Mustache标签。跳过大量没有指令的节点便会加快编译
v-cloak这个指令保持在元素上直到关联实例结束编译。当和[v-cloak]{display:none}一起使用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕，否则在渲染页面时，有可能用户会先看到Mustache标签，然后看到编译后的数据。
vuejs用Vue.directive(id,definition)方法注册一个全局自定义指令，它接受两个参数：指令ID与定义对象。也可以用组件的directive选项注册一个局部自定义指令。
1.钩子函数
//如果指令需要多个值，则可以传入一个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',
});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];
}
}
}
});计算属性提供了缓存开关
computed:{
example:{
cache:false,
get:function(){
return Data.now()+this.welcome;
}
}
}//当包含计算属性的节点被移除且模板中其他地方没有再引用该属性时，那么对应的计算属性的getter方法不会执行
<div>
<button @click='toggleShow'>Toggle Show Total Price</button>
<p v-if="showTotal">Total Price = {{totalPrice}}</p>
</div><span>{{ span }}</span>
<br>
<input type="text" v-model="name" placeholder="join DDFE"></input>//复选
<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:[]
}
});<input type="radio" id="flash" v-model="bizLine">
<label for="flash">快车</label><select v-model="bizLine">
<option selected value="falsh">快车</option>
<option value="premium">专车</option>
<option value="bus">巴士</option>
</select>
<span>selected:{{ bizLIne }}</span>在通常情况下，通过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>默认情况下，v-model在input事件中同步输入框的值与数据，可以添加一个lazy特性，从而改到chang事件中去同步。
<input v-model="msg" lazy><br/>
{{msg}}设置一个最小的延时，在每次敲击之后延时同步输入框的值到Model中。如果每次更新都要进行高耗操作，它较为有用。
<input v-model="msg" debounce="500“>将用户输入同步到model中的时候转换为数值类型，如果转换结果为NaN，则对应的Model值还是用户输入的原始值
<input v-model="age" number>标签：self modifier else 模板 类型 hang 否则 attribute 其他
原文地址：https://www.cnblogs.com/zhouyu0-0/p/11973286.html
