vue

最新推荐文章于 2022-08-19 16:24:09 发布

阿茶家的庸医

最新推荐文章于 2022-08-19 16:24:09 发布

阅读量237

点赞数 1

分类专栏： javaweb

本文链接：https://blog.csdn.net/baidu_41671472/article/details/90643935

版权

javaweb 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

大括号
数据绑定
绑定监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
    <script type="text/javascript" src="./release/vue.js"></script>
</head>
<body>
<div id="msg">
    <h1>基础</h1>
    <input type="text" v-model="message" />
    <p>Hello {{message}}</p>
    <p>{{message.toUpperCase()}}</p><!--将内容大写，因为message就相当于js中的字符串对象-->
    <p v-html="message"></p> <!--将内容理解为html信息-->
    <p v-text="message"></p> <!--将内容理解为普通文本-->

    <p>强制数据绑定</p>
    <img src="imgURL"> <!--这样无效-->
    <img v-bind:src="imgURL"> <!--v-bind写法-->
    <img :src="imgURL"> <!--单一个 ： 就是等价于v-bind 绑定-->

    <p>绑定监听</p>
    <button v-on:click="func">test1</button> <!--绑定监听事件 click 是事件，onclick不是-->
    <button @click="func2('asv')">test2</button> <!--v-on的简易写法就是 @-->
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#msg',
        data : {
            message : 'vue',
            imgURL : 'https://cn.vuejs.org/images/dcloud.gif'
        },
        methods : {
            func() {
                alert("test is click")
            },
            func2(content){
                alert(content)
            }
        }
    })
</script>
</body>
</html>

计算属性和监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
    <script type="text/javascript" src="./release/vue.js"></script>
</head>
<body>
<div id="msg">
    <h1>计算属性和监视</h1>
    姓：<input type="text" placeholder="fist name" v-model="fistName" /><br>
    名：<input type="text" placeholder="second name" v-model="secondName" /><br>
    姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="FullName1"><br> <!--使用计算属性来改变参数值-->
    姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="FullName2"><br> <!--使用监视来改变参数值-->
    姓名2（单向）：<input type="text" placeholder="Full Name3" v-model="FullName3"><br> <!--使用监视来改变参数值-->
    姓名3（双向）：<input type="text" placeholder="Full Name4" v-model="FullName4"><br> <!--想要实现双向改变：这个input变了上面的姓名也变，上面的姓名变了，这个input也变-->
    {{FullName1}}
    {{FullName1}}
    {{FullName1}} <!--这里的FullName1函数仅仅只调用了一次，可以在FullName1计算属性中添加alert查看-->
    <!--由此可见，这里又一个map容器，将FullName1值存入容器中，第一次调用FullName1容器中没有值，所以调用getter方法获取值存入map，再之后发现FullName1在map中，则不再调用getter方法，节约时间-->
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#msg',
        data : {
            fistName : 'A',
            secondName : 'B'
        },
        //计算属性 computed
        computed : {
            // 什么时候执行：初始化显示 / 相关的data属性数据发生变化
            // 在页面中可以使用{{方法名}} 来显示计算结果
            FullName1 () { // 计算属性的一个方法，方法的返回值作为属性值
                return this.fistName + ' ' + this.secondName
            },
            FullName4 : {
                get(){//回调函数 ： 计算并返回当前属性的值
                    return this.fistName + ' ' + this.secondName
                },
                set(newvalue){//js中的set是监视的意思，不是修改值的意思
                    // 当属性值发生修改时，调用的回调函数
                    var nums = newvalue.split(' ');
                    this.fistName = nums[0]; // 因为一般来说中间有个空格分开，所以split空格，如果多个空格嘛 这里就不细说
                    this.secondName = nums[1];
                }
            }
        },
        watch : { // 监视
            // 格式是  监视的属性名 ：回调函数
            fistName : function (newValue, oldValue) {//会把新的值和旧的值作为参数传递
                // alert(newValue + " " + oldValue)
                this.FullName2 = newValue + ' ' + this.secondName
            }
        }
    });
    vm.$watch('secondName', function (newvalue, oldvalue) {
        this.FullName3 = this.fistName + ' ' + newvalue
    }); // 通过实例方法来监视
</script>
</body>
</html>

class和style的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
    <script type="text/javascript" src="./release/vue.js"></script>
</head>
<body>
<h1>class和style的绑定</h1>
<div id="msg">
    <h2>class的绑定</h2>
    <!--
        写法是  "  : class = 'xxx' "
        xxx 是字符串
        xxx 是数组
        xxx 是对象
    -->
    <p class="cClass" :class="a">绑定的class是字符串</p>
    <button @click="update1">update</button>
    <p class="cClass" :class="{aClass : isA, bClass: isB}">绑定的class是一个对象</p> <!-- 通过 isA 和 isB 的 ture/false 来设置class -->
    <button @click="update2">update</button>
    <p :class="['aClass', 'cClass']">绑定的class是一个数组</p> <!-- 通过 isA 和 isB 的 ture/false 来设置class -->

    <h1>style的绑定</h1>

    <p :style="{color:activeColor, fontSize:fontSize + 'px'}">style的绑定{{fontSize}}</p>
    <button @click="update3">update</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#msg',
        data:{
            a : 'aClass',
            isA : true,
            isB : false,
            activeColor : 'red',
            fontSize : 45
        },
        methods : {
            update1 () {
                if(this.a == 'aClass')
                    this.a = 'bClass';
                else
                    this.a = 'aClass';
            },
            update2 () {
                this.isA = !this.isA;
                this.isB = !this.isB;
            },
            update3 () {
                this.activeColor = 'blue';
                this.fontSize -= 5;
            }
        }
    });
</script>
</body>
</html>

条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
    <script type="text/javascript" src="./release/vue.js"></script>
    <style>
        .aClass{
            color: red;
        }
        .bClass{
            color: blue;
        }
        .cClass {
            font-size: 40px;
        }
    </style>
</head>
<body>
<div id="msg">
    <h1>条件渲染</h1>
    <!--
        v-if
        v-else
        v-show
        用于实现对一个标签的显示与隐藏
    -->
    <p v-if="ok">成功了</p> <!-- v-if 隐藏标签的方式是 直接不在html中写这个标签 -->
    <p v-else>失败了</p> <!-- 通过F12 可以在 html源码中看不到这个标签 -->
    <button @click="ok = !ok    ">switch</button>


    <p v-show="ok1">success</p> <!-- v-show 隐藏的方式是添加一个 display:none 的样式 -->
    <p v-show="!ok1">faild</p> <!-- 在html源码中可以看到标签 -->
    <button @click="change()">switch</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#msg',
        data : {
            ok : false,
            ok1 : false
        },
        methods : {
            change(){
                this.ok1 = !this.ok1;
            }
        }
    });
</script>
</body>
</html>

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
    <script type="text/javascript" src="./release/vue.js"></script>
</head>
<body>
<div id="msg">
    <h1>列表渲染</h1>
    <p>v-for遍历数组</p>
    <li v-for="(p, index) in persons" :key="index">
        {{index}}---{{p.name}}----{{p.age}}---<button @click="deleteP(index)">删除</button>----<button @click="updateP1(index, name, age)">更新</button> <!-- 删除，更新都需要知道index，所以index作为参数传入 -->
    </li>
    <input type="text" v-model="name"><input type="text" v-model="age">

    <p>v-for遍历对象</p>
    <ul>
        <li v-for="(value, key) in persons[1]" :key="key"><!--先value 后 key 遍历 persons[1] 的所有属性-->
            {{key}}:{{value}}
        </li>
    </ul>


    <input type="text" v-model="search"><!--名字的搜索，排序--><br>
    <li v-for="(p, index) in filerPersons" :key="index"> <!--通过上面的输入框，修改persons，并赋值给filterPersons，之后再进行页面更新-->
        {{index}}---{{p.name}}----{{p.age}}---<button @click="deleteP(index)">删除</button>----<button @click="updateP1(index, name, age)">更新</button> <!-- 删除，更新都需要知道index，所以index作为参数传入 -->
    </li><br>
    <button @click="setOrderTpe(1)">年龄升序</button>
    <button @click="setOrderTpe(2)">年龄降序</button>
    <button @click="setOrderTpe(0)">默认排序</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#msg',
        data : {
            name : '',
            age : '',
            search : '',
            orderTpe : 0, // 0代表原本 1代表升序 2代表降序
            persons : [
                {name:'Tom0', age:18},
                {name:'Tom1', age:17},
                {name:'Tom2', age:16},
                {name:'Tom3', age:19},
                {name:'Tom4', age:14}
            ], // 既然是列表 就需要一个数组
        },
        methods : {
            deleteP(index) {
                this.persons.splice(index, 1);
                // 因为 splice 在Vue中重写 会刷新
            },
            updateP(index, name, age) {
                obj = {};
                obj.name = name;
                obj.age = age;
                this.persons[index] = obj;
                // 上述更新操作并没有改变 persons 这个变量本身，所以不会出现页面刷新操作！！！！！
            },
            updateP1(index, name, age){
                obj = {}
                obj.name = name;
                obj.age = age;
                this.persons.splice(index, 1, obj); // index 位置 删除本身那个 替换成obj
            },
            setOrderTpe(OrderType){
                this.orderTpe = OrderType;
            }
        },
        computed : {
            filerPersons() {
                // 得到search中的关键字
                var {search, persons, orderTpe} = this;
                //对persons过滤
                var list;
                list = persons.filter(p => (p.name.indexOf(search) != -1));
                // p.name 取出名字属性值， indexOf 判断serach 再属性值中出现的位置，如果没有出现则返回-1

                // 排序
                if(orderTpe != 0){
                    list.sort(function (p1, p2) { // 返回负数则p1在前，返回正数p2在前
                        if(orderTpe == 1)
                            return p2.age - p1.age;
                        else
                            return p1.age - p2.age;
                    })
                }
                return list;
            }
        }
        /*
        * 数组更新检测：
        *   Vue包含一组观察数组的变异方法，他们将会触发视图更新
        *       1. push()
        *       2. pop()
        *       3. shift()
        *       4. unshift()
        *       5. splice()
        *       6. sort()
        *       7. reverse()
        *   Vue 对以上7个函数实现了两个功能：1：原生js的共呢个 2：更新视图
        * */
    });
</script>
</body>
</html>

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
    <script type="text/javascript" src="./release/vue.js"></script>
</head>
<body>
<div id="msg">
    <h1>绑定监听</h1>
    <button v-on:click="test1">test1</button>
    <button v-on:click="test2('the passage')">test2</button>
    <button v-on:click="test3($event)">test3</button> <!--$event 代表事件对象-->
    
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#msg',
        methods : {
            test1(){
                // 如果没有指定形式参数，则会默认传递 event事件对象
                alert(1);
            },
            test2(passage){
                // 因为制定了形式参数，所以 没有传递 event事件对象
                alert(passage)
            },
            test3(event){
                alert(event.target.innerHTML)// 输出这个结点的内容
            }
        }
    });
</script>
</body>
</html>

阿茶家的庸医

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue

大括号数据绑定绑定监听<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>show</title> <script type="text/javascript" src="./release/vue....
复制链接

扫一扫