Vue学习第一天

最新推荐文章于 2024-08-07 20:34:45 发布

KardusenIII

最新推荐文章于 2024-08-07 20:34:45 发布

阅读量75

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_41696136/article/details/103330707

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码以及备注：
代码一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 
        1、v-html是把数据按照html对象进行解析
        2、v-cloak、v-text是解决页面在加载时出现的页面闪烁问题
        3、v-text会覆盖原有的文字，v-cloak不会
        4、默认使用v-text时没有闪烁问题
        5、v-bind是提供属性绑定的一个指令
        6、v-bind中可以把属性当作一个变量
        7、v-bind：指令可以被简写为   ：要绑定的属性
        8、v-bind中可以写合法的JS表达式
        9、Vue中提供了 v-on：事件绑定机制
        10、v-on：的简写是   @
        11、在ＶＭ实例中如果想要获取data中的数据，
            或者想要调用methods中的方法，必须通过this.属性名 或 this.方法名 来进行访问，
            这里的this就表示我们new出来的VM实例对象
        12、VM实例，会监听自己身上 data 中所有数据的改变，
            只要数据一发生变化，就会把最新的数据，从data身上同步到页面中去
     -->
    <div id="test">
        <!-- <p v-cloak>{{ msg }}</p>
        <div v-html="msg2"></div> -->
        <input type="button" value="浪一下" :title="msg" @click=show>
        <input type="button" value="低调" :title="str2" @click=stop>
        <p>{{ str }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#test',
            data:{
                msg: "hello",
                str: "猥琐发育，别浪",
                str2: "低调",
                msg2:"<h1>Hello World</h1>",
                intervalId: null //在data上定义一个定时器ID
            },
            methods:{
                show() {
                    if(this.intervalId != null)return;
                    this.intervalId = setInterval( () => {
                        var begin = this.str.substring(0,1);
                        var end = this.str.substring(1);
                        this.str = end + begin;
                    },300);
                },
                stop(){
                    clearInterval(this.intervalId);
                    this.intervalId = null;
                    this.str = "猥琐发育，别浪";
                }
            }
        })
    </script>
</body>
</html>

代码二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.min.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: pink;
        }
        .outer {
            padding: 40px;
            background-color: red;
        }
    </style>
</head>
<!-- 
    1、.stop阻止向父级冒泡事件,例：@click.stop=函数名
    2、.prevent阻止默认行为
    3、使用 .capture 实现捕获触发事件的机制
    4、使用 .self 实现只有点击当前元素时候，才会触发事件处理函数
    5、使用 .once 只触发一次事件处理函数
 -->
<body>
    <div id="app">
        <!-- 1、.stop阻止向父级冒泡事件,例：@click.stop=函数名 -->
        <div class="inner" @click="divHandler">
            <input type="button" value="戳他" @click.stop="btnHandler">
        </div>

        <!-- 2、.prevent阻止默认行为 -->
        <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先百度</a>
    
        <!-- 3、使用 .capture 实现捕获触发事件的机制 -->
        <div class="inner" @click.capture="divHandler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>

        <!-- 4、使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
        <div class="inner" @click.self="divHandler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>

        <!-- 5、使用 .once 只触发一次事件处理函数 -->
        <a href="http://www.baidu.com" @click.once.prevent="linkClick">有问题，先百度</a>

        <p>-----------------------------------------------------------------------------------------</p>
        
        <!-- 演示：.self和 .stop的区别 
             self：被让我被别人冒泡，stop：别让其他人冒泡
             self：自身不响应事件，且不影响事件的传递，
             stop：自身响应事件，但阻止事件的传递

             self：是只有是自己触发的，自己才会执行，如果接受到内部的冒泡事件传递信号触发，会忽略掉这个信号，。
             stop：是阻止冒泡行为，不让当前元素的事件继续往外触发，如阻止点击div内部事件，触发div事件
        -->
        
        <div class="outer" @click="divHandler2">
            <div class="inner" @click.self="divHandler">
                <input type="button" value="戳他" @click="btnHandler">
            </div>
        </div>
    </div>
    <script>
        //创建Vue()实例，得到ViewModel
        var vm = new Vue({
            el: "#app",
            data: {
                
            },
            methods: {
                divHandler(){
                    console.log('这是触发了 inner div 的点击事件');
                },
                btnHandler(){
                    console.log('这是触发了 button 的点击事件');
                },
                linkClick(){
                    console.log('这是出发了链接点击事件');
                },
                divHandler2(){
                    console.log('这是触发了 outer div 的点击事件');
                }
            }
        })
    </script>
</body>
</html>

代码三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h4>{{ msg }}</h4>

        <!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V ，无法实现数据的双向绑定 -->
        <input type="text" :value="msg" style="width: 100%;">
        
        <!-- 使用 v-model 指令，可以实现表单元素和Model中的数据双向绑定 -->
        <!-- v-model 只能运用在表单元素中 -->
        <!-- input(radio、text、address、email...) select  checkbox   textarea  -->
        <input type="text" v-model="msg" style="width: 100%;">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "hello,大家好啊"
            },
            methods: {
                
            },
        })
    </script>
</body>
</html>

代码四：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易计算器</title>
    <script src="lib/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <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="count">
        <input type="text" v-model="result">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                n1: 0,
                n2: 0,
                result: 0,
                opt: "+"
            },
            methods: {
                count(){
                    // if(this.n1 != null && this.n2 != null){
                    //     if(opt == "+"){
                    //         this.result = n1 + n2
                    //     }else if(opt == "-"){
                    //         this.result = n1 - n2
                    //     }else if(opt == "*"){
                    //         this.result = n1 * n2
                    //     }else{
                    //         this.result = n1 / n2
                    //     }
                    // }

                    // if(this.n1 != null && this.n2 != null){
                    //     switch (this.opt) {
                    //         case "+":
                    //             this.result = parseInt(this.n1) + parseInt(this.n1);
                    //             break;
                    //         case "-":
                    //             this.result = parseInt(this.n1) - parseInt(this.n2);
                    //             break;
                    //         case "-":
                    //             this.result = parseInt(this.n1) * parseInt(this.n2);
                    //             break;
                    //         default:
                    //             this.result = parseInt(this.n1) / parseInt(this.n2);
                    //             break;
                    //     }
                    // }

                    // 这属于投机取巧的方式，正式开发中尽量少用，若用户上传了恶意代码的字符串，这个函数就会解析，造成安全隐患
                    var str = "parseInt(this.n1) "+ this.opt +"parseInt(this.n2)"
                    this.result = eval(str);
                }
            },
        })
    </script>
</body>
</html>

代码五：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Class</title>
    <script src="lib/vue.min.js"></script>
    <style>
        .red {
            color: red;
        }
        .thin {
            font-weight: 200;
        }
        .italic {
            font-style: italic;
        }
        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 第一种使用方式，直接传递一个数组，
            注意：这里的class需要使用 v-bind 做数据绑定
            类名必须用单引号括起来 
            数组中可以用三元表达式
        -->
        <h1 :class="['red', 'thin', 'italic', flag?'active':'']">这是一个很大的H1</h1>
        
        <!-- 但是写三元表达式比较麻烦，因此也可以使用对象形式代替三元表达式，提高代码可读性 -->
        <h1 :class="['red', 'thin', 'italic', {'active':flag}]">这是一个很大的H1</h1>

        <!-- 在为 class 使用v-bind对象的时候，
            对象的属性是类名，对象的属性可带引号，也可不带引号
            属性的值是一个标识符
         -->
        <h1 :class="classObj">这是一个很大的H1</h1>


    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true,
                classObj: {red:true, thin:true, active:false, italic:true}
            },
            methods: {
                
            },
        })
    </script>
</body>
</html>

代码六：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>样式</title>
    <script src="lib/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 属性里包含横线必须给属性加个单引号 -->
        <h1 :style="styleObj1">这是一个h1</h1>
        <h1 :style="[styleObj1, styleObj2]">这是一个h1</h1>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                styleObj1: { color: 'red', 'font-weight': 200},
                styleObj2: { 'font-style': 'italic' }
            }
        })
    </script>
</body>
</html>

代码七：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for</title>
    <script src="lib/vue.min.js"></script>
</head>

<!-- v-for循环可以遍历普通数组，遍历对象数组，遍历对象中的值，迭代数字 -->
<body>
    <div id="app">
        <p v-for="(item,i) in list">索引值：{{i}}-------{{ item }}</p>
        <p v-for="(user,i) in user1">{{ user.id }}--{{ user.name }}----索引值：{{ i }}</p>
        
        <!-- 注意：在遍历对象身上的键值对的时候，除了由val key之外，在第三个位置还有一个索引 -->
        <p v-for="(val,key,i) in user2">键是：{{ key }}，值是{{ val }}----索引值：{{ i }}</p>

        <!-- in 后面可以放普通数组、对象数组、对象、数字 -->
        <!-- 用v-for来迭代一个数字的话，起始不是0，是1  -->
        <p v-for="count in 10">这是第 {{ count }} 次循环</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [1,2,3,4,5,6],
                user1: [
                    {id: 1, name:"a"},
                    {id: 2, name:"b"},
                    {id: 3, name:"c"},
                    {id: 4, name:"d"}
                ],
                user2: {
                    id: 1,
                    name: '123',
                    gender: '女'
                }
            },
            methods: {
                
            },
        });
        [].forEach((item,i) => {})
    </script>
</body>
</html>