二、vue学习笔记——VUE实例

最新推荐文章于 2024-04-20 06:48:12 发布

IT云私塾

最新推荐文章于 2024-04-20 06:48:12 发布

阅读量208

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/m0_37867405/article/details/80343108

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

二、VUE实例

二、VUE实例

1.实例生命周期钩子

这里写图片描述

从上图可以看到beforeCreate,created…这些函数，会在文档的不同阶段进行执行，这些函数不会定义在methods中。

<script type="text/javascript">
        var app = new Vue({
            el      : "#app",
            data    : {
                divData : '测试数据',
            },
            beforeCreate    : function() {
                console.log("beforeCreate");
            },
            created         : function() {
                console.log("create");
            }
        });
</script>

2.模板语法

<body>
    <div id="app">
        <div>{{divData}}</div>
        <div v-text="divData"></div> 
        <!-- v-html会解析html标签 -->
        <div v-html="divData"></div>  
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el      : "#app",
            data    : {
                divData : '<h1>测试数据<h1>',
            }
        });
    </script>
</body>

这些模板语法可以插入js语句

<div v-text="divData + '插入js语句'"></div>

3.计算属性，方法和侦听器

<body>
    <div id="app">
        <!-- 在html出现js语法是应该被避免的 -->
        <h3>{{firstName + ' ' + lastName}}</h3>

        <h3>{{fullName}} {{age}}</h3>

        <h3>{{fullName3()}}</h3>

        <h3>{{fullName4}}</h3>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el      : "#app",
            data    : {
                firstName   : 'Smith',
                lastName    : 'Mr',
                fullName4   : 'Mr lee',
                age         : 18
            },
            /*
                通过属性计算的到fullName
                这种方式语法简介，当firsName和lasName不发生改变的时候，此方法的内容会被缓存在浏览                器中，性能较高
            */
            computed    : {
                fullName    : function() {
                    console.log("computed fullName");
                    return this.firstName + ' ' + this.lastName;
                }
            },

            //没有缓存,性能不高
            methods : {
                fullName3   : function() {
                    console.log("methods fullName");
                    return this.firstName + ' ' + this.lastName;
                }
            },

            //监听实现，有缓存，但是代码复杂
            watch   : {
                //监听firtName 和lastName的变化
                firstName   : function() {
                    console.log("firstName watch fullName4");
                    return this.fullName4 = this.firstName + " " + this.lastName;
                },
                lastName    : function() {
                    console.log("lastName watch fullName4");
                    return this.fullName4 = this.firstName + " " + this.lastName;
                }
            }
        });
    </script>
</body>

3.1 计算属性的setter和getter方法

<body>
    <div id="app">
        <h1>{{fullName}}</h1>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el  : "#app",
            data    : {
                firstName   : "SIMTH",
                lastName    : "MICK"
            },
            computed:{
                fullName:{
                    //获取数据，不需要明确调用
                    get     : function() {
                        return this.firstName + ' ' + this.lastName;
                    },
                    //当数据发生改变的时候调用这个方法
                    set     : function(value) {
                        console.log(value);
                        var result = value.split(' ');
                        this.firstName = result[0];
                        this.lastName = result[1];
                    }
                }
            }
        });
    </script>
</body>

4.vue样式绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setter getter方法</title>
    <script type="text/javascript" src="./vue.js"></script>
    <style type="text/css">
        .actived {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1 @click="changeStyleClick" :class="{actived: isActived}">hello world</h1>
        <h1 @click="changeStyleClick2" :class='[actived]'>ni hao</h1>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el  : "#app",
            data    : {
                isActived   : false,
                actived     :''
            },
            methods : {
                changeStyleClick    : function() {
                    this.isActived = !this.isActived;
                },
                changeStyleClick2   :function() {
                    this.actived = this.actived === "actived" ? "":"actived";
                }
            }
        });
    </script>
</body>
</html>

5.vue条件渲染

<body>
    <div id="app">
        <h1 v-if="show">hello world</h1>
        <!-- 
            v-show隐藏元素添加css样式display:none
            <h1 style="display: none;">hello world</h1> 
        -->
        <h1 v-show="show">hello world</h1>

        <!-- template仅仅是判断的虚拟标签，不会显示在文档中 v-if支持，但是v-show不支持 -->
        <template v-if="show === 'a'">
            <div>template 虚拟渲染 a</div>
        </template>
        <template v-else-if="show === 'b'">
            <div>template 虚拟渲染 b</div>
        </template>
        <template v-else>
            <div>template 虚拟渲染 others</div>
        </template>

        <!-- 此时如果不加key进行区分，当flag值改变时，也会传递input中的value -->
        <div v-if="flag">
            用户名：<input type="text" key='username'>
        </div>
        <div v-else>
            邮箱：<input type="text" key="mail">
        </div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el  : "#app",
            data    : {
                show    : 'a'
            }
        });
    </script>
</body>

6.vue列表渲染

<body>
    <div id="app">
        <!-- 
            遍历数组，两个参数 
            向数组结尾追加元素，push
            数组删除最后一个元素：pop
            删除/添加制定索引的元素：splice(index, count, item)
                index 要删除或者要添加的下标
                count 要删除元素的个数，0表示不删除，
                item  表示要添加的元素
                例子：app.$data.list.splice(1,0,{id:1,name:'xiao',age:30})
        -->
        <div v-for="(item, index) in list">
            编号：{{item.id}}  名字：{{item.name}}    年龄：{i{tem.age}}-----index{{index}}
        </div>

        <!-- 遍历对象 -->
        <div>{{object.body.weight}}</div>
        <div v-for="(value, key, index) in object">
            {{key}}  == {{value}} 、{{index}}
        </div>

    </div>

    <script type="text/javascript">
        var app = new Vue({
            el  : "#app",
            data    : {
                list    : [
                    {
                        id  :1,
                        name: '张三', 
                        age : 10,
                    },
                    {
                        id  :2,
                        name: '李四', 
                        age : 14,
                    },
                    {
                        id  :2,
                        name: '王五', 
                        age : 18,
                    }
                ],
                object:{
                    firstName   :'mic',
                    lastName    : 'huan',
                    age         : 30,
                    body    :{
                        foot    : '30cm',
                        weight  :120
                    }
                }
            }
        });
    </script>
</body>
</html>

6.1 vue中的set方法

Vue.set(app.$data.object,'age',200);
app.$set(app.$data.object,'age',10);

IT云私塾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二、vue学习笔记——VUE实例

二、VUE实例1.实例生命周期钩子从上图可以看到beforeCreate,created…这些函数，会在文档的不同阶段进行执行，这些函数不会定义在methods中。&amp;lt;script type=&quot;text/javascript&quot;&amp;gt; var app = new Vue({ el : &quot;#app&quot;, ...
复制链接

扫一扫