Vue¶
指令¶
v-bind¶
简写::xxx
v-on:xxx¶
简写:@xxx
- 绑定原生DOM事件
@click: 鼠标单击时触发
@dblclick:鼠标双击时触发
@mouseenter:鼠标进入时触发
@mouseleave:鼠标移出时触发
- 绑定自定义事件
点击按钮,如果想触发自定义事件,需要手动把自定义事件抛出来:$emit
<todo-item @自定义的delete="handleDelete">
<button @click="handleClick">点击删除</button>
<todo-item>
handleClick() {
this.$emit("自定义的delete", 传递的参数this.xxx)
}
handleDelete(val) {
console.log(val) // val 可以拿到传参title
}
v-modle¶
其实是一种语法糖,内部为:不同输入元素使用的属性并抛出不同事件,比如对于text输入框,v-modle就是:value="" @input="handleChange" 的简写形式
在表单元素上创建双向数据绑定,v-model会忽略所有表单元素的初始值,初始值需要在组件的data中声明。
<input>
<textarea>
<select>
组件¶
全局注册
语法:Vue.component('my-component-name', { /* ... */ })
Vue.component('组件名', {
template: `pass`, // 用反引号包裹,模板元素,如果有多个元素需要包含在一个父元素中
props: pass, // 声明参数
data: function () { // data的值必须是个函数
pass
},
methods: {
handleClick() {
pass
}
}
})
插槽:v-slot:xxx¶
简写:#xxx
用于分发内容,一种传递复杂内容的方式
默认插槽:没有名称的插槽 具名插槽:有名称的插槽
// 2.5版本这样标识
<span slot="插槽名称">xxx</span>
// 2.6版本这样标识
<template v-slot:插槽名称>
<span>xxx</span>
</template>
// 引用插槽
<slot name="插槽名称"></slot>
作用域插槽:可以根据子组件传递不同的值返回不同的内容
<template v-slot:插槽名称="值">
<span>xxx</span>
</template>
// 引用插槽
<slot name="插槽名称" :value="value"></slot>
iView¶
- CDN 方式引入
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
注意事项:
-
组件名要分隔,例如 DatePicker 必须要写成 date-picker
-
以下组件,需要加前缀 i-:
Button: i-button Col: i-col Table: i-table Input: i-input Form: i-form Menu: i-menu Select: i-select Option: i-option Progress: i-progress Time: i-time
-
以下组件,在所有模式下,必须加前缀 i-(除非使用 iview-loader)
Switch: i-switch Circle: i-circle
<script type="text/javascript" src="{{ url_for('static', filename='login.js') }}"></script>
部署¶
npm run dev # 本地调试
npm run build # 生成静态文件到dist中,将里面的内容传到服务器即可