Vue.js

• Vue

  • 钩子函数

  • Vue指令

    • v-html

    • v-bind

    • v-if

    • v-on

    • v-model

    • v-for

  • 过滤器

    • 计算属性

  • 模块导出与引用

Vue

钩子函数

对于前端来说，钩子函数就是指在所有函数执行前，先执行了的函数。提供一个可以影响默认的(或原有的)流程(机制)的时机。

var rawConsole = console.info;
console.info=function(str){
    str+="嘿嘿哈哈哈";//钩子
    rawConsole(str);
}
//用一个变量把console.info存起来,然后重新定义console.info,让console.info输出的内容后面加上"嘿嘿哈哈哈"

rawConsoleInfo函数就是类似于钩子函数

Vue指令

带有前缀v-表示Vue提供的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM 上。

v-html

使用 v-html 指令用于输出 html 代码：

<div id="app">
    <div v-html="message"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>helo</h1>'
  }
})
</script>

v-bind

HTML 属性中的值应使用v-bind指令。

<!-- CSS -->
<style>
.classStyle{
  background: #444;
  color: #eee;
}
</style>

<!-- HTML -->
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="classBool" id="r1">
  <br><br>
  <div v-bind:class="{'classStyle': classBool}">
    directiva v-bind:class
  </div>
</div>

<!-- JS -->
<script>
new Vue({
    el: '#app',
  data:{
      classBool: false
  }
});
</script>

v-if

v-if指令根据表示表达式的值(true or false)决定是否插入元素。

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <p v-else>你看不到我了</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

v-on

v-on指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

在这里参数是监听的事件名。

v-model

v-model可以监听输入框的输入内容，实现双向数据绑定。

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

v-for

v-for指令可以绑定数组的数据来循环操作。指令需要以 item in items 形式的特殊语法。

<ul>
  <li v-for="(value, key, index) in todos">
   {{ index }}. {{ key }} : {{ value }}
  </li>
</ul>
</div>

<script type="text/javascript">
var app4 = new Vue({
    el: '#app-4',
    data: {
    todos: [
          { text: '学习 JavaScript' },
          { text: '学习 Vue' },
          { text: '整个牛项目' }
        ]
    }
})
</script>

过滤器

过滤器的设计目的就是用于文本转换，被用作一些常见的文本格式化。

<!-- in mustaches -->
{{ message | capitalize }}

{{ message | filterA | filterB }}

{{ message | filterA('arg1', arg2) }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

在mustache绑定和 v-bind 表达式中使用。

<div id="app">
  {{ message | capitalize }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<script type="text/javascript">
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  },

  //也可以用下面的方法
  // in component
    methods: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
    }
})
</script>

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

参考：https://cn.vuejs.org/v2/guide/computed.html

模块导出与引用

//导出
// a.js
function logs () {
  console.log('logs')
}

function hei () {
  console.log('hei')
}
export { logs as default, hei }


//引入
// b.js
import {default as fn, hei} from './a'

fn()
//logs

hei()
//hei

或者：

//导出
// a.js
export default {
  logs: function () {
    console.log('logs')
  },
  hei: function () {
    console.log('hei')
  }
}


//引入
//b.js
import fn from './public/fn'

fn.logs()
//logs