目次
まず次の例を見て、vue の使用法を確認してください。
-
<body> <div id="box"> { {myname}} - { {myage}} </div> <script> var vm = new Vue({ el:"#box", data:{ myname:"lyx", myage:26 } }) </script> </body> - 操作の結果は次のようになります。 vue オブジェクトが vm インスタンスにマウントされます。
- コンソールでvm. 属性名を直接変更する
次に@clickを学びましょう
@click フォームは v-on:click の短縮形であることがわかります。
<a v-on:click="doSomething"> ... </a>
<!-- 简写 -->
<a @click="doSomething"> ... </a>
vueオブジェクトのel、data、method属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="box">
{
{myname}} - {
{myage}}
<button @click="handleChange()">点我控制台输出</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
myname:"lyx",
myage:26
},
methods:{
handleChange(){
console.log("哈哈哈哈哈哈哈哈哈");
}
}//定义所有事件方法
})
</script>
</body>
</html>handleChange() メソッドの myname と myage の値を変更し、ボタンをクリックしてページを更新すると、次の内容が表示されます。
<div id="box">
{
{myname}} - {
{myage}}
<button @click="handleChange()">click me</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
myname:"lyx",
myage:26
},
methods:{
handleChange(){
console.log("哈哈哈哈哈哈哈哈哈");
vm.myname = "xmq";
vm.myage = 22;
}
}//定义所有事件方法
})
</script>this.myname、this.myage で値を変更します。
操作の結果は次のようになります。
例: 背景色を変更する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 本地导入 -->
<script src="../vue/vue.js"></script>
<style>
.bgRed {
background: #da3939;
height: 100px;
width: 100px;
}
.bgBlue {
background: #4dddd1;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="box">
{
{myname}} - {
{myage}}
<button @click="handleChange()">click me</button>
<div :class="whichcolor"></div>
</div>
<script>
new Vue({
el: "#box",
data: {
myname: "lyx",
myage: 26,
whichcolor: "bgRed"
},
methods: {
handleChange(t) {
console.log("哈哈哈哈哈哈哈哈哈", this);
this.myname = "xmq";
this.myage = 22;
this.whichcolor = "bgBlue";
}
}//定义所有事件方法
})
</script>
</body>
</html>例：ボタンボタンを繰り返しクリックすると、背景色が連続的に切り替わります。
効果は次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 本地导入 -->
<script src="../vue/vue.js"></script>
<style>
.bgRed {
background: #da3939;
height: 100px;
width: 100px;
}
.bgBlue {
background: #4dddd1;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="box">
{
{myname}} - {
{myage}}
<button @click="handleChange()">click me</button>
<div :class="whichcolor"></div>
<br />
<div :class="isColor?'bgRed':'bgBlue'"></div>
</div>
<script>
new Vue({
el: "#box",
data: {
myname: "lyx",
myage: 26,
whichcolor: "bgRed",
isColor: true
},
methods: {
handleChange(t) {
console.log("哈哈哈哈哈哈哈哈哈");
this.myname = "xmq";
this.myage = 22;
this.whichcolor = "bgBlue";
this.isColor = !this.isColor;
}
}//定义所有事件方法
})
</script>
</body>
</html>