Vue学习笔记(01) - Vue 基础入门
程序员文章站
2022-04-24 10:19:18
...
01 - Vue 基础入门
一. 准备
1.1 开发工具以及插件
开发工具 : VsCode
插件 : Live Server
二. 基础入门
2.1 vue的helloworld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE基础</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<div id="app">
{{message}}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello world"
}
})
</script>
</body>
</html>
2.1.1 helloworld细节
2.1.2 理解前端渲染
2.2 vue的v-clock指令
2.2.1 v-clock的作用
**解释 : 闪动 就是 在刷新的时候, 有时候可能会先出现类似 {{data}} 然后再出现值得情况 **
2.2.2 v-clock的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" >
<div v-cloak>{{data}}</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
cloak 用法 :
1. 提供样式 =>
<style type="text/css">
[v-cloak]{
display: none;
}
2. 在差值表达式中添加v-cloak
<div v-cloak>{{data}}</div>
</style>
*/
var app = new Vue({
el:"#app",
data:{
data:"hello Vue"
}
})
</script>
</body>
</html>