vue.js基础知识点讲解
Posted 观奇笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js基础知识点讲解相关的知识，希望对你有一定的参考价值。
“ vue.js是当下最流行的一个js框架，今天我给大家继续讲解vue知识点。”
哈喽，大家好！我是观奇笔记。今天给大家继续讲解vue的知识点。
今天讲解vue的基础知识点。
引入vue.js文件。
(1).下载vue.js文件：点击下载
新建html文件，在head标签内引入。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>JavaScript
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>引入vue</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> //内容 </div> {{ 1+2 }} <script> new Vue({ el: '#app' }) </script> </body></html>知识点。
JavaScript
//1.声明式渲染{{ 1+2 }}<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>引入vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
//内容
</div>
{{ msg }}
<script>
new Vue({
el: '#app',
data: {
msg: '111'
}
})
</script>
</body></html>//2.条件<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>引入vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="isShow">显示内容</p>
</div>
{{ msg }}
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
</body></html>//3.循环。<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>引入vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</div>
{{ msg }}
<script>
new Vue({
el: '#app',
data: {
list: ['1','2','3']
}
})
</script>
</body></html>1
我们今天先说到这里，下次继续聊vue。
以上是关于vue.js基础知识点讲解的主要内容，如果未能解决你的问题，请参考以下文章