一、vue入门学习前准备
1、安装vue.js插件
当安装插件后无法new一个vue component文件时，需要进行配置
此时就可以new了，如下图
2、学习vue的入门demo
①、新建一个html，如下图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vu=new Vue({
el: "#app",
data:{
message: "hello,vue!!"
}
})
</script>
</body>
</html>②、直接浏览器打开该html,message内容直接展示在div中
③、鼠标悬停查看动态绑定的提示信息！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<span v-bind:title="message">
鼠标悬停查看动态绑定的提示信息
</span>
</div>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vu = new Vue({
el: "#app",
data: {
message: "hello,vue!!"
}
})
</script>
</body>
</html>效果如右图
④、vue中的if判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="flag">yes</h1>
<h1 v-else>No</h1>
<br>
<h2 v-if="status==1">等于1</h2>
<h2 v-else-if="status==2">等于2</h2>
<h2 v-else>等于其他</h2>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vu = new Vue({
el: "#app",
data: {
flag: false,
status: "2"
}
})
</script>
</body>
</html>运行结果如右图
⑤、VUE的for循环使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="list in lists">
{{list.title}}
</li>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vu = new Vue({
el: "#app",
data: {
lists: [
{title: "我爱学java"},
{title: "我爱学VUE"}
]
}
})
</script>
</body>
</html>运行后结果如右图
⑥、vue的事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="clicks">
vue事件绑定
</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vu = new Vue({
el: "#app",
data: {
tite: "学习vue!!!"
},
methods: {
clicks: function(event){
alert("我要"+this.tite)
}
}
})
</script>
</body>
</html>运行结果如右图