Vue快速入门
提示:以下是本篇文章正文内容,下面案例可供参考
一、Vue指令和参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<p>{{5+5+5}}</p>
</div>
<script>
new Vue({
//绑定到那个元素
el:'#app',
//数据源
data:{
message:"ssm-vue 全栈"
},
//自定义方法
methods:{
},
})
</script>
</body>
</html>
执行结果;
ssm-vue 全栈
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "app">
<p> {{messgae}} </p>
<p>{{5+5}}</p>
<p><a v-bind:href="url"> qq空间 </a></p>
</div>
<script>
new Vue({
el:'#app',
data:{
messgae:"1158630056" ,
url:"https://qzone.qq.com/"
}
})
</script>
</script>
</body>
</html>
执行结果
二、v-for条件指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="user in users" >
{{user.name}}
</li>
</ol>
</div>
<script>
new Vue({
el:'#app',
data:{
users:[
{name:"小王"},
{name:"小e"},
{name:"小D"},
{name:"小K"},
]
}
})
</script>
</script>
</body>
</html>
执行结果
三、v-model指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id ="app">
<p>{{phone}}</p>
手机号<input v-model ="phone">
</div>
<script>
new Vue({
el:'#app',
data:{
phone:"手机号"
}
})
</script>
</script>
</body>
</html>
执行结果
四、v-on和v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id ="app">
<p>{{title}}</p>
<button @click="changeTitle">完善标题</button>
<a :href="url"> qq空间 </a>
</div>
<script>
new Vue({
el:'#app',
data:{
title:"面试专题",
url:"https://qzone.qq.com/",
},
methods:{
changeTitle:function(){
this.title= "||小滴课堂 2020年"+this.title ;
}
}
})
</script>
</script>
</body>
</html>
五、 component组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>⼩滴课堂vue快速⼊⻔</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id ="app">
<xd_component message="qq空间 https://qzone.qq.com/"></xd_component>
</div>
<script>
Vue.component('xd_component',{
props:{
message:{
type : String
}
},
data : function(){
return {
count : 0
}
},
template : '<button @click="count++">{{message}} 点击 {{count}}次 </button>'
})
new Vue({
el:'#app',
data:{
title:"面试专题",
url:"https://qzone.qq.com/",
},
methods:{
changeTitle:function(){
this.title= "||小滴课堂 2020年"+this.title ;
}
}
})
</script>
</script>
</body>
</html>
props的作用是像组件传值
六、Vue快速配置
配置镜像淘宝脚手架
打开cmd在命令行中输入
npm config set registry https://registry.nmp.taobao.org
安装全局脚手架
打开cmd在命令行中输入
npm install -g @vue/cli
未来所有的前端项目都可以使用这个cli工具
用Idea或者VScode打开前端项目
运行项目的命令
npm run serve