2 Vue - 基础1
作者：互联网
1 v-text和v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 关联数据 v-text -->
<p>{{ message }}</p>
<p v-text="user.name"></p>
<p v-text="user.password"></p>
<!-- 关联数据 v-html -->
<p v-html="thtml"></p>
</div>
<script>
var app = new Vue({ // 创建 Vue 应用
el: '#app', // 挂载点，挂载元素
data: { // 数据（响应式）
message: 'Hello lizi!',
user: {
name: 'lizi',
password: '123456'
},
thtml: "<span style='color: red'>测试 innerhtml</span>"
}
})
</script>
</body>
</html>
2 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-on:事件名=“方法名” -->
<!-- @事件名=“方法名” -->
<input type="button" v-on:click="login" value="v-on登录">
<br>
<input type="button" @click="login" value="@登录">
<!-- 测试数据被this调用改变 -->
<p @click="changeMsg">{{ message }}</p>
</div>
<script>
var app = new Vue({ // 创建 Vue 应用
el: '#app', // 挂载点，挂载元素
data: { // 数据（响应式）
message: 'Hello lizi!',
user: {
name: 'lizi',
password: '123456'
},
thtml: "<span style='color: red'>测试 innerhtml</span>"
},
methods: {
login(){
alert("login sucess")
},
// 方法中调用数据
changeMsg(){
this.message = "message 数据已经被改变"
}
}
})
</script>
</body>
</html>
3 一个小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-on:事件名=“方法名” -->
<!-- @事件名=“方法名” -->
<input type="button" @click="mySub" value="-">
<span>{{ myNum }}</span>
<input type="button" @click="myAdd" value="+">
</div>
<script>
var app = new Vue({ // 创建 Vue 应用
el: '#app', // 挂载点，挂载元素
data: { // 数据（响应式）
myNum: 0,
},
methods: {
myAdd(){
if(this.myNum < 3){
this.myNum = this.myNum + 1;
}
else {
alert("最多买3个");
}
},
// 方法中调用数据
mySub(){
if(this.myNum > 0){
this.myNum = this.myNum - 1;
}
else {
alert("不能小于0");
}
}
}
})
</script>
</body>
</html>
标签：Vue,app,基础,myNum,挂载,message,lizi 来源： https://www.cnblogs.com/lizitestdev/p/14645312.html