您可以直接将以下代码c,v到编辑器打开
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>你好vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
/* 解决差值表达式的闪动问题 */
[v-cloak] {
display: none;
}
.num {
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<!-- MVVM设计思想M:数据,V:页面视图,VM:vue实例 -->
<!-- 渐进式的js框架 声明式渲染 组件系统 客户端路由 集中式状态管理系统 项目 -->
<!-- 根元素 -->
<div id="app">
<!-- 差值表达式 -->
<div>
<div v-cloak> {{msg}}</div>
<div v-cloak class="num">{{num}}</div>
<!-- 支持计算 -->
<div v-cloak>{{msg+222}}</div>
<!-- 原文输出 -->
<div v-pre>{{msg2}}</div>
<!-- 只编译一次 -->
<div v-once>{{info}}</div>
<!-- 代替差值表达式 -->
<div v-text="msg"></div>
<!-- 解析html片段 -->
<div v-html="msg1"></div>
</div>
<hr>
<!-- 双向数据绑定常用于表单-->
<div>
<input type="text" v-model="msg">
</div>
<hr>
<!-- 事件绑定 -->
<div>
<button v-on:click="num++">点击加1</button>
<button @click="num--">点击减1</button>
<!-- 1.直接函数名调用,不加()默认携带事件对象 -->
<button @click="jian">点击加5</button>
<!-- 2.函数名加()调用 -->
<button @click="jian5()">点击减5</button>
<!-- 事件传参 -->
<button @click="chuancan(123)">点击加123</button>
<!-- 事件对象$event固定写法 -->
<button @click="duixiang(456,$event)">点击减456</button>
<!-- 事件修饰符之stop阻止冒泡-->
<a href="#" @click.stop="jian">stop阻止冒泡</a>
<!-- 事件修饰符之prevent阻止默认行为-->
<a href="https://www.baidu.com" @click="jian">去往百度</a>
<a href="https://www.baidu.com" @click.prevent="jian">prevent阻止默认行为</a>
<!-- 按键修饰符之回车 -->
<input type="text" @keyup.enter="huiche" value="回车乘2">
<!-- 自定义按键修饰符 -->
<input type="text" @keyup.f1="huiche" value="回车乘2">
</div>
<hr>
<!-- 属性绑定 -->
<div>
<div>
<a v-bind:href="url">京东</a>
<a :href="url">京东</a>
</div>
</div>
<hr>
</div>
<script type="text/javascript">
// 自定义按键修饰符13是按键回车的固定的唯一标识,f1自定义名
Vue.config.keyCodes.f1 = 13;
var vm = new Vue({
// 实例挂载位置
el: '#app',
// 实例所需数据
data: {
msg: 'nihao vu',
msg1: ' <h1>nihao </h1>',
info: '改变无效',
num: 1,
url: 'https://www.jd.com'
},
// 定义事件
methods: {
// 通过this可以访问vue实例对象,
jian: function(event) {
this.num += 5
// 得到事件绑定元素
console.log(event.target.tagName, 111111111);
},
jian5: function() {
this.num -= 5
},
// 事件传参
chuancan: function(i) {
this.num += i
},
// 事件对象
duixiang: function(i, event) {
this.num -= i
// 得到事件绑定元素
console.log(event.target.tagName, 2222222222222);
// 得到事件绑定内容
console.log(event.target.innerHTML, 3333333);
},
// 按键修饰符
huiche: function() {
this.num *= 2
// 得到事件绑定按键码
console.log(event.keyCode, 44444444);
}
}
})
</script>
</body>
</html>
遇见即是缘分,不吝望请赐教