computed计算属性的使用

• 默认只有getter的计算属性：
• [AppleScript] 纯文本查看 复制代码

  <div id="app">
      <input type="text" v-model="firstName"> +
      <input type="text" v-model="lastName"> =
      <span>{{fullName}}</span>
    </div>
  
    <script>
      // 创建 Vue 实例，得到 ViewModel
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: 'jack',
          lastName: 'chen'
        },
        methods: {},
        computed: { // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
          fullName() {
            return this.firstName + ' - ' + this.lastName;
          }
        }
      });
    </script>

• 定义有getter和setter的计算属性：
• [AppleScript] 纯文本查看 复制代码

  <div id="app">
      <input type="text" v-model="firstName">
      <input type="text" v-model="lastName">
      <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
      <input type="button" value="修改fullName" @click="changeName">
  
      <span>{{fullName}}</span>
    </div>
  
    <script>
      // 创建 Vue 实例，得到 ViewModel
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: 'jack',
          lastName: 'chen'
        },
        methods: {
          changeName() {
            this.fullName = 'TOM - chen2';
          }
        },
        computed: {
          fullName: {
            get: function () {
              return this.firstName + ' - ' + this.lastName;
            },
            set: function (newVal) {
              var parts = newVal.split(' - ');
              this.firstName = parts[0];
              this.lastName = parts[1];
            }
          }
        }
      });
    </script>

• watch、computed和methods之间的对比
  • computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  • methods方法表示一个具体的操作，主要书写业务逻辑；
  • watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；
    
    
  nrm的安装使用
  作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；
  • 运行npm i nrm -g全局安装nrm包；
  • 使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
  • 使用nrm use npm或nrm use taobao切换不同的镜像源地址；
    
    
  相关文件
  • URL中的hash（井号）
    
    
  
  

computed计算属性的使用

• 默认只有getter的计算属性：
• [AppleScript] 纯文本查看 复制代码

  <div id="app">
      <input type="text" v-model="firstName"> +
      <input type="text" v-model="lastName"> =
      <span>{{fullName}}</span>
    </div>
  
    <script>
      // 创建 Vue 实例，得到 ViewModel
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: 'jack',
          lastName: 'chen'
        },
        methods: {},
        computed: { // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
          fullName() {
            return this.firstName + ' - ' + this.lastName;
          }
        }
      });
    </script>

• 定义有getter和setter的计算属性：
• [AppleScript] 纯文本查看 复制代码

  <div id="app">
      <input type="text" v-model="firstName">
      <input type="text" v-model="lastName">
      <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
      <input type="button" value="修改fullName" @click="changeName">
  
      <span>{{fullName}}</span>
    </div>
  
    <script>
      // 创建 Vue 实例，得到 ViewModel
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: 'jack',
          lastName: 'chen'
        },
        methods: {
          changeName() {
            this.fullName = 'TOM - chen2';
          }
        },
        computed: {
          fullName: {
            get: function () {
              return this.firstName + ' - ' + this.lastName;
            },
            set: function (newVal) {
              var parts = newVal.split(' - ');
              this.firstName = parts[0];
              this.lastName = parts[1];
            }
          }
        }
      });
    </script>

• watch、computed和methods之间的对比
  • computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  • methods方法表示一个具体的操作，主要书写业务逻辑；
  • watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；
    
    
  nrm的安装使用
  作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；
  • 运行npm i nrm -g全局安装nrm包；
  • 使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
  • 使用nrm use npm或nrm use taobao切换不同的镜像源地址；
    
    
  相关文件
  • URL中的hash（井号）