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

最新推荐文章于 2021-06-05 20:54:26 发布

鲸渔要加油

最新推荐文章于 2021-06-05 20:54:26 发布

阅读量149

点赞数

分类专栏：基础学习文章标签： vue js javascript vue.js es6

本文链接：https://blog.csdn.net/qq_53283188/article/details/117186550

版权

基础学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

在学习 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>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                a: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            },
            methods: {

            }
        })
    </script>
</body>

<body>
    <div id="box">
        <div>列表</div>
        <ul>
            <li v-for='i in a'>
                <span>{{i.e}}</span>
                <span>{{i.c}}</span>
            </li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                a: [{
                    e: 'one',
                    c: 1
                }, {
                    e: 'two',
                    c: 2
                }, {
                    e: 'three',
                    c: 3
                }]
            },
            methods: {

            }
        })
    </script>
</body>

key 的作用

key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM，提高了性能

<ul>
  <li :key="item.id" v-for="item in items">...</li>
</ul>

鲸渔要加油

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 数据，属性，样式，绑定 + 分支循环

学习目标◆ 能够说出 Vue 的基本用法◆ 能够说出 Vue 的模板语法◆ 能够说出 Vue 的常用属性◆ 能够基于 Vue 实现需求效果文章目录学习目标一、Vue二、指令v-cloak 解决闪烁1. 数据绑定指令v-textv-htmlv-prev-once2. 双向数据绑定v-modelmvvmv-onv-on 事件函数中传入参数事件修饰符一、VueVue 是一套用于构建用户界面的渐进式框架声明式渲染 —— 组件系统 —— 客户端系统 —— 集中式状态管理 —— 项目构建官网
复制链接

扫一扫