目录
更多关于Vue前端相关技术点,敬请关注公众号:CTO Plus后续的发文,有问题欢迎后台留言交流。
注意:由于排版太费时间,所以还是多多注重技术干货的内容吧。
接下来的一段时间我将除了总结下关于【Python进阶系列】的知识点分享文章外,还将为各位前端读者(全栈开发者)分享下关于前端开发框架Vue3的内容,当然还会包括:H5、CSS3、JavaScript、JQuery、前端开发规范等前端内容。
然后对Python开发感兴趣的读者也可以关注公众号CTO Plus,关注【Python进阶系列】的内容,同时涉及到Web开发、爬虫开发、操作系统开发、网络安全开发应用领域这块,可以分别参考我的公众号CTO Plus【Flask进阶系列】、【Django进阶系列】、【DRF进阶系列】、【互联网分布式爬虫系列】和【网络安全系列】的内容,敬请关注,欢迎交流。
以下是【Vue3进阶系列】的部分内容
Vue3是一个流行的JavaScript框架,它提供了一种简洁、灵活和高效的方式来构建用户界面。在Vue3中,模板语法是一项重要的功能,它可以帮助开发者快速编写可读性高且易于维护的代码。
Vue 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值和表达式
在Vue 3中,我们仍然可以使用插值和表达式来将数据动态地渲染到DOM中。在Vue3的模板语法中,最常用的语法元素是插值表达式。插值表达式使用双大括号 `{{}}` 将表达式包裹起来,用于将动态数据绑定到模板中。例如:
<div>
<h1>{{ message }}</h1>
</div>
在上面的例子中,`{{ message }}` 将会被 `message` 变量的值替换。当 `message` 变量的值发生变化时,插值表达式会自动更新。
插值表达式还支持一些表达式运算符和过滤器。例如:
<p>{{ count + 1 }}</p>
<p>{{ message | capitalize }}</p>
字符串转大写:{{ message2.toUpperCase() }}<br>
上面的例子中,`count + 1` 表达式会计算出 `count` 变量的值加上1的结果。而 `message | capitalize` 则会将 `message` 变量的值转换为大写字母开头。同时,还可以使用使用内置的JavaScript方法toUpperCase()将字符串转为大写字母。
当数据发生变化时,Vue3会自动更新插值表达式的结果。因此,如果你在代码中更新了message的值,插值表达式将自动显示更新后的大写字符串。
指令
除了插值表达式,Vue3还提供了一些特殊的指令,可以用于处理DOM元素的属性、事件和样式。指令以 `v-` 开头,后面跟着指令的名称和参数。例如:
<button v-on:click="handleClick">Click me</button>
<input v-bind:value="message">
在上面的例子中,`v-on:click` 指令用于监听按钮的点击事件,并调用 `handleClick` 方法。而 `v-bind:value` 指令用于将输入框的值绑定到 `message` 变量。
除了上述两个指令,Vue3还提供了一些其他常用的指令,如:`v-if`、`v-for`、`v-show`、`v-model` 等,以便于开发者更方便地操作DOM元素。
Vue3的模板语法还提供了条件渲染和列表渲染的功能,用于根据条件来动态地展示和处理数据。
条件渲染
条件渲染是根据条件来决定是否渲染某个DOM元素的一种方式,条件渲染通过 `v-if` 指令来实现,可以根据表达式的值决定是否渲染DOM元素。在Vue 3中,我们可以使用`v-if`和`v-else`指令来实现条件渲染。例如:
<p v-if="isShown">This paragraph is shown if isShown is true.</p>
或
<div v-if="showContent">
<p>显示内容</p>
</div>
上述代码中,如果`showContent`变量为`true`,则渲染`<div>`标签和其中的内容,否则不渲染。
列表渲染
列表渲染是根据数据数组动态地渲染多个DOM元素的一种方式,在Vue 3中,我们可以通过 `v-for` 指令实现列表渲染,可以遍历数组或对象,并对每个元素执行一段模板代码。例如:
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
上述代码中,`items` 是一个数组,我们使用`v-for`指令对`items`数组进行遍历,并将每个元素的`name`属性插入到`<li></li>`标签中。
插值
文本插值
文本插值是将数据以字符串形式插入到DOM文本中的一种方式。在Vue 3中,我们可以使用双花括号`{{}}`(双大括号)来进行文本插值(数据绑定)。例如:
<h1>{{ message }}</h1>
上述代码中,我们将`message`变量的值插入到`<h1></h1>`标签中。
代码示例:
<body>
<div id="steverocket" class="demo" style="background-color: bisque">
插入文本:{{ message }}<br>
{{ age }}<br>
<!-- 可以看到使用这种方式给img的属性指定URL无法实现效果,使用方法请参考Vue的指令v-bind-->
<img src="{{ url }}"/><br>
<img v-bind:src="url"/><br>
</div>
</body>
<script>
// data 选项
const HelloVueApp = {
data() {
return {
message: "This is vue3 app, my name is SteveRocket. 公众号:CTO Plus",
age: 28,
url: "./../../../static/wechat.png"
}
}
}
Vue.createApp(HelloVueApp).mount("#steverocket");
// mount("#steverocket") 将 Vue 应用 HelloVueApp 挂载到 <div id="steverocket" class="demo"> 中。
// {{ }} 用于输出对象属性和函数返回值。
// {{ message }} 对应应用中 message 的值。
</script>
{{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值,如果 message 属性的值发生了改变,{{...}} 标签内容也会更新。
如果不想改变标签的内容,可以通过使用 v-once 指令执行一次性地插值,当数据改变时,插值处的内容不会更新。
<span v-once>这个将不会改变: {{ message }}</span>
输出结果
HTML
使用 v-html 指令用于输出html 代码。
代码示例
<body>
<p>author:<b>SteveRocket</b></p>
<p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p>
{{ htmlContent }}
<p><span v-html="htmlContent"></span></p>
</body>
<script>
const VueApp = {
data() {
return {htmlContent: '<span style="color: red">这里会显示红色!</span>'}
}
}
Vue.createApp(VueApp).mount('body')
</script>
输出结果
属性绑定
属性绑定是将数据绑定到HTML属性上的一种方式。在Vue 3中,我们可以使用`v-bind`指令或简写的冒号来进行属性绑定,HTML 属性中的值应使用 v-bind 指令。例如:
<img :src="imageSrc" alt="Image">
上述代码中,我们将`imageSrc`变量的值绑定到`src`属性上,以动态地加载图片。
代码示例:
<style>
.classSteveRocket{
background-color: #7030AB;
color: #ffffff;
}
</style>
<body>
<p>author:<b>SteveRocket</b></p>
<p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p>
<label for="r1">修改颜色</label><input type="checkbox" v-model="isShow" id="r1"><br>
<br>
<div v-bind:class="{'classSteveRocket': isShow }">
v-bind:class 指令
</div>
</body>
<script>
const VueApp = {
data() {
return {
isShow: false,
isDisable: null,
isDefine: undefined
}
}
}
Vue.createApp(VueApp).mount('body')
</script>
输出结果
对于布尔属性,常规值为 true 或false,如果属性值为 null 或 undefined,则该属性不会显示出来。
<button v-bind:disabled="isButtonDisabled">按钮</button>
以上代码中如果 isButtonDisabled 的值是 null 或 undefined,则 disabled属性甚至不会被包含在渲染出来的 <button> 元素中。
表达式
在Vue 3中,我们完全可以在模板中使用JavaScript表达式来进行计算和逻辑操作。表达式要包含在双花括号中`{{}}`。例如:
<p>{{ num1 + num2 }}</p>
上述代码中,我们对`num1`和`num2`进行相加的计算,并将结果插入到`<p></p>`标签中。
代码示例
<div id="steverocket">
Vue.js 都提供了完全的 JavaScript 表达式支持<br>
算术表达式:{{ 11 + 22 }}<br>
布尔表达式:{{ ok ? 'Yes' : 'No' }}<br>
字符串拆分翻转:{{message.split(' ').reverse().join(' ')}}<br>
<div v-bind:id="'list-'+id">SteveRocket Study Vue3</div>
表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。需要注意的是:每个绑定都只能包含单个表达式,所以下面的例子都不会生效:
<!-- 这是语句,不是表达式,会报错-->
<!-- {{ var name = 'steverocket'}} -->
<!-- 流控制也不会生效,请使用三元表达式-->
<!-- {{ if(ok) {return message } }} -->
<p>{{ message }}</p>
<button v-on:click="reverseMessage">翻转字符串</button>
</div>
</body>
<script>
const app = Vue.createApp(
{
data() {
return {
ok: true,
message: "my name is steverocket",
id: 100
}
},
methods: {
reverseMessage(){
this.message = this.message.split(' ').reverse().join(' ');
}
}
}
).mount("#steverocket");
</script>
输出结果
参数
参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
<body>
<p>author:<b>SteveRocket</b></p>
<p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p>
<p><a v-bind:href="url" v-on:click="isClick">微信公众号:CTO Plus</a></p>
</body>
<script>
const blogUrl = 'https://mp.weixin.qq.com/s/V5Axn-ZWi22ubh5Jiocb9g'
const VueApp = {
data() {
return {
url: blogUrl
}
},
methods: {
isClick() {
console.log("超链接" + blogUrl + "被点击,即将跳转");
}
}
}
Vue.createApp(VueApp).mount('body')
</script>
在这里 href 是参数,告知v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
点击后的响应效果
另一个例子是 v-on 指令,它用于监听 DOM 事件:
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写(2.6.0+) -->
<a @[event]="doSomething"> ... </a>
在这里参数是监听的事件名。
修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>
用户输入
在 input 输入框中我们可以使用v-model 指令来实现双向数据绑定:
<body>
<p>author:<b>SteveRocket</b></p>
<p>WeChat:<a href="https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q">https://mp.weixin.qq.com/s/0yqGBPbOI6QxHqK17WxU8Q</a></p>
<br/>
<p>{{ message }}</p>
<input v-model="message"/>
</body>
<script>
const VueApp = {
data() {
return {
message: "公众号:CTO Plus"
}
}
}
Vue.createApp(VueApp).mount('body')
</script>
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
输出结果
我们通过在上面的输入框中输入内容,段落中的内容会随之而改变。
按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。
总结
Vue 3的模板语法提供了一种简洁、直观的方式将数据渲染到DOM中。我们可以使用插值和表达式进行文本插值和属性绑定,使用指令进行条件渲染、列表渲染和事件绑定等功能,其中,插值表达式用于将动态数据绑定到模板中,指令用于处理DOM元素的属性、事件和样式,条件渲染和列表渲染则用于根据条件来动态地展示和处理数据。
通过掌握和运用Vue3的模板语法,开发者可以轻松构建复杂的用户界面,提高开发效率和代码质量。让我们一起充分发挥Vue3的优势,构建出令人满意的应用程序吧!
后面的文章,我将介绍Vue模板的过滤器,使用过滤器对数据进行格式化,计算属性和监听器用于处理数据的计算和响应。这些特性使得Vue开发更加灵活和高效,帮助我们构建出优雅而功能强大的用户界面。
下面的文章将分别介绍:
-
Vue3进阶:条件语句的介绍和编码使用详解(附代码与群资料)
-
Vue3进阶:循环语句的介绍和编码使用详解(附代码与群资料)
-
Vue3进阶:组件的介绍、使用详解和代码实战案例
-
大前端专栏
https://blog.csdn.net/zhouruifu2015/category_5734911.html
更多精彩,关注我公号,一起学习、成长
CTO Plus
一个有深度和广度的技术圈,技术总结、分享与交流,我们一起学习。 涉及网络安全、C/C++、Python、Go、大前端、云原生、SRE、SDL、DevSecOps、数据库、中间件、FPGA、架构设计等大厂技术。 每天早上8点10分准时发文。
306篇原创内容
公众号
推荐阅读:
最后,不少前端粉丝后台留言问加技术交流群,之前也一直没弄,所以为满足粉丝需求,现建立了一个关于前端开发相关的技术交流群,加群验证方式必须为本公众号的粉丝,群号如下: