vue快速上手

作者: 王哈哈就很棒 | 来源:发表于2019-12-28 21:51 被阅读0次

TS 入门和Vue实践
vue快速上手
vue快速上手
Vue快速上手
Vue3快速上手
Vue 快速上手(实例)
Vue 基本知识
vue3.0项目创建
01、vue快速上手
vue快速上手-1

1.数据双向绑定

更改数据也触发视图的相应更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" v-model="msg">
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        }
    })
</script>
</body>
</html>

image.png

渲染html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 v-html="msg"></h1>
    <input type="text" v-model="msg">
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '<h1 style="color: red;">hello world</h1>'
        }
    })
</script>
</body>
</html>

image.png

v-bind

双大括号语法不能作用在 HTML 特性（标签属性）上，需要对标签属性操作，应该使用 v-bind 指令：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="checkbox" v-bind:checked="isChecked">

    <p>num + 3 = {{num+3}}</p>
    <p>ok? {{ok ? 'yes':'no'}}</p>
    <p>反转名称 {{name.split('').reverse().join('')}}</p>
    <p v-bind:class="'col' + colNum">test</p>
    <a v-bind:href="url" target="_blank">link</a>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isChecked: false,
            num: 23,
            ok: true,
            name: '王哈哈',
            colNum: '78',
            url: 'http://www.baidu.com'
        }
    })
</script>
</body>
</html>

image.png

v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{name}}</h1>
    <button v-on:click="handleDemo">click</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: '王哈哈'
        },
        methods: {
            handleDemo(){
                this.name = this.name.split('').reverse().join('');
            }
        }
    })
</script>
</body>
</html>

动态参数

event 此时的值为 click ，那我们点击按钮时就会触发事件回调

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{name}}</h1>
    <button v-on:[event]="handleDemo">click</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: '王哈哈',
            event: 'click'
        },
        methods: {
            handleDemo(){
                this.name = this.name.split('').reverse().join('');
            }
        }
    })
</script>
</body>
</html>

计算属性

在 Vue 中计算属性是惰性的，只有当依赖数据发生改变时，才会触发计算，否则，它的值是上一次触发计算的缓存值

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{name}}</h1>
    <h1>reverseName {{reverseName}}</h1>
    <h1>now {{now}}</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: '王哈哈',
            event: 'click'
        },
        computed: {
            reverseName(){
                return this.name.split('').reverse().join('');
            },
            now(){
                return Date.now();
            }
        }
    })
</script>
</body>
</html>