01-vue初体验

最新推荐文章于 2021-07-21 21:24:02 发布

等的时间长就凉了

最新推荐文章于 2021-07-21 21:24:02 发布

阅读量72

点赞数

本文链接：https://blog.csdn.net/weixin_42490383/article/details/115714059

版权

01-helloVuejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>{{message}}</h1>
    <h1>{{name}}</h1>
</div>

<!--../拉竖线找目录-->
<script src="../../js/vue.js"></script>
<script>
    //let(变量) const(常量)
    const vm = new Vue({
        el: '#app',
        data: {
            message: '你好啊, vue',
            name: '我是bingo!!!'
        }
    })
</script>

</body>
</html>

02-vue列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="movie in movies">{{movie}}</li>
    </ul>
</div>

<!--../拉竖线找目录-->
<script src="../../js/vue.js"></script>
<script>
    //let(变量) const(常量)
    const vm = new Vue({
        el: '#app',
        data: {
            message: '你好啊, vue',
            movies: ['加勒比海盗','海贼王','柯南','功夫']
        }
    })
</script>

</body>
</html>

03-vue案例计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h3>当前计数: {{counter}}</h3>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>

<!--../拉竖线找目录-->
<script src="../../js/vue.js"></script>
<script>
    //let(变量) const(常量)
    let vm = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function (){
                console.log('add被执行');
                this.counter++
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--
            }
        },
        created: function (){//网络请求数据, 渲染dom
            console.log('created() is excuting...');
        },
        mounted: function () {
            console.log('mounted() is excuting...');
        }
    })
</script>

</body>
</html>

04-vue-template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  {{message}}
</div>

<script src="../../js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      message: 'hello bingo'
    }
  })
</script>

</body>
</html>

等的时间长就凉了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-vue初体验

01-helloVuejs<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h1>{{message}}</h1> <h1>{{name}}</h
复制链接

扫一扫