vue.js

最近开发公司vue前端项目，做一下笔记，偶尔上来查漏补缺

Vue指令之v-bind的三种用法

1. 直接使用指令v-bind

2. 使用简化指令:

3. 在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

Vue指令之v-on的缩写和事件修饰符

事件修饰符：

• .stop 阻止冒泡

• .prevent 阻止默认事件

• .capture 添加事件侦听器时使用事件捕获模式

• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

• .once 事件只触发一次

在Vue中使用样式

使用class样式

1. 数组

<h1 :class="['red', 'thin']">这是一个H1</h1>

2. 数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个H1</h1>

3. 数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个H1</h1>

4. 直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个H1</h1>

使用内联样式

1. 直接在元素上通过 :style 的形式，书写样式对象

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

2. 将样式对象，定义到 data 中，并直接引用到 :style 中

• 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

3. 在 :style 中通过数组，引用多个 data 上的样式对象

• 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

 

Vue指令之v-for和key属性

1. 迭代数组

　　<ul>
 　　 <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
　　</ul>

2. 迭代对象中的属性

    <!-- 循环遍历对象身上的属性 -->
​
    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

3. 迭代数字​

　　<p v-for="i in 10">这是第 {{i}} 个P标签</p>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

私有过滤器

1. HTML元素：​

　　<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

2. 私有 filters 定义方式：　　filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用​

dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
​
      var dt = new Date(input);
​
      // 获取年月日
​
      var y = dt.getFullYear();
​
      var m = (dt.getMonth() + 1).toString().padStart(2, '0');
​
      var d = dt.getDate().toString().padStart(2, '0');
​
​
      // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
​
      // 否则，就返回  年-月-日 时：分：秒
​
      if (pattern.toLowerCase() === 'yyyy-mm-dd') {
​
        return `${y}-${m}-${d}`;
​
      } else {
​
        // 获取时分秒
​
        var hh = dt.getHours().toString().padStart(2, '0');
​
        var mm = dt.getMinutes().toString().padStart(2, '0');
​
        var ss = dt.getSeconds().toString().padStart(2, '0');
​
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
​
      }
​
    }
​
  }

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；

全局过滤器 

// 定义一个全局过滤器

Vue.filter('dataFormat', function (input, pattern = '') {

  var dt = new Date(input);

  // 获取年月日

  var y = dt.getFullYear();

  var m = (dt.getMonth() + 1).toString().padStart(2, '0');

  var d = dt.getDate().toString().padStart(2, '0');



  // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

  // 否则，就返回  年-月-日 时：分：秒

  if (pattern.toLowerCase() === 'yyyy-mm-dd') {

    return `${y}-${m}-${d}`;

  } else {

    // 获取时分秒

    var hh = dt.getHours().toString().padStart(2, '0');

    var mm = dt.getMinutes().toString().padStart(2, '0');

    var ss = dt.getSeconds().toString().padStart(2, '0');



    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

  }

});

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

 vue实例的生命周期

• 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

• 生命周期钩子：就是生命周期事件的别名而已；

• 生命周期钩子 = 生命周期函数 = 生命周期事件

• 主要的生命周期函数分类：

• 创建期间的生命周期函数：

• beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性

• created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板

• beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中

• mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

• 运行期间的生命周期函数：

• beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点

• updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

• 销毁期间的生命周期函数：

• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

• destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

vue-resource 实现 get, post, jsonp请求

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求

1. 之前的学习中，如何发起数据请求？

2. 常见的数据请求类型？ get post jsonp

3. 测试的URL请求资源地址：

• get请求地址： http://vue.studyit.io/api/getlunbo

• post请求地址：http://vue.studyit.io/api/post

• jsonp请求地址：http://vue.studyit.io/api/jsonp

4. JSONP的实现原理

• 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；

• 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；

• 具体实现过程：

• 先在客户端定义一个回调方法，预定义对数据的操作；

• 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；

• 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；

• 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；

定义Vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同：

• 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；

• 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

全局组件定义的三种方式

1. 使用 Vue.extend 配合 Vue.component 方法：

　　var login = Vue.extend({
     　　 template: '<h1>登录</h1>'
    });
    Vue.component('login', login);

2. 直接使用 Vue.component 方法：

　　Vue.component('register', {
     　　 template: '<h1>注册</h1>'
    });

3. 将模板字符串，定义到script标签种：

　　<script id="tmpl" type="x-template">
     　　 <div><a href="#">登录</a> | <a href="#">注册</a></div>
    </script>

同时，需要使用 Vue.component 来定义组件：

　　Vue.component('account', {
      template: '#tmpl'
    });

注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

组件中展示数据和响应事件

1. 在组件中，data需要被定义为一个方法，例如：

　　Vue.component('account', {
      　　template: '#tmpl',
      　　data() {
       　　 return {
       　　   msg: '大家好！'
       　　 }
      　　},
      　　methods:{
       　　 login(){
      　　    alert('点击了登录按钮');
     　　   }
    　　  }
    });

在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问；

使用components属性定义局部子组件

1. 组件实例定义方式：

　　<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: { // 定义子组件
        account: { // account 组件
          template: '<div><h1>这是Account组件{{name}}</h1><login></login></div>', // 在这里使用定义的子组件
          components: { // 定义子组件的子组件
            login: { // login 组件
              template: "<h3>这是登录组件</h3>"
            }
          }
        }
      }
    });
  </script>

2. 引用组件：

　　<div id="app">

　　　　<account>

　　　　</account>

　　</div>