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) 是一套用于构建用户界面的渐进式框架。

---

安装

新手推荐外链式引用

<script src="https://unpkg.com/vue@next"></script>

---

实例化

createApp函数创建一个实例

		<div id="app">
			<!-- 设置当前p标签的我那边为 Vue创建的App里面的msg属性值 -->
			<p v-text="msg"></p>
		</div>
		
		<script>
		Vue.createApp({
			data(){
				return {
					msg:"学习Vue真快乐"
				}
			}
		}).mount("#app")
		// .mount("#app") Vue创建出来的app选择了标签id为app作为模板
		// 我们写的v-指令只能在 这个模板里面启用
		</script>

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

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

运行结果：

---

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

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

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

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

		<div id="app">
			<p>{
  {msg}}</p>
			<p>{
  {1?"是1":"不是1"}}</p>
			<p v-text="msg"></p>
			<p v-html="msg"></p>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						msg: "我是<b>小菜粥</b>"
					}
				}
			}).mount("#app")
		</script>

运行结果：

 属性渲染（v-bind）

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

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

		<div id="app">
			 <p v-bind:title="msg">我是个小p</p>
			 <p :title="msg">我是个小p</p>
			 <button :disabled="!canUse">按钮</button>
		</div>
		
		<script>
		Vue.createApp({
			data(){
				return {
					msg:"我学vue，我骄傲！",
					canUse:false,
				}
			}
		}).mount("#app")
	 
		</script>

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