Vue

vue定义

• 渐进式js框架

组成

模板

• 指令:将控制和html联系在一起

• html内容

样式

控制

• data:数据

• el 指定模板

• methods 方法

指令

文本渲染指令

• {{js表达式}}

• v-text

• v-html
  可以渲染数据中的html标签

条件渲染指令

• v-if="表达式值"
  通过移除dom元素来隐藏

• v-else

• v-show
  通过css display:none 方法来隐藏

属性绑定

• v-bind:属性名="值"

• :属性名="值"

特别强调

• 所有的指令都只能在el指定的html标签内才有用

• v-指令="值"
  "值不能看着是字符串,而应该是理解为js的表达式运算结果,或者数据data里面的值

事件绑定

• v-on:事件名="执行内容"
  v-on:click='num=1"

• 简写方法
  @事件名=""
  @click="num=2"
  当单击的时候设置num值为2

列表渲染

• v-for="(item,index) in list"

• item 是自定义的,代表每一项数据

• index 代表数据的渲染下标

• :key="index"
  key值是要唯一的
  方便vue识别,排序动画等操作

<li v-for="(item,index) in list">
    {{index+1}} - {{item}}
</li>
list:["vue","小程序","python"]

// 1 - vue
// 2 - 小程序
// 3 - python

<li v-for="item in list2">
    名字:{{item.name}}
    年龄:{{item.age}}
</li>

list2:[
    {name:"ufo",age:18},
    {name:"abc",age:19},
    {name:"CD",age:20},
]

// 名字:ufo 年龄:18
// 名字:abc 年龄:19
// 名字:CD 年龄:20

表单绑定 v-model=""

• text

• checkbox

1.单一
2.多选
①绑定的数据是数组类型
②每个多选项

• radio

• select

• 表单修饰符
  .lazy 当change事件触发视图更新
  默认是input事件就会触发视图更新
  .number把表单的值转换为数据数值

<p>性别: 
    <input value="男" type="radio" name="sex" v-model="sex">男 
    <input value="女" type="radio" name="sex" v-model="sex">女
    <input value="保密" type="radio" name="sex" v-model="sex">保密
</p>

data:{
    sex:""
}
//单选,默认不选中

<p>爱好: 
    <input value="看书" type="checkbox" name="fav" v-model="favorite">看书
    <input value="听歌" type="checkbox" name="fav" v-model="favorite">听歌
    <input value="游泳" type="checkbox" name="fav" v-model="favorite">游泳
</p>

data:{
    favorite:[],
}
// 多项,默认不选中

<p>
    <input type="checkbox" v-model="isCheck">请同意我们的霸王条款
</p>
<button :disabled="!isCheck">注册</button>

// disable==true 按钮不可用
// disable==false 按钮可用

美妙清单

• temp:''
  输入框里面的内容
• delItem(item)
  删除一项
• this.list.indexOf(item)
  查找当前item在list里面的下标是第几个
• this.list.splice(index,1)
  在list删除元素从index个删除1个
• addItem()
  添加一项
• this.list.unshift(this.temp)
  把temp内容插入到list最前面

vue

• 在vue中不用去操作dom元素节点

• 通过操作数据来改变视图(dom节点)

事件修饰

事件修饰符

• .stop 停止事件冒泡

• .prevent 阻止默认事件

• .once 只执行一次

• @click.prevent="say"
  @click.once="say"

按键修饰符

• @keyup.enter 回车键被按下

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

filters 过滤 更改现有数据的显示格式

filters:{
    fix(val,arg1,arg2){
        return xxx
    }
}

• {{12345 | fix}}

• {{12345 | fix(2)}}

vue的参数

• el 指令模板

• data 指定数据

• methods 指定方法

• watch 监听

• computed 计算

• filter 过滤

vue模板指令 (联系模板与数据+方法的)

1. v开头

• v-text

• v-on

2. :参数

• v-on:click

• v-bind:title

3. .修饰符

• v-model.number

• v-bind:keyup.enter

directives (vue自定义指令)

作用

1. 要操作dom时候

2. 使用集成第三方插件时候

定义

directives:{
    img:{
        inserted(el,binding){
            // el当前指令所在的html节点
            // binding.value 指令的值
        }
    }
}

使用

<div v-img="xxx">

单词

• directives 指令

• inserted 已插入

• binding 绑定

class绑定

属性绑定

:class = "{'red':flag}"

动态绑定

:class="{'red':flag}"

:class="{'active':index==current}"

数组绑定

:class="['red','em','small']"

style绑定

对象

:style="{fontSize:'14px',color:'blue'}"

:style="obj"

data:{
    obj:{'font-size':"48px",fontStyle:"italic",color"red}
}