文章目录

前言

一、Vue是什么？

二、Vue的安装与使用

方法1.直接引用script

方法2.安装脚手架

三、创建应用实例

四、Vue模板语法

文本渲染

v-text

v-html

{{}}

属性渲染

v-bind：attribute="值"

条件渲染

v-if

v-if-else

v-else

v-show

列表渲染

遍历数组

遍历对象

范围

v-on:事件="表达式"

总结

前言

Vue作为国内使用率最高的框架，学习这门技术也越来越重要，这篇博客记录了本人学习Vue的过程以及学习笔记。本文学习版本为Vue3

一、Vue是什么？

vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。
特点：简单，高效，生态丰富（插件多）

二、Vue的安装与使用

方法1.直接引用script

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

方法2.安装脚手架

npm install -g @vue/cli

目前处于学习初步阶段，目前文中安利使用的都是直接引入的方式

三、创建应用实例

写第一个vue实例吧！

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://unpkg.com/vue@next"></script></head><body><div id="app">{{msg}}</div></body><script>const app = Vue.createApp({data() {return {msg: "Vue!Me-Wow!"}}});const vm = app.mount('#app')console.log(vm.msg); // Vue!Me-Wow!</script>
</html>

createApp 函数创建一个新的应用实例

mount 根据id将创建的应用实例与html模板相关联

其中 {{}} 为文本渲染语法，总结在下方

四、Vue模板语法

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
联系html模板与JavaScript数据模型

文本渲染

v-text

与innertext相似，不会对内部标签进行编译，直接输出

v-html

与innerHtml相似，会按照html的规则渲染，不会作为Vue版本进行编译

如下方例子：

<!-- html部分 -->
<div id="app"><p v-text="msg"></p><p v-html="msg"></p>
</div>

//js部分
const app = Vue.createApp({data() {return {msg: "Vue!<b>Me-Wow!</b>"}}
});
const vm = app.mount('#app')
console.log(vm.msg); //Vue!<b>Me-Wow!</b>

运行结果如下：

{{}}

{{}}在进行纯文本渲染时与v-text相似，特别的是{{}}可以运行单行js表达式。

<!-- html部分 -->
<div id="app"><p>1+2={{1+2}}</p><p>{{msg}}</p><p>{{msg.length}}</p><p>{{msg.split("").reverse().join("")}}</p><p>{{2>18?'大于':'小于'}}</p>
</div>

运行结果：

属性渲染

v-bind：attribute="值"

简写为 :属性名="值"

<!-- html部分 -->
<div id="app"><p v-bind:title="msg">hello world</p><p :title="msg">hello Vue</p>
</div>

运行结果：

条件渲染

v-if

用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

v-if-else

顾名思义，充当 v-if 的“else-if 块”，并且可以连续使用：

必须紧跟在带 v-if 或者 v-else-if 的元素之后，否则它将不会被识别

v-else

添加一个“else 块”：

必须紧跟在带 v-if 或者 v-else-if 的元素的后面，同v-if-else

<!-- html部分 -->
<div id="app"><p v-if="islog">欢迎回来！</p><p v-else>请登录</p><hr ><p v-if="score>=90">{{score}}优秀</p><p v-else-if="score>=80">{{score}}良好</p><p v-else-if="score>=70">{{score}}中等</p><p v-else-if="score>=60">{{score}}及格</p><p v-else>{{score}}不及格</p><hr ><p v-show="show">Mewow</p>
</div>

//js部分
const app = Vue.createApp({data() {return {islog:false,score:100,show:true}}
});
const vm = app.mount('#app')

运行结果：

v-show

与v-if相似，可以控制元素的显示与隐藏；

不同点：v-if通过移除节点的方式隐藏，而v-show通过css属性进行隐藏与显示；

所以，当需要进行频繁切换隐藏或显示时，推荐用v-show，反之推荐使用v-if。

示例代码见v-if部分

列表渲染

遍历数组

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

item变量当前数据；index 当前下标

遍历对象

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

范围

v-for="item in 5"

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

v-for优先级高于v-if，同时使用时要借助<template>标签

    <!-- html部分 -->    <div id="app"><ul><li v-for="item in list">{{item}}</li></ul><hr><p v-for="(value,key) in obj">{{key}} ： {{value}}</p><hr><template v-for="i in 10"><p v-if="i%2===0">{{i}}</p></template></div>

     //js部分const app = Vue.createApp({data() {return {list: [1, 2, 3, 4],obj: {name: "Mewow",age: 18},}}});const vm = app.mount('#app')

运行结果：

v-on:事件="表达式"

缩写为：@事件="表达式"

添加一个事件监听器，通过它调用在实例methods中定义的方法。

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

eg：点击按钮按钮上的数字增加

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>数字加1</title><script src="https://unpkg.com/vue@next"></script></head><body><div id="app"><button type="button" @click="num++">{{num}}</button></div></body><script type="text/javascript">Vue.createApp({data(){return{num:1}}}).mount("#app");</script>
</html>

运行结果：

总结

以上就是今天学习Vue的收获，对Vue语法有了初步的理解。明天继续！

点个赞吧

从零开始学Vue3——(一)入门相关推荐

学理财应该从哪些学起_从零开始学理财这些入门知识你一定要牢记
想要一生过得无忧无虑吗?那就必须要懂得怎么理财,其实我们有时懂得一点理财的小窍门,也可以带来不少益处,下面小编就来教教大家从零开始学理财,一起来看看理财的方法和技巧都有哪些呢? 理财小技巧 1.确立理 ...
从零开始学五线谱_从零开始学简谱(快速入门)
目录第一章乐音基本常识第一节实践中能应用的乐音第二节乐音的特性一.乐音的高低二.乐音的长短三.乐音的强弱四.乐音的音色音乐小常识(乐音的分音列) 第三节乐音高低划分的基本单位 ...
视频教程-从零开始学BGP--【适用于思科CCNA、CCNP入门】-路由协议
从零开始学BGP--[适用于思科CCNA.CCNP入门] 原苏州万博IT教育创始人兼CEO,苏州46516VUE思科考试中心负责人.9年思科培训(CCNA,CCNP,CCIE全能讲师)和考场管理经验, ...
从零开始学黑客：网络黑客新手入门指南(转)
从零开始学黑客:网络黑客新手入门指南(转) (一)系统基本知识 1.a.什么是IP:要是真的想说清楚什么是IP,那是一项很繁重的工作.简单的来说,IP就是所有Internet或是局域网上的主机的身份证 ...
从零开始学Java【JavaSE入门】
文章目录一.Java介绍 1.基本概念 2. 环境的配置二.基础内容[Java语言基础] 1.标识符 2.关键字 3.字面值 3.变量 4.数据类型 1.整数型: 2.浮点型 5.运算符 6. 控 ...
图书馆计算机书籍入门,数字化阅读空间 | 想要从零开始学电脑，却不知道该从哪入手？...
原标题:数字化阅读空间 | 想要从零开始学电脑,却不知道该从哪入手? 不知道大家有没有发现最近电脑更新换代越来越快了 Win经典版本已经快被淘汰了对于办公软件大家也已经很少再用 office20 ...
零基础自学Python编程从入门到精通基础教程《从零开始学Python》
推荐理由本书面向零基础读者,巧用类比式描述,技术知识点轻松掌握: 基于案例进行讲解,读者可轻松理解编程思维,并在配套代码中参透Python编程的技巧. 本书囊括5项常见任务,助力快速掌握Python ...
从零开始学python电子书-从零开始学Python程序设计 PDF 完整影印版
给大家带来的一篇关于Python零基础相关的电子书资源,介绍了关于从零开始.Python.程序设计方面的内容,本书是由机械工业出版社出版,格式为PDF,资源大小172 MB,吴惠茹编写,目前豆瓣.亚马 ...
从零开始学python数据分析-从零开始学Python数据分析与挖掘 PDF 扫描版
给大家带来的一篇关于数据挖掘相关的电子书资源,介绍了关于Python.数据分析.数据挖掘方面的内容,本书是由清华大学出版社出版,格式为PDF,资源大小67.8 MB,刘顺祥编写,目前豆瓣.亚马逊.当当 ...

从零开始学Vue3——(一)入门

文章目录

前言

一、Vue是什么？

二、Vue的安装与使用

方法1.直接引用script

方法2.安装脚手架

三、创建应用实例

四、Vue模板语法

文本渲染

v-text

v-html

{{}}

属性渲染

v-bind：attribute="值"

条件渲染

v-if

v-if-else

v-else

v-show

列表渲染

遍历数组

遍历对象

范围

v-on:事件="表达式"

总结

从零开始学Vue3——(一)入门相关推荐

最新文章

热门文章