从零开始学Vue3——(一)入门
文章目录前言一、Vue是什么?二、Vue的安装与使用方法1.直接引用script方法2.安装脚手架三、创建应用实例四、Vue模板语法文本渲染v-textv-html{{}}属性渲染v-bind:attribute="值"条件渲染v-ifv-if-elsev-elsev-show列表渲染遍历数组遍历对象范围v-on:事件="表达式"总结前言Vue作为国内使用率最高的框架,学习这门技术也越来越重要,这
文章目录
前言
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语法有了初步的理解。明天继续!
点个赞吧👍
更多推荐
所有评论(0)