Vue3零基础学习指南之Vue基础（1）— 模板语法与指令

目录

概述

安装

实例化

文本渲染（v-text、v-html）

属性渲染（v-bind）

条件渲染（v-if、v-else-if、v-else）

列表渲染指令（v-for）

遍历数组         

遍历对象 

范围 

事件处理（v-on）

监听事件（行内处理）

事件处理方法（方法响应）

内联传参 

事件修饰符

按键修饰符

键盘修饰符

---

---

概述

前端三大框架

• React   Facebook
• Vue  尤雨溪
• Angular   Google

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

---

安装

新手推荐外链式引用

---

实例化

createApp函数创建一个实例

把#app里面的内容称为模板 
v-开头的属性称为 模板的指令
通过指令把html模板和js联系在一起 

mount 挂载  Vue创建出来的实例用mount函数选择模板，我们写的v-指令只能在这个模板里面启用

运行结果：

---

指令带有前缀 v- ，以表示它们是 Vue 提供的特殊 attribute

文本渲染（v-text、v-html）

• {{}} ：里面可以写js，但是只能写一行表达式，不能写复杂 js 比如if...
• v-text ：更新元素的 textContent

• v-html ：更新元素的 innerHTML（可以识别标签）

		

			
{{msg}}
			
{{1?"是1":"不是1"}}
			

			

		
		

运行结果：

 属性渲染（v-bind）

v-bind：属性名："属性值"，缩写 ：属性名："属性值"。

可以使用 v-bind 指令给 html 标签动态的绑定属性。

		

			 
我是个小p
			 
我是个小p
			 按钮
		
		
		

条件渲染（v-if、v-else-if、v-else）

• v-if  指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 的时候被渲染
• v-else-if  前一兄弟元素必须有 v-if 或 v-else-if。表示 v-if 的“else if 块”。可以链式调用。
• v-else  前一兄弟元素必须有 v-if 或 v-else-if。为 v-if  或者 v-else-if 添加“else 块”。

  		
  
  			
  大菜粥
  			
  中菜粥
  			
  小菜粥
  		
  		

  如果num>10，则显示大菜粥。如果5

• v-show  根据表达式的真假值，切换元素的 display CSS property。

v-if 和 v-show 都是根据条件展示元素，它们的区别是：

• v-show是通过css方法隐藏节点，如果频繁切换显示与隐藏 v-show
• v-if直接移除节点方式隐藏，偶尔切换显示隐藏用 v-if

列表渲染指令（v-for）

         v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

         key 是给vue遍历的节点一个唯一的标识符 ，更好的让vue去做排序过滤等操作，为了性能的优化，要求在一个for指令里面key的值 唯一 

 遍历数组         

          v-for="(item,index) in list" :key="item"  

		

			

				
{{item}} - 下标：{{index+1}}
			
		
		

 运行结果：

遍历对象 

         v-for="(value,key) in obj" 

		

			 
{{key}}:{{value}}
		
		

运行结果：

 范围 

        v-for="item in 5" 

		

			
{{item}}
		
		

运行结果：

事件处理（v-on）

监听事件（行内处理）

使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

		

			{{counter}}
			{{counter}}
		
		

运行结果：

 点击左边按钮时，counter++，两个按钮中的数一起加一。点击右边按钮，counter++，两个数一起减一。

事件处理方法（方法响应）

        许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

		

			 

				 你好
			 
			
		
		

运行结果：

内联传参 

除了直接绑定到一个方法，也可以在 内联 JavaScript 语句中调用方法

		

			

				你好
			
			

				{{num}}
			
		
		

运行结果：

事件修饰符

为了阻止事件冒泡与阻止默认事件

Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

        .stop  阻止事件冒泡

        .prevent  阻止默认事件 

        .capture  捕获

        .self  自身元素触发

        .once  执行一次

        .passive  滚动立即触发，不等待滚动完成（移动端性能提升）

		

			

				爱
				百度
				1
			
		
		

运行结果：

个人理解：

        第一个按钮“爱”， @click.once="say"。在第一次点击的时候执行两次say方法（事件冒泡），但是在第二次及以上点击的时候只执行一次父div的say方法，它本身只执行一次。

        a标签有一个默认跳转行为，但是@click后面跟上了一个修饰符 .prevent 阻止了a的跳转，所以没有跳转到百度，只执行了say方法的alert。

大家可以看到a绑定了say方法，它的父元素同样绑定了say方法，一般来说点击a标签后程序会执行两次say方法，这就是事件冒泡。但是@click.prevent后面还跟了一个修饰符 .stop ，它阻止了事件冒泡，所以say方法只执行一次，只弹出一次“我就说一次”.。

按键修饰符

监听键盘事件时，我们经常需要检查特定的按键。可以使用按键修饰符

Vue 为最常用的键提供了别名

        .enter  回车

        .tab  制表

        .delete “删除”和“退格”键

        .esc  取消

        .space空格

        .up  上

        .down  下

        .left  左

        .right  右

		

			

				
				
{{item}}
			
		
		

当用户按下回车键，把input的文本添加到list里面并展示

运行结果：

键盘修饰符

按下相应按键时才触发鼠标或键盘事件的监听器。

        .ctrl

        .alt

        .shift

        .meta (⌘或Windows 徽标键 ⊞)

        .exact 精确

还有鼠标按钮修饰符

        .left

        .right

        .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

---

欢迎大佬指正给予建议