Vue 的数据绑定

Vue 的数据绑定

该文章只用于个人笔记整理 代码均不能运行

双括号文本值替换

<p>{{替换内容变量 如  content}}</p>
data: {
    content:'1233321'
}

vue 计算属性

<div>
价格{{prices}}
data: {
    package1:[
        name:1,
        price:7199,
        count:2
    ]
}
computed:{
    prices:function(){
        return this.package1.price * package1.count
    }
}
</div>

vue 事件与指令

v-bind绑定 常用于绑定页面上的html class,style数据

:src="变量名"
:href="url"
<div :class="{'active':isactive 是一个布尔值}"></div>

data :{
    url: 'www.baidu.com',
    isactive: true
}

多属性

class
<div :class="{'active:isactive,error:iserror'}"></div>
data: {
    isactive:true,
    iserror:false;
}
#数组用法的时候又变成了变量
<div :class="[activeCls,errorCls]"></div>
data: {
    activeCls:active,
    errorCls:error;
}
#多个条件
<div :class="[{"active:isActive"},errorCls]"></div>
data: {
    isactive:true,
    errorCls:error;
}
style
#驼峰明明会被转换成分隔命名
fontSize font-size
<div :style="{'color:color,'fontsize':fontsize+'px'}"></div>
data: {
    color:'red',
    fontSize:14
}
#可以使用计算属性或者data
<div :style="styles"></div>
data :{
    styles:{
        color:'red',
        fontSize:14+'px'
    }
}
#应用多个的时候
<div :style="styles"></div>

内置指令

v-cloak 编译结束移除

v-html 渲染html内容

v-once 只渲染一次

v-if v-else-if v-else


<p v-if="state === 1">hhhh</p>
<p v-eles-if="status === 2">hh22</p>
<p v-else>3333</p>

data: {
    status:1
}
#判断多个元素可以使用内置的

<template v-if="status ===1">
    <p>文本</p>
    <p>文本</p>
    <p>文本</p>
    <p>文本</p>
    <p>文本</p>
</template>

data :{
    status:1
}

v-for 数组遍历

<div id="app">
    <ul>
        <li v-for="book in books"></li>
    </ul>
</div>
data :{
books: [
        {name:'11122'},
        {name:'11122'},
        {name:'11122'},
        {name:'11122'},
    ]
}
#多元素渲染
把要渲染的元素放到<template>中
<div id="app">
    <ul>
        <template v-for="book in books">
            <li>书名{{book.name}}</li>
            <li>作者{{boo.author}}</li>
        </template>
    </ul>
</div>

data :

    books: [
        {
            name:"13213",
            author:"蓝泽"
        },
        {
            name:"13213",
            author:"蓝泽"
        }
]

#数组索引

<div id="app">
    <ul>
        <li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
    </ul>
</div>

data :[
    {name:'11122'},
    {name:'11122'},
    {name:'11122'},
    {name:'11122'},
]
#数组属性遍历
<div id="app">
    <ul>
        <li v-for="value in user ">{{value}}</li>
    </ul>
</div>

data :{
    user:{
        name:"lzx",
        gender:'男',
        age:25,
    }
}
#整数迭代
<div id="app">
    <span v-for="n in 10">{{n}}</span>
</div>

数组更新

会修改原始数组的方法 执行下面的方法会直接触发视图渲染新数组

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
app.books.push({
    name:'1111',
    author:'lzx'
})

以下的方法不会对原始数组更新,会返回一个新数组。

用生成的新数组去替换旧数组

  • filter()
  • concat()
  • slice()
#数组过滤
<div id="app">
    <ul>
        <li v-for="book in books"></li>
    </ul>
</div>
data :{
     books: [
        {
            name:"13213",
            author:"蓝泽"
        },
        {
            name:"13213",
            author:"蓝泽"
        },
}
app.books = app.books.filter(functin(itme)){
    return item.name.match(/java/)
}

vue 不能检测到的数组更新

  • 通过索引设置项 app.books[3] = {….}
  • 修改数组长度 app.books.length=1

解决方法 使用内置的set函数

Vue.set(app.books,3,{
    name: 'llzx',
    author:'lzx'
})

webpack中
this.$set(app.books,3,{
    name: 'llzx',
    author:'lzx'
})
方法2

app.book.splice(3,1,{
    name: 'llzx',
    author:'lzx'
})

数组过滤与排序

用计算属性

#过滤
data: {
    computed:{
        filterbooks:function(){
            return this.books.filter(function(book){
                return book.name.macth(/java/)
            })
        }
    }
}
排序
data:{
    computed:{
        sortedbooks:function(){
            return this.books.sort(function(a,b){
                return a.name.length < b.name.length
            })
        }
    }
}

方法

v-on

#监听click
<div id="app">
    {{counter}}
    <button @click="counter++">+1</button>
</div>
data: {
    counter:0
}

#绑定方法
<div id="app">
    {{counter}}
    <button @click="handleAdd()">+1</button>
    <button @click="handleAdd(10)">+1</button>
</div>
data: {
    counter:0
}
methods:{
    handleAdd:function(count){
        count = count ||1
        this.counter += counter;
    }
}
#调用原生事件
$event 用于访问原生dom
<a href="www.baidu.com" @click-"handleClick("text",$event)"></a>
medthods:{
    handleClick:function(message,event){
        event.preventDefault();
        windows.alert(message)
    }
}

v-on修饰符

  • stop
  • prevent
  • capture
  • self
  • once
#阻止单击事件冒泡
<a @click.stop="handle"></a>

#提交事件不再重载页面
<form @submit.prevent="handle"></form>

#修饰符串联
<a @click.capture="handle"></a>

#触发一次
<a @click.once="handle"></a>

#监听键盘事件
<input @keyup.13="submit"
自定义键码
Vue.config.keyCodes.f1 =11

键盘快捷名称

  • enter
  • tab
  • delete
  • esc
  • space
  • up
  • down
  • left
  • right

配合鼠标使用

  • ctrl
  • alt
  • shift
  • meta
#监听ctrl+s
<input @keyup.ctrl.83="handleSave">
#shift+click
<div @click.shift="handle"></div>

单选按钮

单个单选 使用 v-bind

<input type="radio" :checked="picked">
<label>单选</label>
data :{
    picked:true
}
#多个按钮互斥 同一组用 v-model 区分
<input type="radio" v-model="picked" value="html" id="html">
<label for="html">HTML</label>
<br>

复选框

#单独使用一个复选框 用v-model绑定一个布尔值
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">状态是{{checked}}</label>

data:{
    checked:false
}
#组合使用 v-model 和 value 一起 v-model 相同为一组

<input type="checkbox" v-model="checked" value="html" id="html">
<label for="html">HTML{{checked}}</label>
<br>
<input type="checkbox" v-model="checked" value="js" id="js">
<label for="js">JS</label>
<br>
<input type="checkbox" v-model="checked" value="css" id="js">
<label for="css">CSS</label>
<br>

<p>选择的项是{{checked}}</p>

data:{

    checked:["html","css"]
}

下拉列表

单选下拉

<select v-model="selected">
    <option></option>
    <option></option>
    <option></option>
</select>
<p>选择项为{{selected}}</p>


data :{
    selected:"html"
}

option 中的value 如果不做指定的话就使用text 代替

多选下拉 只需要加上 multiple

<select v-model="selected" mutiple>
    <option>js</option>
    <option>html</option>
    <option>css</option>
</select>
<p>选择项为{{selected}}</p>

data :{
    selected:[js,css]
}

在表单中动态绑定数据

使用v-bind

#单选按钮
<input type="radio" v-model="picked" :value="value">

data :{
    picked:false,
    value:123
}

#复选框

<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">

data :{
    toggle:false,
    value1:'a',
    value2:'b'
}
#选择列表

<select v-model="selected">
    <option :value="{number:123}">123</option>
</select>
{{selected.number}}

data:{
    selected:''
}

v-model 用于在表单上双向绑定数据

v-model 只关注绑定数据 不关心 表单的初始value
textarea之间的值也不会关心

<input type="text" v-mode="message">
<p>{{message}}</p>
data :{
    message:''"
}

也可以绑定textarea

textarea v-model="text" placeholder="输入内容">textarea
<p>{{text}}</p>
data: {
    text:"12313"
}

v-model 修饰符

.lazy

在输入框中默认v-model 在 input事件同步输入框的数据(除了中文方法)
使用lazy修饰 会 变成在change事件中同步

<input type="text" v-mode.lazy="message">
<p>{{message}}</p>

data :{
    message:''
}
.number

该修饰符会将输入转换为 数字,否则输入的数据却转换成string

<input type="text" v-mode.number="message">
<p>{{message}}</p>

data :{
    message:123
}

.trim

可以自动过滤掉 首尾空格

<input type="text" v-mode.trim="message">
<p>{{message}}</p>

data :{
    message:''
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注