Vue.js 总结

Someone2019年6月14日大约 4 分钟

axios

In the project, it is important to use AJAX. Vue resource and axios is very useful.

yarn add axios -D

When building a project using it in Vue Components:

import axios from 'axios'
export deafult = {
}

In signal HTML file <script>:

// remeber to import CDN
var vm = new Vue({
    methods: {
        getInfo() {
            //axios code
        }
    }
})

提示

If want function getInfo automaticlly, use create hook function

export default {
  created: function () {
    axios
      .get('')
      .then(response => {

        }
      })
      .catch(error => {

      })
  },
}

localStorage

example

Client-Side Storage in Vue
Example in GitHub: base example, 使用了 v-model 双向绑定, 生命周期加载 localStorage 数据和 watch() 属性。
A blog about localStorage

在 mounted() 生命周期中加载数据，而为了观察到值的变化，需要使用 watch() 来检测数据的变化。

mounted() {
    if (localStorage.name) {
        this.name = localStorage.name
    }
},

watch()

注意在使用 watch() 的时候可以使用其提供的两个函数参数 newVal 和 oldVal, 也可单独使用某一个变量。

watch: {
    'name': function(newVal, oldVal) {
        // this.person = this.name + ':' + this.age
        this.person = newVal + ':' + this.age
    },
    'age': function(newVal) {
        this.person = this.name + ':' + newVal
    }
}

watch() 的进阶用法

注意到 watch() 使用参数!

可以定义 handler 去监听，并且使用 deep 或者 immediate.

usage

setItem()
```
localStorage.setItem('favoriteflavor','vanilla');
```
setItem() set the key and value and you read the key, then get the value.

getItem()

var taste = localStorage.getItem('favoriteflavor');
// -> "vanilla"

removeItem()

localStorage.removeItem('favoriteflavor');
var taste = localStorage.getItem('favoriteflavor');
// -> null

set an object:

如果存储的对象是一个 JSON 对象，那么就需要使用 JSON.stringify() 或者 JSON.parse() 加以处理：

var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom';
localStorage.setItem('car', JSON.stringify(car) );
console.log( JSON.parse( localStorage.getItem('car')) )

Devtools

github-vue-remote-devtools

usage:

npm install -g @vue/devtools
vue-devtools

Filters

Define local filters:

var vm = new Vue({
    //...
    filters: {
        capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
  }
    }
})

Define a filter globally before creating the Vue instance:

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

usage:

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

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

Directives

v-for

使用 v-for 遍历数组，注意到 v-for 也可以作为 function 传入参数。

在计算属性不适用的时候（一般情况下 v-for 的处理，比如排序，放置于 computed 属性中），可以使用一个 method 方法。

methods: {
  posts: function(n) {
    var postDir = "/blog/" + n + "/";
    return this.$site.pages
      .filter(x => x.path.startsWith(postDir) && !x.frontmatter.blog_index)
      .sort((a, b) => Date.parse(b.lastUpdated) - Date.parse(a.lastUpdated));
  }
}

v-for 涉及到三个参数 (value, key, index), 要善于加以利用

v-cloak

可以使用v-cloak取得变量：

<div v-cloak>  
  {{ msg }}
</div>

如果这样取得msg变量，会导致插值表达式闪烁问题，使用如下方法解决：

<head>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

The <div> will not be visible until the compilation is done.

v-text

<h4 v-text="msg"></h4>

Updates the element’s textContent(whole)

v-html

直接解析HTML:

<div v-html="msg2"></div>

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates.(尽量不用)

v-bind

使用v-bind 绑定变量的值，注意其后面可以用+增加字符串, see also api

<input type="button" value="Button" :title="mytitle + 'a string'" v-on:click="show">

v-on

上面的v-on用于绑定事件

v-on 事件修饰符：

提示

v-bind:title is equal to :title

v-on:click is equal to @click

<!-- stop propogation -->
<button @click.stop="doThis"></button>

<!-- key modifier using keyAlias -->
<input @keyup.enter="onEnter">

key modifiers

<!-- same as above -->
<input v-on:keyup.enter="submit">

<!-- also works for shorthand -->
<input @keyup.enter="submit">

binging the methods submit. the JavaScript code used is:

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '123',
                msg2: '<h1>haha</h1>',
                mytitle: 'This is a title'
            },
            methods: {
                show:function() {
                    alert('Hello')
                }
            }
        })
    </script>

v-model

We can use the v-model directive to create two-way data bindings on form input, text area, and select element.

Bind the value to a dynamic property on the Vue instance.

<input type="text" v-model="msg" placeholder="edit me">
<p>
    Message is {{ msg }}
</p>

Modifiers

.number

<input v-model.number='age' type="number">

make input to be automatically typecast as a number.

.trim

<input v-model.trim="msg">

make input to be trimmed automatically.

.lazy

<input v-model.lazy="msg">

synced after "change" instead of "input" .

Custom Directives

there are may be cases where you need some low-level DOM access on plain elements, and this is where custom directibes would still be useful.

// Register a global custom directive called `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

Then in a template, you can use the new v-focus attribute on any element, like this:

<input v-focus>

Hook function include bind inserted and update and so on.. see from API. there we use the bingding arguement:

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

binding has the properties: value name and expression and so on, to see it:

console.log(binding.value)
//or
console.log(binding.expression)

usage

in html, use the 'blue' other than blue:

<input v-color="'blue'">

This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is install the appropriate webpack loader for it. For example, to use SASS:

npm install sass-loader node-sass --save-dev

Vue CLI

Install:

yarn global add @vue/cli

create a project:

vue create hello-world

Lint the project:

yarn lint

Animate.css

https://daneden.github.io/animate.css/

使用方法：

<el-main
>
 <el-card
  shadow="hover"
  v-for="post in posts()"
  class="animated flipInX"
  style="margin-top: 40px;"
  :key=post.key
 >
 <!-- html file -->
 </el-card>
</el-main>

注意两点：

循环出来的元素必须绑定 key
直接给循环增加 animated 类

Vue.js 总结

Animating State

axios

localStorage

example

watch()

usage

Devtools

components

register

Filters

Directives

v-for

v-cloak

v-text

v-html

v-bind

v-on

key modifiers

v-model

Custom Directives

Pre-Processors

Vue CLI

Animate.css