vue学习笔记（2）--基本指令篇

v-if 、v-else、 v-show、v-else-if

v-if 类似js的if逻辑 示例如下，只有status为online的时候 才会显示出来
v-else-if ，v-else 和v-if必须搭配起来使用 原理也和js的if else逻辑一致

<div v-if="status=='online'">您好！</div>
<div v-else-if="status=='leave'">走开</div>
<div v-else>请登录</div>

v-show 作用类似v-if 也是条件判断

<div v-show="isLogin">您好</div>

v-if和v-show的区别
v-if：在切换过程中条件块里面的组件会被销毁和重建，开销比较大，一般在运行条件少的时候使用
v-show：调整的是css的display属性 开销比较小，在频繁切换的时候可以使用v-show

v-for

1.基本用法 示例如下

<!--模板代码-->
<div id="app">
	<ul>
		<li v-for="item in items">{{item}}</li>
	</ul>
</div>
<!--js代码-->
data(){
	return {
		items:["a","b","c","d","e"]
	}
}
</script>

2.遍历对象
参数： 第一个为值，第二个为键名，第三个为索引
参数也可以为两个 (item,key)或者 (item,index) 都可以

<!--模板代码-->
<div id="app">
	<ul>
		<li v-for="(item,key,index) in items">键名：{{key}}-值:{{item}}-下标:{{index}}</li>
	</ul>
</div>
<!--js代码-->
data(){
	return {
		items:[{"name":"Lily",age:16,sex:"w"},
		  {"name":"Tom",age:17,sex:"m"}]
	}
}
</script>

v-text v-html

1、v-text
{{xxx}}取值有个弊端，当网速很慢或javascript出错时，会在页面显示{{xxx}}，用v-text可以解决这个问题

<div v-text="message"></div>
//等同于
<div>{{message}}</div>

2、v-html 可以输出含html标签的语句

<div v-html="htmlStr"></div>
data(){
	return {
		htmlStr:'<span>带标签的文本内容</span>'
	}
}

v-on

用来绑定事件 简单示例如下

<div>得分：{{count}}</div>
//常规写法
<button v-on:click="add">增加</button>
//v-on也可以简写成以下这样
<button @click="add">增加</button>

//js代码
data(){
	return {
		count:1
	}
},
methods:{
	add(){
		this.count ++
	}
}

v-model

vue的双向绑定特性的其中一个关键 v-model绑定的值 如果在逻辑执行中有改变会自动更新 无需手动操作dom赋值更新
v-model绑定的值 都需要在data中声明初始值
简单示例如下

data(){
    return {
      message:"初始信息",
      count: 1,
      status: [],
      sex: '男',
      selected: ''
    }
  }
<!--input-->
<input type="text" v-model="message">

<!--textarea-->
<textarea  cols="30" rows="10" v-model="message"></textarea>

<!--checkbox-->
<input type="checkbox" id="first" value="1" v-model="status">
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status">
<label for="second">无效</label>
<div>状态：{{status}}</div>

<!--radio-->
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<div>性别：{{sex}}</div>

v-bind

用来处理html标签的动态属性赋值

<!--常规用法-->
<img v-bind:src="imgSrc">
<!--简写用法-->
<img  :src="imgSrc">

js代码
data:{
	imgSrc:"http://xxx/xxx.png"
}

v-pre v-cloak v-once

1.v-pre 在模板中跳过vue的编译，直接输出原始值，如果在标签中加入v-pre 就不会输出vue中data的赋值了

<!--这句话不会输出正确的message对应的值 "这是初始信息"  而是直接输出 "{{message}}"-->
<div v-pre>{{message}}</div>   
//js代码
data：{
	message:"这是初始信息"
}

2.v-cloak 在vue渲染完指定的整个dom之后才显示，他必须和css样式一起使用

//css
[v-cloak]{
	display:none;
}
//html
<div v-cloak>{{message}}</div>

3.v-once 只显示dom第一次渲染的值，以后不再改变了

//html
<div v-once>一次绑定的值:{{message}}</div>
<div>实时的值:{{message}}</div>
<button @click="changeMsg">改变message的值</button>

//js
data:{
	message:"初始信息显示"
}
methods:{
	changeMsg(){
		this.message = "改变之后的信息显示"
	}
}

以上是一些常用的vue基本指令
参考了一些网络上的文章后自己手写的 如有侵权 请联系删除