Vue 数据，属性，样式，绑定 + 分支循环

Posted 鲸渔要加油

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 数据，属性，样式，绑定 + 分支循环相关的知识，希望对你有一定的参考价值。

在学习 Vue 的时候尽量多查阅文档


学习目标

◆ 能够说出 Vue 的基本用法

◆ 能够说出 Vue 的模板语法

◆ 能够说出 Vue 的常用属性

◆ 能够基于 Vue 实现需求效果

文章目录

一、Vue

Vue 是一套用于 构建用户界面的渐进式框架
声明式渲染 —— 组件系统 —— 客户端系统 —— 集中式状态管理 —— 项目构建

官网： Vue

使用Vue渲染页面

  • el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
  • data： 模型数据（值是一个对象）
  • 插值表达式： {{}} 用于填充数据，也可实现简单的计算
 <div class="box1">{{msg}}</div>
 <script type="text/javascript" src="./vue.js"></script>
 <script type="text/javascript">
     let vm = new Vue({
         el: '.box1',
         data: {
             msg: '远近渔'
         }
     })
 </script>

二、指令

  • 就是自定义属性
  • 格式： 以 v- 开始

v-cloak 解决闪烁

防止页面加载时出现闪烁问题

 <style>
     [v-cloak] {
         display: none;
     }
 </style>

 <div v-cloak>{{msg}}</div>

1. 数据绑定指令

v-text

<div v-text="msg"></div>
  • 和 v-cloak 一样用于将数据填充到标签中，但 v-text 没有闪动问题
  • 如果数据中有html标签会将html标签一并输出
  • 注意： 此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

v-html

<div v-html="msg1"></div>
  • 用法和 v-text 相似，但是他可以将HTML片段填充到标签中
  • 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
  • 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出

v-pre

<div v-pre>{{msgstrht}}</div>
  • 显示原始信息跳过编译过程
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染

v-once

<div v-once>{{msg}}</div>
  • 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
  • 如果显示后的信息后续不需要再修改，使用 v-once 可提高性能

2. 双向数据绑定

  • 当数据发生变化的时候，视图也就发生变化
  • 当视图发生变化的时候，数据也会跟着同步变化

v-model

v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用

<input type="text" v-model='msg'>

mvvm

MVVM 把前端的视图层，分为了三部分 Model, View , VM ViewModel

  • m model
    数据层 Vue 中 数据层 都放在 data 里面
  • v view 视图
    Vue 中 view 即我们的 HTML 页面
  • vm（view-model）控制器将数据和视图层建立联系
    vm 即 Vue 的实例就是 vm

v-on

  • 用来绑定事件的
  • 形式如：v-on:click 缩写为 @click
  • 使用 data 中的数据一定要加 this 是 Vue 的实例对象
<body>
    <div class="box1">
        <div v-text="num"></div>
        <div>
            <button @click="num++">远近渔1</button>
            <button @click="a">远近渔2</button>
            <button @click="a()">远近渔3</button>
        </div>
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: '.box1',
            data: {
                num: 0
            },
            methods: {
                a: function () {
                // 这里的 this 是 Vue 的实例对象
                // 要使用 data 的数据一定要加 this
                    this.num++
                }
            }
        })
    </script>
</body>

v-on 事件函数中传入参数

  • 如果事件直接绑定函数名称，就是不加括号，那么 默认会传递事件对象 作为事件函数的 第一个参数
  • 如果事件绑定函数调用，就是加括号传参，那么 事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是 $event
<body>
    <div class="box1">
        <div v-text="num"></div>
        <div>
            <button @click="a1">远近渔1</button>
            <button @click="a2(123,321,$event)">远近渔2</button>
        </div>
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: '.box1',
            data: {
                num: 0
            },
            methods: {
                a1: function (e) {
                    console.log(e.target.innerHTML)
                    this.num++
                },
                a2: function (ppp, ooo, e) {
                    console.log(ppp, ooo)
                    console.log(e.target.innerHTML)
                    this.num++
                }
            }
        })
    </script>
</body>

事件修饰符

  • 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求
  • Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了 事件修饰符
  • 修饰符是由点开头的指令后缀来表示的
<!-- 阻止冒泡 -->
<button @click.stop="a2">远近渔1</button>
<!-- 阻止默认行为，阻止了跳转 -->
<a href="http://www.baidu.com" @click.prevent>百度</a>
<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a @click.stop.prevent></a>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<div @click.self></div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击


按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<input @keyup.13="a1">
<input @keyup.enter="a1">
<input type="text" @keyup.enter.space="a1" >

常用的按键修饰符
.enter		enter键
.tab		tab键
.delete		(捕获“删除”和“退格”按键) =>  删除键
.esc		取消键
.space		空格键
.up			上
.down		下
.left		左
.right		右

自定义按键修饰符别名

在Vue中可以通过 config.keyCodes 自定义按键修饰符别名
规则：修饰符名字是自定义的，但是对应的必须是 event.keycode 值

可以不用定义直接 @keyup.65='a1'

<input type="text" v-model='mima' @keyup.a='a1'>
<script>
	Vue.config.keyCodes.a = 65;
</script>

3. 属性绑定

v-bind

  • v-bind 指令被用来响应地更新 HTML 属性
  • v-bind:href 可以缩写为 :href;
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>

v-model 底层原理

<body>
    <div id="box">
        <input type="text" :value="msg" @input='a1'>
    </div>

    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                msg: '远近渔'
            },
            methods: {
                a1: function (e) {
                    this.msg = e.target.value
                }
            }
        })
    </script>
</body>

4. 样式绑定

对象绑定

<div :class="{aaa: ooo}"></div>
如果绑定的是一个对象
键 为对应的类名 值 为对应data中的数据

<body>
    <div id="box">
        <div :class="{aaa: ooo,bbb: ooo}"></div>
        <button @click='a1'>转换</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                ooo: true
            },
            methods: {
                a1: function () {
                    this.ooo = !this.ooo
                }
            }
        })
    </script>
</body>

数组绑定

<body>
    <div id="box">
        <div :class="[aaa1,bbb1]"></div>
        <button @click='a1'>转换</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        let x = true
        let vm = new Vue({
            el: '#box',
            data: {
                aaa1: 'aaa',
                bbb1: 'bbb'
            },
            methods: {
                a1: function () {
                    this.aaa1 = ''
                    this.bbb1 = ''
                }
            }
        })
    </script>
</body>

绑定对象和绑定数组

  • 绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据
  • 绑定数组的时候数组里面存的是 data 中的数据
  • 对象绑定可以和数组绑定结合使用
  • class 绑定的值可以简化操作
  • 默认的 class 会保留
<body>
    <div id="box">
        <div :class="[aaa1,bbb1,{ccc: ccc}]">远近渔</div>
        <div :class="abc">远近渔</div>
        <div :class="obj">远近渔</div>
        <button @click='a1'>转换</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        let x = true
        let vm = new Vue({
            el: '#box',
            data: {
                aaa1: 'aaa',
                bbb1: 'bbb',
                ccc: true,
                abc: ['aaa', 'bbb'],
                obj: {
                    aaa: true,
                    bbb: true
                }
            },
            methods: {
                a1: function () {
                    this.ccc = !this.ccc
                }
            }
        })
    </script>
</body>

绑定style

数组绑定的话相同的会被覆盖，没有的会增加

<div v-bind:style="styleObject">绑定样式对象</div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>
<!--数组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>

三、分支循环结构


1. 分支结构

  • v-if
  • v-else
  • v-else-if

这个是设置元样式是否 渲染

<div id="box">
    <div v-if='a>=90'>优</div>
    <div v-else-if='a<90&&a>=70'>良</div>
    <div v-else>差</div>
</div>
  • v-show

这个是设置元素样式是否 显示

<div v-show='flag'></div>
  • v-show本质就是标签display设置为none，控制隐藏
    v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点
  • v-if是动态的向DOM树内添加或者删除DOM元素
    v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

2. 循环结构

v-for

  • 不推荐同时使用 v-if 和 v-for
  • 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
遍历数组
<li v-for='(item,index) in a'>{{i}}</li>
		   每一项 索引

遍历对象
<li v-for='(value,key,index) in obj'>{{i}}</li>
			  值   键  索引

v-if 和 v-for 结合使用
<li v-if='v===12' v-for='(v,k,i) in obj'>{{i}}</li>
值为12才会渲染

<body>
    <div id="box">
        <div>列表</div>
        <ul>
            <li v-for='i in a'>{{i}}</li>
            <li v-for='(i,n) in a'>{{n}}---{{i}}</li>
以上是关于Vue 数据，属性，样式，绑定 + 分支循环的主要内容，如果未能解决你的问题，请参考以下文章
 

 Vue模板语法


 Vue全家桶之Vue基础


 vue在for循环中绑定html数据属性


 Vue知识点全集


 （Vue -03）Vue绑定样式 + 计算属性 + 侦听器+ 过滤器


 Vue 目录结构分析 数据绑定 绑定属性 循环渲染数据   数据渲染