过滤器
使用方式 {{变量 | 过滤器名}}
可以同时使用多个和连着使用
自定义按键
<body>
<div class="app">
<input type="text" @keyup.f="an">
</div>
</body>
<script>
//创建指令
Vue.config.keyCodes.f = 70
let quan = new Vue({
el:".app",
data :{},
methods:{
an(){
alert("提交成功") }
})
自定义指令
1.全局定义
使用 Vue.directive()
里面有
bind:只能调用一次
inserted:这个是元素在已经渲染到界面上之后在执行
update :当元素有更新的时候执行(实现数据交互起作用)
基础
Vue.js的代码结构
- 引入vue.js
- 写视图层,我们要展示的内容
- 实例化Vue()
插值表达式
v-cloak :防止闪烁
v-text :会替换掉元素里的内容(不解析)
v-html:可以渲染html界面(解析)
2 v-bind(界面元素属性值的绑定)简写 :
3.v-on(进行事件的绑定) 简写 @
4.v-model(数据双向绑定)
5.Vue中样式的使用
可以使用
- 数组
- 三木表达式
- 数组内置对象(对象的键是样式的名字,值是Boolean类型)
- 直接通过对象
V-for和key属性
- 遍历数组,参数(item,index) in list
- 遍历对象,参数(value,key,index) in list
- 遍历数字,num in 10 (1~10)
- key在使用v-for的时候都需要去设置key
- 让界面元素和数组里的每个记录进行绑定
- key只能是字符串或者数字
- key必须是唯一的
v-if与v-show区别
v-if:f删除dom元素
v-show设置display:none