vue-随笔-内置指令

引入cdn文件

初始化vue实例

	var vm = new Vue({
 		el:'#app',
		data:{
		name:'cyany'
	}
 });

基本demo：

	<div id="app">
   		{{name}}
	</div>

---

指令：
v-if 当true的时候显示，当false的时候不显示，但是不是隐藏，而是没有渲染到页面的！

<p v-if="a">  

  	data:{
   		// a:true
   		a:false
   	}

v-show:当true的时候显示，但是false的时候是被隐藏了，加了display:none的样式

<p v-show="b">

data:{
   		b:false
   	}

v-else ：必须紧跟着v-if，要不然不起作用，当v-if是false的时候，v-else是true显示

<p v-if="a">Lorem ipsum dolor sit amet.</p>
   		<p v-else="a">haha</p>
data:{
   		// a:true
   		a:false,
   		b:false
   	}

v-model:创建双向数据绑定

<input type="text" v-model="text">
   		<p>{{text}}</p>
	data:{
   		text:''
   	}
数字输入框：需要改变type类型为number，然后在最后加上number
<input type="number" v-model="num" number>
   		<p>{{num}}</p>
   	data:{
   		num:''
   	}

v-for 循环数组或对象

		<ul>
			<li v-for="(item,index) in items">{{index}}----{{item}}</li>
		</ul>

  	data:{
   		items:['a','b','c']
   	}

v-text 可以更新元素的内容

<p v-text="c"></p>
   	data:{
   		c:'ccc'
   	}

v-html:更新元素的内容，会解析HTML

<p v-html="html"></p>
  	data:{
   		html:'<b>haha</b>'
   	}

v-bind:绑定HTML属性或则是组件props绑定表达式

<p v-bind:class="haha">bind</p>
	data:{
   		haha:'bindClass'
   	}

v-on:绑定事件

		<button v-on:click="co">click</button>
		<button v-on:click.stop="co">click</button> 调用event.stopPropagation()
		<button v-on:click.prevent="co">click</button> 调用event.preventDefault()
		<button v-on:keyup.enter="co">click</button> 调用指定按键enter
  	methods:{
   		co:()=>{
   			console.log('click events')
   		},
   	}

v-ref 在父组件注册一个子组件的索引，不要表达式，必须提供参数id，可以通过父组件的$refs对象访问子组件
v-ref:some-ref this.$els.someRef (不是很理解，之后在找资料看看)

v-el 为dom元素注册一个索引，方便通过所属实例的$els访问这个元素，可以用v-el:some-el设置this.$els.someEl (好像vue2.x版本运行不了报错没有v-el指令，这就尴尬了···)