组件
v-text 文字
v-html 链接
v-on 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app">
<h1 v-text="message"></h1>
<p v-html="info"></p>
<input type="button" value="事件绑定" v-on:click="doIt">
<input type="button" value="事件绑定" @keyup.enter="doIt">
</div>
<!-- <script type="module" src="/src/main.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el: '#app',
data: {
message: 'Hello World!',
info: "<a href='https://www.baidu.com'>百度</a>"
},
methods: {
doIt: function () {
alert("事件绑定成功");
}
}
})
</script>
</body>
</html>
v-show 元素显示和隐藏
<img src="th.jpg" v-show="true">
v-if
v-bind
<h1 v-bind:title="tit">this is test</h1>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr">{{index+1}}黑马程序员校区{{item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el: '#app',
data: {
arr:["北京","上海","广州","深圳"]
}
})
</script>
</body>
</html>
v-model 双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app">
<input type="button" value="修改值" @click="SetM">
<input type="text" v-model="message" @keyup.enter="GetM">
<h2>{{message}}</h2>
</div>
<!-- <script type="module" src="/src/main.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el: '#app',
data: {
message: 'Hello World!'
},
methods: {
GetM:function (){
alert(this.message);
},
SetM:function (){
this.message="酷丁鱼";
}
}
})
</script>
</body>
</html>
自己尝试写的应用
小黑记事本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小黑记事本</title>
</head>
<body>
<section id="todoapp">
<h1>小黑记事本</h1>
<input autofocus="autofocus" autocomplete="off" placeholder="请输入内容" v-model="inputValue">
<button v-on:click="addTodo">添加事项</button>
<li v-for="(item,index) in list" :key="index">
{{index+1}}{{item}}<button v-on:click="deleteTodo(index)">删除事项</button>
</li>
<button v-on:click="clearTodo">清空所有</button>
</section>
<div id="app">
</div>
<!-- <script type="module" src="/src/main.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#todoapp',
data:{
list:["吃饭饭","睡觉觉","打豆豆"],
inputValue:""
},
methods:{
addTodo(){
this.list.push(this.inputValue)
},
clearTodo(){
this.list=[]
},
deleteTodo(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
网络应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios</title>
</head>
<body>
<input type="button" value="get" class="get">
<input type="button" value="post" class="post">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector('#get').onclick=function(){
axios.get("http://autumnfish/api/joke/list?num=6").then(function (response) {
console.log(response)
},function(err){
console.log(err);
}
)
}
document.querySelector('#post').onclick=function(){
axios.post("http://autumnfish/api/user/reg",
{username:"123"}).then(function (response) {
console.log(response)}
)
}
</script>
</body>
</html>