VUE----hello world & v-bind & v-on

最新推荐文章于 2021-07-23 20:38:42 发布

Li_fengxiao

最新推荐文章于 2021-07-23 20:38:42 发布

阅读量74

点赞数

分类专栏：前端文章标签： vue hello world 前端 bind

本文链接：https://blog.csdn.net/qq_38228582/article/details/105274203

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
.bg {
color: red
}
</style>

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>

<body>

<div id="app">

<div class="bg" :id="bg1">
hello world!
{{msg}}
</div>
<div class="bg">
{{msg}}

</div>

{{count}}{{(count + 1) * 10}}

<div v-html="template"></div>

<a :href="url">imooc</a>

<button type="button" @click="submit()">加数字</button>
</div>

<script>
new Vue({
el: '#app', //优先绑定第一个
data: {
msg: 'hello vue!',
count: 0,
url: 'http://imooc.com',
template: '<div>hello template</div>',
bg1: 'app-bind'
},
methods: {
submit : function() {
// this 代表的就是vue这个对象
this.count ++
}
}
})
</script>
</body>

</html>

Li_fengxiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE----hello world & v-bind & v-on

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>vue</title> <style> .bg{ color:red ...
复制链接

扫一扫