Vue基础和语法

一、Vue是什么？

Vue：一套用于构建用户界面的渐进式JavaScript框架

优点：简单，高效，生态丰富（插件多）

二、Vue基础语法 

1.v-text和v-html 

（1）v-text

• 用来更新元素的 文本内容。如果要更新部分的 文本内容，需要使用 { { }} 插值。用于操作纯文本，它会替代显示对应的数据对象上的值。

• <span v-text="msg"></span>
  <span>{
       
       {msg}}</span>

 （2）v-html

• 用于输出html，v-html会将其当html标签解析后输出，用于更新元素的 innerHTML。
• 注意：内容按普通 HTML 插入 ，不会作为 Vue 模板进行编译

（3）v-text和v-html的区别

• v-html可以标签和渲染数据
• v-text不能转义标签只能渲染数据 

2.v-show

• 根据表达式之真假值，切换元素的 display 的属性。当条件变化时该指令触发过渡效果。
• Tips：带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元的  display属性。

• <img v-show='flag' src="img/1.png" alt="">
  <!-- flag值应为true或false -->

3.v-if、v-else-if、v-else

（1）v-if 

• 根据表达式的值有条件地渲染元素。用于条件性地渲染一块内容。这块内容只会在指令的表达式返回值为真的时候被渲染。
• 当条件变化时该指令触发过渡效果。

（2） v-else-if

•  充当 v-if 的“else-if 块”，可以连续使用
• v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

（3） v-else

•  表示 v-if 的“else 块”
• v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

（4）示例 

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

4.v-on

• 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
• 用在普通元素上时，只能监听原生dom事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
• 缩写：@
•  

  <button @click='flag=!flag;count+=1' type="button">按钮{
       
       {count}}</button>
  <script>
  		var vm=new Vue({
  			el:'#app',
  			data:{
  				msg:'<i>hello 小宋</i>',
  				flag:true,
  				say:'你好 sjn',
  				count:0,
  			}
  		})
  	</script>

5. v-for

• 基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
• 在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。
• v-for 在严格情况下 要添加 :key 唯一标识

• <div v-for="(item,index) in myImgs" :key='index' class="item">  
  			<h1>{
       
       {index+1}}:{
       
       {item.title}}</h1>
  			<img :src="item.img" alt="">
  </div>
  <script>
  		var vm=new Vue({
  			el:'#app',
  			data:{
  				msg:'<i>hello 小宋</i>',
  				flag:true,
  				say:'你好 sjn',
  				count:0,
  				flag2:true,
  				myImgs:[
  					{
  						title:'第一张图片',
  						img:'img/1.png'
  					},
  					{
  						title:'第2张图片',
  						img:'img/2.png'
  					},
  					{
  						title:'第3张图片',
  						img:'img/3.png'
  					},
  					{
  						title:'第4张图片',
  						img:'img/4.png'
  					}
  				]
  			}
  		})
  	</script>