大家好,我是天空之城,今天给大家带来小福利,带你快速入门前端vue框架
安装vscode软件,编辑html文件,每次编辑完都要保存下,不然无法显示修改后的效果,这点比较坑
首先要引入vue.js文件,也可以下载vue.js到本地
在new Vue方法中定义了属性和方法,属性包括username和code,方法是methods里面的ChangeUserName,然后在div id=app标签里面进行调用属性和方法,这里跟flask不同,flask可以在后端定义属性和方法,在前端调用;这里是前端定义和前端调用。
下面是绑定class和style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的vue网页</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.pclass{
font-size: 40px;
}
.title{
color:blue
}
.main{
font-weight: 200;
}
</style>
</head>
<body>
<a href="https://www. baidu.com/">百度一下,你就知道</a>
<div id="app">
<p>{{username}}</p>
<!--显示原生的HTML-->
<p v-html="code"></p>
<button @click='ChangeUserName'>点击修改用户名1</button>
<button @click='ChangeUserName2'>点击修改用户名2</button>
<!-- 绑定属性class和style -->
<p v-bind:class="classname" >12345</p>
<p v-bind:class='[classname,pclass1,pclass2]'> 天下第一 </p>
</div>
<script>
new Vue({
el:'#app',
data:{
username:'我是无敌大帅哥',
code:'<a href="https://www. baidu.com/">百度一下,你就知道</a>',
classname:'pclass',
pclass1:'title',
pclass2:'main'
},
methods:{
ChangeUserName:function(){
this.username='我是风流倜傥完颜康'
},
ChangeUserName2:function(){
this.username='我是无敌大帅哥'
}
}
})
</script>
</body>
</html>
再来一遍,补充调用style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的vue网页</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.pclass{
font-size: 40px;
}
.title{
color:blue
}
.main{
font-weight: 200;
}
</style>
</head>
<body>
<a href="https://www. baidu.com/">百度一下,你就知道</a>
<div id="app">
<p>{{username}}</p>
<!--显示原生的HTML-->
<p v-html="code"></p>
<button @click='ChangeUserName'>点击修改用户名1</button>
<button @click='ChangeUserName2'>点击修改用户名2</button>
<!-- 绑定属性class和style -->
<p v-bind:class="classname" >12345</p>
<p v-bind:class='[classname,pclass1,pclass2]'> 天下第一 </p>
<p v-bind:style='{"background-color":color}'> 穆桂英挂帅 </p>
<p v-bind:style='pstyle'>小龙女是我的梦中情人</p>
</div>
<script>
new Vue({
el:'#app',
data:{
username:'我是无敌大帅哥',
code:'<a href="https://www. baidu.com/">百度一下,你就知道</a>',
classname:'pclass',
pclass1:'title',
pclass2:'main',
color:'red',
pstyle:{
backgroundColor:'blue',
fontSize:'22px'
}
},
methods:{
ChangeUserName:function(){
this.username='我是风流倜傥完颜康'
},
ChangeUserName2:function(){
this.username='我是无敌大帅哥'
}
}
})
</script>
</body>
</html>