vue+koa 美团实战之vue基础1

写博客是思考的过程

如何用vue-cli3.0搭建vue框架

安装最新的脚手架: npm i -g @vue/cli

创建项目: vue create vue-learn

选择默认: default (babel, eslint)

然后下一步即可。

模板语法

• template
  • {{aaa}}
• 原始的Html
  • <span v-html = "html"></span>
• 表达式
  • {{ sum + 1}}
  • {{ true ? OK : NO}}
  • {{ message.split("").reverse().join("-")}}

指令

内置指令

• v-if
• v-show
• v-else
• v-once
• v-on
• v-bind
• …………

自定义指令

用途: 需求无需一个组件，又不是一个表达式可以解决的，就可以用自定义指令了。

    Vue.directive('name', {
        bind: function(el, binding) {},
        inserted: function() {},
        update: function() {},
        componentUpdated: function() {},
        unbind: function() {}
    })

Vue.Vue.directive: 声明指令
“name”: 自定义指令名字
钩子函数如下:

1. bind: 指令生效时调用
2. inserted: 元素插入父节点时调用
3. update: 值发生变化是调用

参数:
el: 绑定的Dom元素
binding:

• name: 指令名字
  

• value: 变量的值
  

• oldValue: 旧的变量的值
  

• expression: 用来高级操作，通过表达式体会开发者的意图
  

• arg : 参数
  

使用:
import './component/n.js'
<div v-n = "1"></div>