Vue的基本语法

最新推荐文章于 2022-07-06 16:09:30 发布

基本無害

最新推荐文章于 2022-07-06 16:09:30 发布

阅读量728

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_41563657/article/details/115729630

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、插值

a）文本 {{}}

<!-- 无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。 -->
<span>Message:  {{msg}}</span>



<!-- 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。-->
<span v-once>这个值不会改变 {{msg}}</span>

b）原始HTML

双大括号将数据解释为文本，当使用v-html指令时，会直接输出HTML

<!-- rawHtml : '<span style="color:red">this is should be rea</span>'  -->
<p>Using text : {{rawHtml}}</p>
<p>Using v-html : <span v-html="rawHtml"></span></p>

c）dom元素（标签）自带的属性赋值

当我们想给标签自带属性赋值的时候，我们要使用v-bind

<div v-bind:id="dynamicId"></div>

<!-- 对于布尔标签自带属性(存在意味着值为true)，v-bind效果会有所不同 -->
<!-- 比如disabled属性,该属性为true时,或者任意不为false时表示该元素不可以使用;-->
<!-- 为false时 表示这个属性不启用,也就是这个元素是可以使用的-->
<!-- 因此带我们使用v-bind绑定这种类型的属性值时,如果变量是False,那么这个属性根本就不会渲染 -->

<button v-bind:disabled= "isButtonDisabled">按钮</button>

d）JavaScript表达式

对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。注意：是表达式，而语句或流程控制是不会生效的。

{{ number + 1 }} 

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('')  }}

<div v-bind:id=" 'list_' + id"></div>



<!-- 这些表达式会在所属Vue实例的数据作用域下座位JavaScript被解析。 -->
<!-- 有个限制就是, 每个绑定都只能包含单个表达式, 所以下面的例子都不会生效。 -->

{{var a = 1}}   //这是语句，不是表达式


{{if(ok) {return message}}}   //流程控制也不会生效,要使用三元表达式

2、指令

指令是带有 v- 前缀的特殊属性。指令属性的值预期是单个JS表达式（v-for除外）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

<p v-if="seen">当seen为true时，你就能看见我</p>

a）参数：一些指令能够接受一个参数，在指令名称之后以冒号表示。

例一：v-bind 指令可以用于响应式地更新 HTML 标签自带属性。

在这里，href是参数，告知v-bind指令将元素的href的attribute与表达式url的值绑定。

<a v-bind:href="url"> .. </a>

例二：v-on指令，用于监听DOM事件，参数是监听的事件名。

<a v-on:click="fn_doSth"> ... </a>

b）动态参数：可以用方括号括起来的JS表达式作为一个指令的参数：

注意，参数表达式的写法存在一些约束。

这里的attributeName会被作为一个JS表达式进行动态求值，求得的值将会作为最终的参数来使用。

例如，如果你的Vue实例有一个data : attributeName : 'href'，那么这个绑定等价于 v-bind:href

<a v-bind:[attributeName]="url"> ... </a>

动态参数的使用十分灵活，你也可以用来动态替换你的事件监听。

在这个示例中，eventName可以是click、focus、blur等等，v-on:[eventName] 就等价于 v-on:click ....

<a v-on:[eventName]="doSth"> ... </a>

c）缩写

v- 前缀作为一种视觉提示，用来识别模板中Vue特定的attribute。 v- 标签很有帮助，Vue.js在此基础上进一步进行了优化，

v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

● v-bind:xxx 缩写为 :xxx

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>


<!-- 缩写为 -->
<a :href="url"> ... </a>


<!-- 动态参数的缩写为 -->
<a :[key]="url"> ... </a>

● v-on:xxx 缩写为 @xxx

<!-- 完整语法 -->
<a v-on:click="doSth"> ... </a>


<!-- 缩写 -->
<a @click="doSth"> ... </a>


<!-- 动态参数缩写 -->
<a @[eventName]="doSth"> ... </a>

3、样式绑定

元素的class列表和内联样式都是标签的自带属性，因此我们可以使用 v-bind 来处理，在 v-bind 用于class或style时，表达式结果除了字符串之外，还可以是对象或数组。

a）绑定 HTML Class

● 传对象： :class="{key:value}" 。key对应 <style>中定义的样式；value对应 data中定义的表达式。

其中value 是 false 、 0 、 undefined、null 时，表示不使用对应的样式。

<template>
  <div id="app">
	<div v-bind:class="{active:isActive}">背景色</div>
	<div :class="{active:isActive,div_circle:isCircle}">背景色</div>
	<div class = "fontSize20"
		:class="{active : isActive, div_circle : isCircle}">背景色3</div>
	<div :class="styleObj">对象传值</div>	
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
	  return { 
		  isActive: true,
		  isCircle: true,
		  styleObj: {active: true, div_circle: true}
		  }
  },
  created(){
	   
  }
}
</script>

<style scoped>
 

.active{
	background-color: #42B983;
}

.div_circle{
	width: 200px;
	height: 200px;
	border-radius: 60%;
	border: 2px solid cornsilk;
	line-height: 200px;
	text-align: center;
}

.fontSize20{ 
	font-size: 20px; 
}
</style>

● 传数组：:class="[active , 'div_box']"

ps: 数组里的样式名称要用单引号包起来，否则不生效，或者写成： {active ： true} 才能生效

<template>
  <div id="app">
    <!-- active不会生效 -->
	<div :class="[active , 'div_box']">背景色/方形</div>

	<div :class="[active , isActive ? 'div_circle' : 'div_box']">三元</div>
	
    <!-- active会生效 -->
	<div :class="[{active : true} , isActive ? 'div_circle' : 'div_box']">三元</div>
	
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
	  return { 
		  isActive: true,
		  isCircle: true,
		  styleObj: {active: true, div_circle: true}
		  }
  },
  created(){
	   
  }
}
</script>

<style scoped>
 

.active{
	background-color: #42B983;
}

.div_circle{
	width: 200px;
	height: 200px;
	border-radius: 60%;
	border: 2px solid cornsilk;
	line-height: 200px;
	text-align: center;
}

.fontSize20{ 
	font-size: 20px; 
}

.div_box{
	width: 200px;
	height: 200px;
	border: 2px solid indianred;
	line-height: 200px;
	text-align: center;
}
</style>

b）内联样式绑定

● 传对象 : v-bind:style的语法十分直观 ---- 看着非常类似CSS，但其实是一个JS对象。(CSS属性名记得用引号括起来)

<div :style="{color : activeColor, fontSize: activeFontSize}"> 内联样式1 </div>

<!--
   data: { 
	 activeColor: 'red',
	 activeFontSize: 30
   } 
-->

内联样式也可以绑定一个对象。

<div :style="styleObject">内联绑定对象</div>


<!--

data(){
	  return {
			  styleObject: {
				  color: 'red',
				  fontSize: '63px'
			  }
		  }
  }

-->

● 传数组

4、条件指令

a）v-if 指令

v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回真值的时候被渲染。

<h1 v-if="awesome"> vue is awesome !</h1>

<!-- data: { awesome: 1 }-->

同样也有 v-else 必须紧跟在 v-if 或者 v-else-if的元素后面，否则不会被识别

<h1 v-if="awesome"> vue is awesome !</h1>
<h1 v-else>Oh no</h1>

v-else-if

	<h1 v-if="type==='A'"> AAA </h1>
	<h1 v-else-if="type === 'B'"> BBB </h1>
	<h1 v-else-if="type === 'C'"> CCC </h1>
	<h1 v-else> NOT ABC </h1>

b）v-show

与v-if用法大致一样，不同的是v-show的元素始终会被渲染并保留在DOM中，只是简单地切换元素的CSS display属性

<h1 v-show="ok">Hello!</h1>

※ v-if 与 v-show的区别

v-if 是真正的条件渲染，因为他会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染是条件为假，则什么也不做 —— 直到条件第一次变为真，才回去渲染条件块。

相比之下，v-show 简单得多，因为无论初始条件是什么，元素总是会被渲染，并且在条件更改时仅仅切换元素的CSS。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁的切换，则使用v-show；如果在运行时条件很少改变，则使用v-if更好。

5、遍历指令

我们可以用 v-for 指令基于一个数组来渲染一个列表。

v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据(data)定义的数组，item则是被迭代的数组元素的别名。

a）遍历数组

<ul>
    <li v-for="student in students" :key="student.name">
        {{student.name}}
    </li>
</ul>

export default {
  name: 'app',
  data(){
	  return {
			  students: [
				  {name: 'zhangmh', sex:'1', age:'20'},
				  {name: 'gaolin', sex:'1', age:'31'}
			  ]
		  }
  }
}

v-for支持传入两个参数，第二个参数作为当前项的索引

	<ul>
		<li v-for="(item, zzzz) in items">
			{{parentMessage}} -- {{zzzz}}  -- {{item.message}}
		</li>
	</ul>

<script>
export default {
  name: 'app',
  data(){
	  return {
			  msg : 'hello vue',
			  parentMessage: 'Parent',
			  items: [
				  {message: 'Foo', sex:'1', age:'20'},
				  {message: 'Bar', sex:'1', age:'31'},
				  {message: 'stupid'}
			  ]
		  }
  }
}
</script>

可以用 of 代替 in ，因为of更接近JS迭代器的语法。

<div v-for="item of items"></div>

b）遍历对象

● 基础用法

	<ul>
		<li v-for="value in object">
			{{value}}
		</li>
	</ul>

● 进阶用法：提供第二个参数为property名称（也就是键名）

	<ul>
		<li v-for="(value, name) in object">
			{{name}} ---  {{value}}
		</li>
	</ul>

● 高阶用法：提供第三个参数作为索引下标

	<ul>
		<li v-for="(value, name,index) in object">
			{{index}} --- {{name}} ---  {{value}}
		</li>
	</ul>

基本無害

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的基本语法

1、插值a）文本 {{}}<span>Message: {{msg}}</span><span v-once>这个值不会改变 {{msg}}</span>b）原始HTML双大括号将数据解释为文本，当使用v-h.
复制链接

扫一扫