美文网首页
hello vue

hello vue

作者: lv_shun | 来源:发表于2020-09-09 09:04 被阅读0次

安装

共有三种方式：

  1. 直接CDN引入
  • 开发环境：包括了源码
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 生产环境：压缩过，体积更小
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  1. 下载和引入
  1. NPM安装

Hello vue

vue的代码风格是声明式编程，方便实现模板与数据分离。

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

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h3>{{name}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue',
            name: 'names'
        }
    })
</script>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello list</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            list: [1,2,3,4,5]
        }
    })
</script>
</body>
</html>

按钮点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello button</title>
</head>
<body>
<div id="app">
    <h3>计数器当前值: {{count}}</h3>
<!--    简单方式，直接对变量进行操作-->
    <button v-on:click="count++">+</button>
    <button v-on:click="count--">-</button>
<!--    使用函数绑定方式-->
    <button v-on:click="add">+</button>
<!--    @为v-on的另一种写法-->
    <button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            add: function () {
                console.log("执行加法");
                //这里需要使用this.count来获取count变量,或者使用app.count
                this.count++;
            },
            sub() {
                console.log("执行减法");
                app.count--;
            }
        }
    })
</script>
</body>
</html>

双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <input v-model="message">
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data: {
            message: 'message'
        }
    })
</script>
</body>
</html>

相关文章