vue基础操作–指令
mustache语法的支持性
前端的数据类型可以分为基本类型和引用类型
基本类型:number、string、boolean、null、undefined
引用类型:object
那么vue中mustache语法对其他类型的支持性也是很好的。
那么vue中mustache语法对其他类型的支持性也是很好的。以上类型都可以支持
对流程控制(判断、循环)的支持性都是很好的
<div id="app">
<p> 数字: {{num}}</p>
<p> 字符串: {{string}}</p>
<p> 空对象: {{null}}</p>
<p> undefined: {{unde}}</p>
<p> 对象: {{obj.name}}</p>
<p> 数组: {{arr[1]}}</p>
<p> 语法: {{ null?1:2 }} </p>
<p> 语法: {{ null && 1 || 2 }} </p>
</div>
Vue指令
Vue.js的指令是以v-开头的,借鉴了angular1.0,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令作为元素的属性,指令会为绑定的目标元素添加一些特殊的行为
在这里介绍一些自带的vue指令
数据展示指令
<h1>数据展示</h1>
<p> {{info}}</p>
<p v-html = "xml"></p>
<p v-text = "info"></p>
1、直接使用mustache语法可以直接展示数据
2、使用指令 v-html 可以解析xml数据如
<span>心里有月亮</span>
3、使用指令 v-text 和mustache语法一直可以直接展示数据,也有一些不同:
v-text 和 {{}} 结果是一样的,但是{{}} 有个短暂的{{}} 显示
条件渲染指令
<h1>条件渲染</h1>
<h2>单路分支</h2>
<p v-if = "flag">眼里有星星</p>
<h2>双路分支</h2>
<p v-if = 'flag'>眼里有星星</p>
<p v-else>心里有月亮</p>
<h2>多路分支</h2>
<p v-if = "type === 'A'">眼里有星星</p>
<p v-else if = "type === 'B'" >心中有月亮</p>
<p v-else>身上有阳光</p>
单路分支,结果看指令接受到的数据的真假,若为false,该标签不会渲染
双路分支、多路分支同上
条件展示
<p v-show = "show_flag"> 眼里有星星 </p>
条件展示也是根据指令接受的结果来展示该元素,但和条件分支有一定的不同:
1.条件展示为假的时候,标签的不会不渲染,只是标签的display属性为none
2.而条件分支是不渲染,两者有很大的区别
故在开发项目中,用到的多的DOM元素用条件展示指令v-show ,用到不多的元素用条件分支显示
列表渲染
列表渲染在正常开发的用处很大,在这里这事了一些基本的用法
<h1>列表渲染</h1>
<h3>数字</h3>
<ul>
<li v-for='item of 10'>
{{ item }}
</li>
</ul>
<h3>字符</h3>
<ul>
<li v-for='item of info'>
{{ item }}
</li>
</ul>
<h3>数组</h3>
<ul>
<li v-for='item of arr'>
{{ item }}
</li>
</ul>
<h3>对象</h3>
<ul>
<li v-for='item in obj'>
{{ item }}
</li>
</ul>
<h4> 对象渲染 </h4>
<ul>
<li v-for="(item,key,index) in obj ">
<p> value: {{ item }} </p>
<p> key: {{ key }} </p>
<p> index: {{ index }}</p>
</li>
</ul>
<h3>json</h3>
<ul>
<li v-for='item in jsonData'>
{{ item.task }}
</li>
</ul>
<!-- 正常开发的json数据都是有很多重嵌套的,这里双重嵌套的情况 -->
<h3>两层数据</h3>
<ul>
<li v-for='item in nestData'>
<h4>{{ item.name }}</h4>
<ul>
<li v-for='ele in item.floor'>
{{ ele.name }}
</li>
</ul>
</li>
</ul>
单项绑定
用单项绑定数据,可以将数据赋给已有的属性,如未设置单项绑定的指令就不能连接到正确的路径
<h3>单项数据绑定</h3>
<img v-bind:src="img" alt="">
<!-- 也可简写为 -->
<img :src="img" alt="">
双向绑定
vue的双向绑定可以通过表单元素的value值与数据进行交互,两方有一方改变另外一方也会有相同的改变
<h3> 双向数据绑定 </h3>
<!-- 仅仅是使用在表单元素身上 form input checkbox ... -->
<input type="text" v-model = "info">
<p>{{info}}</p>
阻止预编译
v-pre可以用来阻止预编译,有v-pre指令的标签内部的内容不会被编译,会原样输出
<h3> v-pre </h3>
<p v-pre>{{ info}}</p>
在这里标签内的结果并不是info代表的字符串而是{{info}}
渲染一次
v-onece指令只渲染元素和组件一次,之后的渲染都会跳过
<h3> v-onece</h3>
<p v-once>{{info}}</p>
<p>{{info}}</p>
<input type="text" v-model="info" name="">
瞬时样式
在v-cloak指令上加载样式,如下所示,在页面加载过程中,就不会出现源代码的这种状况,在页面加载完成后,样式就会移出,是解决屏幕闪动的一个解决办法
<h3> v-cloak</h3>
<p v-cloak>{{ info }}</p>
样式
[v-cloak]{
display: none;