写文章
7

vue学习笔记二

前文补充

  • 关于渐进式

  • 关于computed
    计算属性，其中的配置会提升到vue实例中，因此，在模板中可以直接当作属性使用，使用时，实际上调用的是对应的方法。
    通常，计算属性用户通过data或其他计算属性得到的数据。

    与方法的区别：
    1）vue会检查计算属性的依赖，当依赖没有发生变化时，vue会直接使用之前缓存的结果，而不会重新计算
    2）计算属性的读取函数，不可以有参数
    3) 计算属性可以配置get和set，分别用于读取时和设置时
    例子：
    .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>
</head>

<body>
    <div id="app"></div>
    <script src="../vue.js"></script>
    <script src="./index.js"></script>
</body>

</html>

.js

//实现config中属性computed的效果

const template = `
<div>
     <h1>
         姓：{{firstName}}, 名：{{lastName}}, 全名1：{{getFullName()}},
         全名2： {{fullName}}
         <span >{{n}}</span>
         <button @click="n++">加</button>
     </h1>
     <p>
         全名：<input type="text" v-model="fullName">
     </p>
     
</div>

`;


const config = {
    template,
    el: "#app",
    data:{
          firstName: "ZenleTim",
          lastName: "faa",
          n: 0
    },
    computed:{
        fullName:{
            get(){
                console.log("属性重新计算了")
                return this.firstName + ' ' + this.lastName;
            },
            set(newVal){
                console.log(newVal);
                this.firstName = newVal[0];
                this.lastName = newVal.substr(1);
            }

        }
    },
    methods:{
       getFullName(){
           console.log("方法调用了！！！！");
           return this.firstName + ' ' + this.lastName;
       }

    }

};

var app = new Vue(config);

  • 关于v-html指令
    vue为了安全，会将元素内部的插值进行实体编码

  • 关于ES6模块化
    面对大型项目，传统开发的问题：
    1）如何管理错综复杂的代码
    2）如何处理全局变量污染的问题
    3）如何管理复杂的依赖关系

    实现模块化的方式：CommonJS、AMD、CMD、ES6

    ES6模块化：

    • 模块中的所有变量，全部是布局，只能在模块内部使用
    • 模块导出：export default 导出的数据
    • 模块导入(在所有代码之前导入)：import 变量名 from "模块路径"
posted @ 2020-08-22 10:01  ZenlenTim  阅读(49)  评论(0)    收藏  举报
分享到：