写博客是思考的过程
如何用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”: 自定义指令名字
钩子函数如下:
- bind: 指令生效时调用
- inserted: 元素插入父节点时调用
- update: 值发生变化是调用
参数:
el: 绑定的Dom元素
binding:
-
name: 指令名字
-
value: 变量的值
-
oldValue: 旧的变量的值
-
expression: 用来高级操作,通过表达式体会开发者的意图
-
arg : 参数
使用:
import './component/n.js'
<div v-n = "1"></div>