文章目录
前言
一、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/vue@next"></script>方法2.安装脚手架
npm install -g @vue/cli目前处于学习初步阶段，目前文中安利使用的都是直接引入的方式
三、创建应用实例
写第一个vue实例吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg/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/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——(一)入门
发布评论