第一部分：模板语法

模板语法之一——插值表达式{{ }}

<div><h2>插值表达式</h2><!-- 插值表达式{{}} --><!-- 写变量 --><p>{{ num }}</p><!-- 写三元表达式 --><p>{{ num > 10 ? "大于10" : "小于1o" }}</p><!-- 连接 --><p>{{ num + "你好" }}</p></div>

模板语法之二——— v-html=" js数据变量 " 和v-text=" js数据变量 "

v-html把值当做html解析,v-html ===> innerHTML

v-text把值当成普通字符串显示, v-text ===> innerText

<template><!-- 这是vue的页面标签，能够在页面显示，template只能有一个亲儿子盒子:这里我弄一个div盒子 --><div><!-- 语法 v-html="js数据变量" --><!-- v-html把值当做html解析,v-html ===> innerHTML --><span v-html="sum"></span><!-- 语法 v-texe="js数据变量" --><!-- v-text把值当成普通字符串显示, v-text  ===> innerText --><span v-text="sum"></span></div>
</template><script>
export default {// 我是js的逻辑data() {return {// 定义变量和数据sum: "<i>我是i标签</i>",};},
};
</script>
<style>
</style>

模板语法之三——v-bind

v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）

例如：给img标签的src设置图片地址：

一般写法：<img v-bind:src="imgUrl" alt="" />

简写：<img :src="imgIng" alt="" />

<template><div><!-- v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）--><img :src="imgIng" alt="" /></div>
</template><script>
export default {// 我是js的逻辑data() {return {// 定义变量和数据imgIng: "https://www.w3school.com.cn/ui2019/bg.png",};},
};
</script>
<style>
</style>

模板语法之四——v-for

<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

目标结构可以是：数组 / 对象 / 数字

<template><div><!-- <标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签> --><!-- 需求，把数组遍历到页面上 --><div v-for="(value, index) in sum" v-bind:key="index"><!-- 遍历数组时和forEach里面的两个形参一样 -->{{ value.name }},{{ index }}</div></div>
</template><script>
export default {// 我是js的逻辑data() {return {// 定义变量和数据sum: [{ name: "张三", age: 18, sex: "男" },{ name: "小花", age: 19, sex: "女" },],};},
};
</script>
<style>
</style>

模板语法之五——v-show和v-if

语法：v-if="布尔值"

v-show 用的display:none隐藏 (频繁切换使用)

语法：v-show用css样式进行显示与隐藏

v-if 直接从DOM树上添加或移除

<template><div><!-- 需求：标签的显示与隐藏 --><!-- 语法：v-if="布尔值" --><!-- 含义：v-if在dom树中删除和添加元素 --><p v-if="bool">我是v-if：只能在</p><!-- 语法：v-show用css样式进行显示与隐藏 --><!-- display:"none"--><p v-show="bool">我是v-show</p></div>
</template><script>
export default {// 我是js的逻辑data() {return {// 定义变量和数据// false/truebool: false,};},
};
</script>
<style>
</style>

模板语法之六——v-if/v-else-if/v-else

含义：和js里面的if-elseif一样：条件不合格则不在页面显示

<标签 v-if="条件">        </标签>
<标签 v-else-if="条件">   </标签>
<标签 v-else-if="条件">   </标签>
<标签 v-else>             </标签>

<template><div><!-- 单词不要写错 --><p v-if="num > 90">优秀</p><p v-else-if="num > 60">及格</p><p v-else>不及格</p></div>
</template><script>
export default {// 我是js的逻辑data() {return {num: 70,};},
};
</script>
<style>
</style>

v-on和methods

作用：给标签绑定事件

语法：

<标签 v-on:事件名="要执行的少量代码" >

<标签 v-on:事件名="methods中的函数" >

<标签 v-on:事件名="methods中的函数(实参)">

v-on可以简写成 @。即 @事件名="methods中的函数"

<template><div><!-- v-on事件绑定 --><!-- <标签 v-on:事件名="要执行的少量代码" > --><button v-on:click="num = 2">第一个点击事件{{ num }}</button><!-- <标签 v-on:事件名="methods中的函数" > --><button v-on:click="btn2">第二个点击事件(普通)</button><!-- <标签 v-on:事件名="methods中的函数(实参)"> --><button v-on:click="btn3('传进去')">第三个点击事件</button></div>
</template><script>
export default {data() {return {num: 1,};},methods: {btn2: function () {console.log("第二个点击事件");},btn3(a) {console.log(a);},},
};
</script>
<style>
</style>

vue指令-v-on事件对象

语法

无传参, 通过形参直接接收
传参, 通过$event指代事件对象传给事件处理函数

<template><div><!-- 无传参状态下：通过形参直接接收 --><a v-on:click="one" href="http://www.baidu.com">点我跳转百度未传参状态</a><br /><!--传参状态下：通过$event指代事件对象传给事件处理函数 --><a v-on:click="two(1, $event)" href="http://www.baidu.com">点我跳转百度传参状态</a></div>
</template><script>
export default {methods: {one(e) {e.preventDefault();console.log("没有跳转");},two(num, e) {e.preventDefault();console.log("没有跳转");},},
};
</script>
<style>
</style>

vue指令-v-on修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听

一.事件修饰符

语法:

<标签 @事件名.修饰符="methods里函数" />

.stop - 阻止事件冒泡

<button v-on:click.stop="one">阻止事件冒泡</button>

.prevent - 阻止默认行为

<a @click.prevent="a" href="http://www.baidu.com">登录百度</a>

.once - 程序运行期间, 只触发一次事件处理函数

<button @click.once="btn">只触发一次事件处理函数</button>

二.键盘修饰符

监听回车事件

 <input @keyup.enter="btn1" type="text" />

三.ref直接获取dom元素

四..sync 修饰符

子组件操作
//title为父组件传给子组件的值
//newTitle为修改title的值
this.$emit('update:title', newTitle)

//父组件操作.sync
<text-document v-bind:title.sync="doc.title"></text-document>

详细点讲解
sync修饰符：在子组件内部可以直接修改父组件传过来的值
语法：this.$emit("update:父组件传递的变量值"，新值)

Vue的模板语法（基础部分）相关推荐

[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗？说说你对这模板引擎的理解
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解模板引擎: 负责组装数据,以另外一种形式或外观展现数据. 优点: 可维护性(后期改起来方便): 可扩展性(想要 ...
【Vue】—Vue的模板语法
[Vue]-Vue的模板语法在template中写HTML时,如果需要渲染变量或者表达式,可以使用{{ }}形式来渲染,这个{{ }}就是模板语法,可以把变量或者表达式的结果渲染出来. 模板语法渲染 ...
Vue的模板语法及案例
文章目录前言一.双大括号表达式二.插值 2.1文本 2.2 原始 HTML 2.3 特性 2.4 javascript 表达式三.指令 3.1 参数 3.2 动态参数 3.3 修饰符四.指令 ...
Vue 3 模板语法
模板语法实验介绍 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层应用实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 ...
Vue的模板语法学习
模板语法 1.插值 a.文本数据绑定最常见的形式就是使用 "Mustache" 语法(双大括号)的文本插值我们在普通插值的时候无论何时,绑定的数据对象上 msg 属性发生了改变 ...
Vue.js 模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
四、Vue.js 模板语法
本章概要应用程序实例插值指令 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将呈现的 DOM 绑定至底层组件实例的数据.所有的 Vue.js 模板都是有效的 HTML ,可以 ...
从零学习Vue - 02模板语法、el与data两种写法、mvvm模型、数据代理
root容器里的代码被称为模板,有了模板会有特殊的模板语法.Vue模板中语法有两大类,一类是插值语法,另一类是指令语法. 插值语法功能:用于解析标签体内容.写法:{{xxx}},xxx为js表达式, ...
前端之Vue：模板语法、指令、Style 和 Class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制
目录一. 模板语法插值语法二. 指令 2.1 文本指令 v-html:让HTML渲染成页面 v-text:标签内容显示js变量对应的值 v-show:显示/隐藏内容 v-if:显示/删除内容 2 ...

Vue的模板语法（基础部分）