VueJS初探

电玩女神 2022-10-26 15:27 232阅读 0赞

### 文章目录 ###

*   *  Vue基本代码和MVVM之间对应关系
     *  v-cloak、v-text、v-html的基本使用
     *  v-bind指令-缩写是：
     *  使用v-on指令定义Vue中的事件-缩写是@
     *  跑马灯效果制作
     *  事件修饰符的介绍
     *  v-model实现表单元素的数据双向绑定
     *  使用v-model实现计算器
     *  vue中通过属性绑定为元素设置class类样式
     *  vue中通过属性绑定为元素绑定style行内样式
     *  v-for指令的四种使用方式
     *  v-for中key的使用注意事项
     *  v-if和v-show的使用和特点
     *  vue实现计数器
     *  实现TODO List

## Vue基本代码和MVVM之间对应关系 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70]

## v-cloak、v-text、v-html的基本使用 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 1]

## v-bind指令-缩写是： ##

![在这里插入图片描述][20210202173003102.png]

## 使用v-on指令定义Vue中的事件-缩写是@ ##

![在这里插入图片描述][20210202175005424.png]

## 跑马灯效果制作 ##

![在这里插入图片描述][20210202170654776.png]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            [v-cloak] { 
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div id="app" v-cloak>
            <input type="button" value="开始" @click="start">
            <input type="button" value="停止" @click="stop">
            <h1>{ { msg}}</h1>
        </div>
    
        <script>
            var vm = new Vue({ 
                el: '#app',
                data: { 
                    msg: '我是中国人',
                    ID: null
                },
                methods: { 
                    start() { 
                        if (this.ID != null) return;
                        this.ID = setInterval(() => { 
                            var start = this.msg.substring(0, 1);
                            var end = this.msg.substring(1);
                            this.msg = end + start;
                        }, 400);
                    },
                    stop() { 
                        clearInterval(this.ID);
                        this.ID = null;
                    }
                }
            });
    
        </script>
    </body>
    
    </html>

## 事件修饰符的介绍 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 2]

## v-model实现表单元素的数据双向绑定 ##

![在这里插入图片描述][20210202185641807.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 3]

## 使用v-model实现计算器 ##

![在这里插入图片描述][20210202193016785.png]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            [v-cloak] { 
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div id="app" v-cloak>
            <input type="text" v-model="n1">
            <select v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" v-model="n2">
            <input type="button" value="=" @click="calc">
            <input type="text" v-model="result">
            <h1>{ { result}}</h1>
        </div>
    
        <script>
            var vm = new Vue({ 
                el: '#app',
                data: { 
                    n1: 0,
                    n2: 0,
                    opt: '+',
                    result: 0
                },
                methods: { 
                    calc() { 
                        var str = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)';
                        this.result = eval(str);
                    }
                }
            });
    
        </script>
    </body>
    
    </html>

## vue中通过属性绑定为元素设置class类样式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 4]

## vue中通过属性绑定为元素绑定style行内样式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 5]

## v-for指令的四种使用方式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 6]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style> [v-cloak] { display: none; } </style>
    </head>
    
    <body>
        <div id="app" v-cloak>
            <h1 v-for="(item,i) in list">index: {
       {i}} value:{
       {item}}</h1>
        </div>
    
        <script> var vm = new Vue({ el: '#app', data: { list: [1, 2, 3, 4, 5] }, methods: { } }); </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 7]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style> [v-cloak] { display: none; } </style>
    </head>
    
    <body>
        <div id="app" v-cloak>
            <h1 v-for="(user,i) in list">index: {
       {i}} id:{
       {user.id}} name:{
       {user.name}}</h1>
        </div>
    
        <script> var vm = new Vue({ el: '#app', data: { list: [ { id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "c" }, { id: 4, name: "d" }, ] }, methods: { } }); </script>
    </body>
    
    </html>

![在这里插入图片描述][20210202212525480.png]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style> [v-cloak] { display: none; } </style>
    </head>
    
    <body>
        <div id="app" v-cloak>
            <h1 v-for="(val,key) in list"> {
       {val}} {
       {key}}</h1>
        </div>
    
        <script> var vm = new Vue({ el: '#app', data: { list: { id: 1, name: "a" } }, methods: { } }); </script>
    </body>
    
    </html>

![在这里插入图片描述][20210202212447821.png]

## v-for中key的使用注意事项 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 8]

## v-if和v-show的使用和特点 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 9]

## vue实现计数器 ##

![在这里插入图片描述][20210203201643605.png]

## 实现TODO List ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 10]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style> [v-cloak] { display: none; } </style>
    </head>
    
    <body>
        <div id="app" v-cloak>
            <span>输入你的TODO:</span><input type="text" @keyup.enter="add" v-model="inputVal">
            <ul>
                <li v-for="(item,index) in list">
                    <h1>{
       {item}} <input type="button" :value="'删除 '+index" @click="remove(index)"> </h1>
                </li>
                <div v-show="list.length!=0">
                    <h1>总数：{
       {list.length}} <input type="button" value="清空所有" @click="clear"></h1>
    
                </div>
            </ul>
        </div>
    
        <script> var vm = new Vue({ el: '#app', data: { inputVal: "TODO", list: ["学习Java", "Redis入门", "Java并发编程", "K8S"] }, methods: { add() { this.list.push(this.inputVal); }, remove(index) { this.list.splice(index, 1); }, clear() { this.list = []; } } }); </script>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70]: /images/20221024/07d06987690c438b9578a09f98061638.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 1]: /images/20221024/5d189f802e8942e7a3fe76933fb8e67f.png
[20210202173003102.png]: /images/20221024/6ac7dab803e44ac09ee0c1f25677b7cd.png
[20210202175005424.png]: /images/20221024/a6082da4df534f3db3be4e7f2fe50b3c.png
[20210202170654776.png]: /images/20221024/52a5527ae0b74e1080bbdd8f2c3ca4de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 2]: /images/20221024/f6796a46c7364e07b94b66e14d431f71.png
[20210202185641807.png]: /images/20221024/ca6e5f2728d948ae9ca01a504dbfc4d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 3]: /images/20221024/4f601af1742540efa0a8ae8138ec46f3.png
[20210202193016785.png]: /images/20221024/ce85878f29674e14910cb3749fb614af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 4]: /images/20221024/1e634e61cc754f3daaebbbcde2c8c23b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 5]: /images/20221024/5c3943601c0045448542c7c5b3072b05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 6]: /images/20221024/c0bb0de67aa94ec6bcd73ad2398d0677.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 7]: /images/20221024/41b1c75c99014386b5a602e98e4038c3.png
[20210202212525480.png]: /images/20221024/88c3e770d5e04d10b9bc42f6b3340f22.png
[20210202212447821.png]: /images/20221024/9a657f5ff3e347c1833d2c70164d0018.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 8]: /images/20221024/001c60d669504f22b0da13cafe170d57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 9]: /images/20221024/bcaefc75a6374973b54c8498adfb6c4c.png
[20210203201643605.png]: /images/20221024/f4abe9a7baac4162b3868edcb8eba26c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70 10]: /images/20221024/6893fa891eef49329ef235a15d88bbc5.png