vue-03-品牌案例及其延伸

品牌案例

• 详见 code 文件夹

vue 调试工具vue-devtools插件的安装和使用

过滤器

• Vue.js允许自定义过滤器，可被用作常见的文本格式化。过滤器用在两个地方：

  • mustache插值
  • v-bind表达式

• 过滤器被添加在JavaScript表达式尾部，由“管道”符指示

• 定义语法：

  1 2 3 4

  <p>{{ msg | msgFormat(a, b, c) }}</p> 定义过滤器 Vue.filter('过滤器名', function (第一个参数必须是msg, a, b, c) {})

• 全局过滤器：所有vue实例都能用

• 局部（私有）过滤器：

  1 2 3 4 5 6 7 8 9

  var vm = new Vue({ el: '#app', data: {} methods: {} filters: { dataFormat: function () {} } }) //过滤器优先调用私有过滤器

• 处理字符串新方法（补全字符串）：

  • padStart(补到多长, ‘用什么来补’) //向前补
  • padEnd(补到多长, ‘用什么来补’) //向后补

自定义键盘修饰符

• Vue中给的 @keyup.enter

  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

• 可以通过全局 config.keyCodes 对象自定义来使用

  1	Vue.config.keyCodes.f1 = 112

  1	<input @keyup.f1="add()">

自定义全局指令

1
2

<input type="text" v-focus >
<!-- 设置指令时得加 v-  定义时不用 -->

1
2
3
4
5
6
7
8
9
10
11
12

Vue.directive('focus', {
    bind: function (el) {
        //el 就是原生的DOM元素
        //bind: 绑定到el上的指令会在el插入到页面之前执行，只执行一次
    },
    inserted: function (el) {
        //inserted：el插入到页面中后才执行，只执行一次
    },
    updated: function (el) {
        //当VNode更新时会执行，可能执行多次
    }
})

• 第一个参数必须 el

• 第二个参数

1

<th v-color="'red'">ID</th>

1
2
3
4
5
6

Vue.directive('color', {
     bind: function (el, binding) {
       console.log(binding)
       el.style.color = binding.value
     }
   })

自定义私有指令

1
2
3
4
5
6
7
8
9
10
11
12
13

var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    filters: {},
    directives: {
        'focus': {
            bind: function (el) {},
            inserted: function (el) {},
            updated: function (el) {}
        }
    }
})

自定义指令简写

1
2
3
4
5
6

 Vue.directive('color', function (el, binding) {
        console.log(binding)
        el.style.color = binding.value
      }
  )
//不写成对象形式，会默认写在了bind和updated里面

Vue生命周期

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

  1 2 3 4 5 6 7 8

  beforeCreate //初始化生命周期 created // 可以获得data中的数据和methods中的方法 beforeMount //挂起之前渲染模板 mounted //模板挂起完毕 beforeUpdate //数据改变触发才会beforeUpdate，然后创建虚拟Dom重新渲染 updated //重新渲染完毕 beforeDestory destoryed

  

vue-resource(axios)实现get,post,jsonp请求

• vue-resource依赖vue

• vue.js是定义了Vue构造函数，vue-resource是在vm实例上挂载了$http属性

• get请求：

  1 2 3 4 5 6 7 8 9 10

  methods:{ get:function(){ //发送get请求 this.$http.get('/try/ajax/ajax_info.txt').then(function(res){ document.write(res.body); },function(){ console.log('请求失败处理'); }); } }

• post请求

  post发送数据到后端，需要第三个参数{emulateJSON:true}

  emulateJSON 的作用： 如果Web服务器无法处理编码为 application/json 的请求，你可以启用 emulateJSON 选项。

  1 2 3 4 5 6 7 8 9 10

  methods: { post: function () { this.$http.post('/demo.php', {name: 'jack'}, {emulateJSON: true}) .then(function (res) { }, function (err) { }) } }

• jsonp请求

  1 2 3 4 5 6 7 8 9 10

  methods:{ get:function(){ //发送jsonp请求 this.$http.jsonp('/try/ajax/ajax_info.txt').then(function(res){ document.write(res.body); },function(){ console.log('请求失败处理'); }); } }

• 设置根地址：

  1	Vue.http.options.root = 'http://vue.studyit.io/'

  发请求是使用相对路径且不要带斜线

  1	this.$http.get('try/ajax/ajax_info.txt').then()

• 全局配置{emulateJSON: true}

  • Vue.http.options.emulateJSON = true