Vue快速入门（一）
程序员文章站
2022-06-06 19:13:55
...
引入Vue
cdn方式<script src="https://unpkg.com/vue"></script>
本地文件加载方式<script src="./vue.js"></script>
实例化Vue对象
在script标签中或者引入JavaScript文件实例化Vue对象。
<body>
<!-- root是根容器 -->
<div id="root">
<h1>{{ name }}</h1>
</div>
</body>
// 实例化Vue对象
new Vue({
el: '#root',
data: {
name: 'vue instance'
}
})
/**
* el: element 需要将试图挂载的元素，一定是HTML中的根容器元素
* data: 用于当前数据的存储，以键值对的形式存储，在HTML中可以直接使用 {{ key }}的方式获取值
*
*/
Vue方法
Vue实例中使用methods定义方法，可以在{{ }}中直接使用方法，且可以像正常函数那样传递参数。
在Vue的方法中，使用Vue实例中的data数据，可以以this.xxx的形式获取。
<body>
<!-- root是根容器 -->
<div id="root">
<h1>{{ greet(new Date()) }}</h1>
<p>Name: {{ name }}</p>
<p>Job: {{ job }}</p>
</div>
</body>
new Vue({
el: '#root',
data: {
name: 'vue instance',
job: 'web development'
},
methods: {
greet(time) {
return `Hello Vue ${time} ${this.name}`
}
}
})
属性绑定
如何给元素绑定值？
在Vue实例的data中新增一个数据：website: 'http://www.baidu.com'。
在HTML中：<a href={{website}}>baidu</a>，这样是无法将数据绑定到属性上的。所以要使用Vue的v-bind指令。
<!-- v-bind -->
<a v-bind:href="website">baidu</a>
<!-- v-bind简写方式 -->
<a :href="website">baidu</a>
<input type="text" :value="name">
事件：点击、双击、鼠标
<!-- root是根容器 -->
<div id="root">
<h1>Events</h1>
<!-- v-on:的形式绑定事件 -->
<button v-on:click="add(1)">涨一岁</button>
<!-- @xxx v-on:的简写形式 -->
<button @click="subtract(1)">减一岁</button>
<button v-on:dblclick="add(10)">加十岁</button>
<button @dblclick="subtract(10)">减十岁</button>
<p>My age is {{ age }}</p>
<div id="canvas" v-on:mousemove="updateXY($event)"></div>
{{ x }} - {{ y }}
</div>
// 实例化Vue对象
new Vue({
el: '#root',
data: {
age: 25,
x: 0,
y: 0
},
methods: {
add(increment) {
this.age = this.age + increment
},
subtract(decrement) {
this.age = this.age - decrement
},
updateXY(e) {
this.x = e.offsetX
this.y = e.offsetY
}
}
})
事件修饰符
<!-- once 只执行一次 -->
<button v-on:click.once="add(1)">涨一岁</button>
<!-- prevent: 阻止默认事件 -->
<button @click.prevent="subtract(1)">减一岁</button>
<!-- stop: 阻止冒泡 -->
<button v-on:dblclick.stop="add(10)">加十岁</button>
<!-- self: 只在该元素本身上才能触发 -->
<button @dblclick.self="subtract(10)">减十岁</button>
<p>My age is {{ age }}</p>
键盘事件及其修饰符
<body>
<!-- root是根容器 -->
<div id="root">
<h1>键盘 Events</h1>
<label for="">姓名: </label>
<input type="text" v-on:keyup="logName($event)">
<label for="">年龄: </label>
<!-- enter修饰符，当按回车时才触发 -->
<input type="text" v-on:keyup.enter="logAge($event)">
</div>
</body>
// 实例化Vue对象
new Vue({
el: '#root',
data: {
},
methods: {
logName(event) {
console.log(event.target.value)
},
logAge(event) {
console.log(event.target.value)
}
}
})
上一篇： CorelDRAW 绘制逼真的折扇