Vue day2

发表于 | 更新于: | 分类于 | | 热度 ℃

vue 生命周期表

vue生命周期表

品牌管理案例

添加新品牌

删除品牌

根据条件筛选品牌

  1. 1.x 版本中的 filterBy 指令，在 2.x 中已经被废除：

filterBy - 指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<tr v-for="item in list | filterBy searchName in 'name'">

  <td>{{item.id}}</td>

  <td>{{item.name}}</td>

  <td>{{item.ctime}}</td>

  <td>

    <a href="#" @click.prevent="del(item.id)">删除</a>

  </td>

</tr>
  1. 在 2.x 版本中手动实现筛选的方式：
  • 筛选框绑定到 VM 实例中的 searchName 属性：
1
2
3
<hr> 输入筛选名称：

<input type="text" v-model="searchName">
  • 在使用 v-for 指令循环每一行数据的时候，不再直接 item in list，而是 in 一个 过滤的 methods 方法，同时，把过滤条件searchName传递进去：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<tbody>

      <tr v-for="item in search(searchName)">

        <td>{{item.id}}</td>

        <td>{{item.name}}</td>

        <td>{{item.ctime}}</td>

        <td>

          <a href="#" @click.prevent="del(item.id)">删除</a>

        </td>

      </tr>

    </tbody>
  • search 过滤方法中，使用 数组的 filter 方法进行过滤：
1
2
3
4
5
6
7
8
9
search(name) {

  return this.list.filter(x => {

    return x.name.indexOf(name) != -1;

  });

}

Vue 调试工具vue-devtools的安装步骤和使用

Vue.js devtools - 翻墙安装方式 - 推荐

过滤器

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

私有过滤器

  1. HTML 元素：
1
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
  1. 私有 filters 定义方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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=’’)来填充字符串；

全局过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 定义一个全局过滤器

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}`;

  }

});

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

键盘修饰符以及自定义键盘修饰符

1.x 中自定义键盘修饰符【了解即可】

1
Vue.directive('on').keyCodes.f2 = 113;

2.x 中自定义键盘修饰符

  1. 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：
1
Vue.config.keyCodes.f2 = 113;
  1. 使用自定义的按键修饰符：
1
<input type="text" v-model="name" @keyup.f2="add">

自定义指令

  1. 自定义全局和局部的 自定义指令：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：

Vue.directive('focus', {

  inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用

    el.focus();

  }

});



// 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：

  directives: {

    color: { // 为元素设置指定的字体颜色

      bind(el, binding) {

        el.style.color = binding.value;

      }

    },

    'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数

      el.style.fontWeight = binding2.value;

    }

  }
  1. 自定义指令的使用方式：
1
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">

Vue 1.x 中 自定义元素指令【已废弃,了解即可】

1
2
3
4
5
Vue.elementDirective('red-color', {
  bind: function () {
    this.el.style.color = 'red';
  }
});

使用方式：

1
<red-color>1232</red-color>

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 请求资源地址：
  1. JSONP 的实现原理
  • 由于浏览器的安全性限制，不允许 AJAX 访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
  • 可以通过动态创建 script 标签的形式，把 script 标签的 src 属性，指向数据接口的地址，因为 script 标签不存在跨域限制，这种数据获取方式，称作 JSONP（注意：根据 JSONP 的实现原理，知晓，JSONP 只支持 Get 请求）；
  • 具体实现过程： - 先在客户端定义一个回调方法，预定义对数据的操作； - 再把这个回调方法的名称，通过 URL 传参的形式，提交到服务器的数据接口； - 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行； - 客户端拿到服务器返回的字符串之后，当作 Script 脚本去解析执行，这样就能够拿到 JSONP 的数据了；
  • 带大家通过 Node.js ，来手动实现一个 JSONP 的请求例子；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const http = require('http');
// 导入解析 URL 地址的核心模块
const urlModule = require('url');

const server = http.createServer();
// 监听 服务器的 request 请求事件，处理每个请求
server.on('request', (req, res) => {
  const url = req.url;

  // 解析客户端请求的URL地址
  var info = urlModule.parse(url, true);

  // 如果请求的 URL 地址是 /getjsonp ，则表示要获取JSONP类型的数据
  if (info.pathname === '/getjsonp') {
    // 获取客户端指定的回调函数的名称
    var cbName = info.query.callback;
    // 手动拼接要返回给客户端的数据对象
    var data = {
      name: 'zs',
      age: 22,
      gender: '男',
      hobby: ['吃饭', '睡觉', '运动']
    }
    // 拼接出一个方法的调用，在调用这个方法的时候，把要发送给客户端的数据，序列化为字符串，作为参数传递给这个调用的方法：
    var result = `${cbName}(${JSON.stringify(data)})`;
    // 将拼接好的方法的调用，返回给客户端去解析执行
    res.end(result);
  } else {
    res.end('404');
  }
});

server.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000');
});
  1. vue-resource 的配置步骤：
  • 直接在页面中，通过script标签，引入 vue-resource 的脚本文件；
  • 注意：引用的先后顺序是：先引用 Vue 的脚本文件，再引用 vue-resource 的脚本文件；
  1. 发送 get 请求：
1
2
3
4
5
getInfo() { // get 方式获取数据
  this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
    console.log(res.body);
  })
}
  1. 发送 post 请求：
1
2
3
4
5
6
7
8
9
10
postInfo() {
  var url = 'http://127.0.0.1:8899/api/post';
  // post 方法接收三个参数：
  // 参数1： 要请求的URL地址
  // 参数2： 要发送的数据对象
  // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
  this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
    console.log(res.body);
  });
}
  1. 发送 JSONP 请求获取数据：
1
2
3
4
5
6
jsonpInfo() { // JSONP形式从服务器获取数据
  var url = 'http://127.0.0.1:8899/api/jsonp';
  this.$http.jsonp(url).then(res => {
    console.log(res.body);
  });
}

配置本地数据库和数据接口 API

  1. 先解压安装 PHPStudy;
  2. 解压安装 Navicat 这个数据库可视化工具，并激活；
  3. 打开 Navicat 工具，新建空白数据库，名为 dtcmsdb4;
  4. 双击新建的数据库，连接上这个空白数据库，在新建的数据库上右键 -> 运行SQL文件，选择并执行 dtcmsdb4.sql 这个数据库脚本文件；如果执行不报错，则数据库导入完成；
  5. 进入文件夹 vuecms3_nodejsapi 内部，执行 npm i 安装所有的依赖项；
  6. 先确保本机安装了 nodemon, 没有安装，则运行 npm i nodemon -g 进行全局安装，安装完毕后，进入到 vuecms3_nodejsapi目录 -> src目录 -> 双击运行 start.bat
  7. 如果 API 启动失败，请检查 PHPStudy 是否正常开启，同时，检查 app.js 中第 14行 中数据库连接配置字符串是否正确；PHPStudy 中默认的 用户名是 root，默认的密码也是 root

品牌管理改造

展示品牌列表

添加品牌数据

删除品牌数据

相关文章

  1. vue.js 1.x 文档
  2. vue.js 2.x 文档
  3. String.prototype.padStart(maxLength, fillString)
  4. js 里面的键盘事件对应的键码
  5. pagekit/vue-resource
  6. navicat 如何导入 sql 文件和导出 sql 文件
  7. 贝塞尔在线生成器
-------------本文结束感谢您的阅读-------------
0%