web前端之vue(实例成员、指令操作)

最新推荐文章于 2024-09-19 16:46:27 发布

原创最新推荐文章于 2024-09-19 16:46:27 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

前端vue框架专栏收录该内容

4 篇文章

订阅专栏

本文深入解析Vue.js框架的基本概念，包括实例化、数据绑定、事件处理、指令使用及其实战案例，如评论功能实现等，适合前端开发者快速上手。

三、vue完成简单的事件（v-on:click="clickAction"）

四、vue操作简单的样式

五、vue指令

5.1、文本指令（v-text，v-html，v-once）

5.2、事件指令（v-on:事件="名字" | @事件="名字"）

5.3、属性指令（v-bind）

5.4、表单指令（v-model）

5.5、条件指令（v-if，v-else-if，v-else，v-show）

一、vue介绍

1、什么是vue？

vue是一个可以独立完成前后端分离式web项目的JavaScript框架；
它是一套用于构建用户界面的渐进式框架，一个页面小到一个变量，大到整个页面，均可以由vue控制，vue也可以控制整个项目；
使用Vue框架，可以完全在浏览器端渲染页面，服务端只提供数据
vue是一个单页面应用，基于组件开发，以此实现控制整个项目

2、vue的优点

单页面：高效
虚拟DOM：页面缓存
数据的双向绑定：数据具有监听机制
数据驱动：从数据出发，不是从DOM出发

3、vue的使用

开发版本：vue.js

生产版本：vue.min.js

1、下载开发版本到本地：https://vuejs.org/js/vue.js

2、在要使用vue的html页面通过script导入：<script src="js/vue.js"></script>

3、在html中书写挂载点的页面结构，用id表示

4、在自定义的script标签中实例化vue对象，传入一个大字典

5、在字典中通过el与挂载点页面结构绑定，data为其提供数据

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

npm install vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue初识</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <!--{{ vue变量 }}：插值表达式-->
    <h1>{{ h1_msg }}</h1>
    <h2>{{ h2_msg }}</h2>
</div>
<script>
    new Vue({
        el: '#app', //挂载点
        data: {  //为挂载点的页面结构提供数据
            h1_msg:'h1的内容',
            h2_msg:'h2的内容'
        }
    })
</script>

</body>
</html>

二、vue实例

1、el实例

new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

2、data数据

<div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
    	el: '#app',
    	data: {
    		msg: '数据',
    	}
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->

3、methods方法

methods用来装载可以调用的函数，你可以直接通过 Vue 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

<style>
    .box { background-color: orange }
</style>
<div id='app'>
    <p class="box" v-on:click="pClick">测试</p>
	<p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
    var app = new Vue({
    	el: '#app',
    	methods: {
            pClick () {
                // 点击测试
            },
            pOver () {
                // 悬浮测试
            }
    	}
    })
</script>
<!-- 了解v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->

4、实例成员之computed

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,这时候应该使用计算属性

1、在computed中定义的变量的值等于绑定的函数的返回值
2、绑定的函数中出现的所有vue变量都会被监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>
            姓：<input type="text" v-model="first_name">
            名：<input type="text" v-model="last_name">
        </p>
        <p>
            姓名：<b>{{ full_name }}</b>
        </p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                first_name:'',
                last_name:'',
                // full_name: 'None'  //不能在data定义了还去computed定义
            },
            computed:{
                //1、在computed中定义的变量的值等于绑定的函数的返回值
                //2、绑定的函数中出现的所有vue变量都会被监听
                full_name:function () {
                    let a = this.first_name;
                    this.last_name
                    console.log('被调用了');
                    
                    return this.first_name + this.last_name
                }
        }
        })
    </script>
</body>
</html>

5、实例成员之watch监听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例成员</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>
        姓名：<input type="text" v-model="full_name">
    </p>
    <p>
        姓：<b>{{ first_name }}</b>
        名：<b>{{ last_name }}</b>
    </p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            full_name:'',  //可以在data中定义，又不与watch冲突
            first_name:'',
            last_name:''
        },
        watch:{
            //后方绑定的函数就是监听前方的变量，变量值改变，函数被调用
            full_name:function () {
                let res = this.full_name.split(''); //前端的split方法按照空字符串切分就得到单个的字符，python不行
                this.first_name = res[0];
                this.last_name = res[1];
            }
        }
    })
</script>
</body>
</html>

三、vue完成简单的事件（v-on:click="clickAction"）

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

完整语法

<a v-on:click="doSomething">...</a>

缩写

<a @click="doSomething">...</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-on:click="clickAction" >h1的内容是{{ msg }}</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data: {
            msg:'vue渲染的内容'
        },
        methods: { //为挂载点指定事件
            clickAction: function () {
                console.log('再点一下试试！！！')
            }
        }
    })
</script>
</body>
</html>

四、vue操作简单的样式

完整语法

<a v-bind:href="url">...</a>

缩写

<a :href="url">...</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p v-on:click="btnClick" v-bind:style="v_style">点击p文字颜色变为绿色</p>
    <div v-on:click="btnClick" v-bind:style="v_style">点击div文字颜色变为绿色</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            v_style:{
                color: 'black'
            }
        },
        methods:{
            btnClick:function () {
                this.v_style.color = 'green'
            }
        }
    })
</script>
</body>
</html>

五、vue指令

5.1、文本指令（v-text，v-html，v-once）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本指令</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!--插值表达式-->
    <p>{{ msg1 }}</p>
    <p v-text="msg2"></p>
    <p v-html="msg3"></p>
    <p v-once="msg3" v-on:mouseover="action">{{ msg3 }}</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            msg1: '**msg1**',
            msg2: '<b>**msg2**</b>',
            msg3: '<b>**msg3**</b>'
        },
        methods:{
            action:function () {
                //鼠标悬浮时变斜体
                this.msg3 = '<i>**new msg3**</i>'
            }
        }
    })
</script>
</body>
</html>

5.2、事件指令（v-on:事件="名字" | @事件="名字"）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!-- v-on:事件名="函数名"  可以简写为 :
    @事件名="函数名"  （v-on: => @）-->
    <p v-on:click="action1">{{ msgs[0] }}</p>
    <p @click="action2">{{ msgs[1] }}</p>

    <!--事件的传参-->
    <ul>
        <li @click="liAction(100)">列表项1</li>
        <li @click="liAction(200)">列表项2</li>
        <li @click="liAction(300)">列表项3</li>
    </ul>

    <!--鼠标事件的对象：直接写函数名，默认将鼠标事件的对象传入-->
    <div @click="func1">func1</div>

    <!--鼠标事件的对象：一旦添加()，就必须手动传参，$event就代表鼠标事件对象-->
    <div @click="func2($event, 'abc')">func2</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            //按索引赋值
            msgs:['111111','222222']
        },
        methods:{
            action1:function () {
                alert(this.msgs[0])
            },
            action2:function () {
                alert(this.msgs[1])
            },
            liAction:function (num, msg) {
                console.log(num, msg)
            },
            func1:function (ev) {
                console.log(ev)
            },
            func2:function (ev, msg) {
                console.log(ev);
                console.log(msg)
            }
        }
    })
</script>
</body>
</html>

5.3、属性指令（v-bind）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .rDiv {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .gDiv {
            width: 200px;
            height: 50px;
            background-color: green;
        }
        .br{
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <!--属性指令：用vue绑定属性，将属性内容交给vue处理-->
    <!--语法：v-bind:属性名="变量"  （v-bind:可以简写为:）-->
    <p class="" style="" v-bind:owen="oo" :jason="jj"></p>

    <!--class属性-->
    <p :class="c1" @click="action1"></p>
    <!--多类名-->
    <p :class="[c1, c2]"></p>
    <!--'br'固定写死的数据，不再是变量-->
    <p :class="[c1, 'br']"></p>

    <!--style属性-->
    <!-- 一个变量：该变量值为{},{}内部完成一个个属性的设置-->
    <p class="gDiv" :style="s1">12345</p>
    <!-- 一个{}：{}内一个个属性有一个个变量单独控制-->
    <p class="gDiv" :style="{fontSize:fs,color:c}">67890</p>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            oo:'Owen',
            jj:'Jason',
            c1:'rDiv',
            c2:'br',
            //明显style的这种方式更方便
            s1:{
                fontSize: '30px',
                color:'pink',
            },
            fs:'20px',
            c:'orange'
        },
        methods:{
            action1:function () {
                if (this.c1 === 'rDiv') {
                    this.c1 = 'gDiv'
                }else {
                    this.c1 = 'rDiv'
                }
            }
        }
    })
</script>
</body>
</html>

点击方框后：

5.4、表单指令（v-model）

表单指令：v-model="变量"
单选框 v-model绑定的变量是单选框中某一个input的value
复选框 v-model绑定的变量是一个列表，列表存存放0到任一个复选框的value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单指令</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
    <!--表单指令：v-model="变量"-->
    <form action="">
        <p>
            <input type="text" v-model="val" name="user">
        </p>
        <p>
            <input type="text" v-model="val">
        </p>

        <!--单选框：v-model绑定的变量是单选框中某一个input的value-->
        <p>
            男：<input v-model="r_val" value="male" type="radio" name="sex">
            女：<input v-model="r_val" value="female" type="radio" name="sex">
        </p>

        <!--复选框：v-model绑定的变量是一个列表，列表存放0到任一个复选框的value-->
        <p>
            唱歌：<input type="checkbox" v-model="c_val" value="sing" name="hobby">
            跳舞：<input type="checkbox" v-model="c_val" value="dance" name="hobby">
            王者：<input type="checkbox" v-model="c_val" value="king" name="hobby">
        </p>
        <button type="submit">提交</button>
    </form>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            val:'',
            r_val:'female',
            c_val:['sing',]
        }
    })
</script>
</body>
</html>

5.5、条件指令（v-if，v-else-if，v-else，v-show）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件指令</title>
    <script src="vue.js"></script>
    <style>
        .div {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <!--条件指令 v-show | v-if -->
    <!-- v-show：消失是以display:none渲染 -->
    <div class="div" v-show="s1"></div>
    <div class="div" v-show="s1"></div>

    <!-- v-if：消失时不会被渲染，所以建议建立缓存，用key属性 -->
    <div class="div" v-if="s2" key="div1"></div>
    <div class="div" v-if="s2" key="div2"></div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            s1:true,
            s2:false  //false时不显示，不写默认就是false
        }
    })
</script>
</body>
</html>

<meta charset="utf-8">
<style>
    ul li {
        border: 1px solid black;
        width: 60px;
        float: left;
    }
    ul {
        list-style: none;
    }
    ul:after {
        content: "";
        display: block;
        clear: both;
    }
    .wrap {
        width: 500px;
        height: 200px;
    }
    .red { background-color: red; }
    .blue { background-color: blue; }
    .green { background-color: green; }
</style>
<div id="app">
    <!-- v-if v-else-if v-else 案例 -->
    <ul>
        <li @click="changeWrap(0)">red</li>
        <li @click="changeWrap(1)">green</li>
        <li @click="changeWrap(2)">blue</li>
    </ul>
    <!-- red页面逻辑结构 -->
    <div class="wrap red" v-if="tag == 0" key="aaa"></div>
    <!-- green页面逻辑结构 -->
    <div class="wrap green" v-else-if="tag == 1" key="bbb"></div>
    <!-- blue页面逻辑结构 -->
    <div class="wrap blue" v-else key="ccc"></div>
    <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
    <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			tag: 0,
		},
		methods: {
			changeWrap (num) {
				this.tag = num;
			}
		}
	})
</script>

鼠标点击哪个就显示哪个颜色，可以实现单一页面多个展示。

差值表达式可以直接加减：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li @click="action('a')">a</li>
        <li @click="action('b')">b</li>
        <li @click="action('c')">c</li>
    </ul>
    <ul>
        <li v-show="flag == 'a'">aaa</li>
        <li v-show="flag == 'b'">bbb</li>
        <li v-show="flag == 'c'">ccc</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            flag:'a'
        },
        methods:{
            action:function (s) {
                this.flag = s
            }
        }
    })
</script>
</body>
</html>

分支判断：

5.6、循环指令（v-for）

索引取值，但是比较麻烦

for循环遍历列表：

for循环遍历字典：

5.7、评论案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论案例</title>
    <script src="js/vue.js"></script>
    <style>
        span{
            margin-left: 100px;
            cursor: pointer; /*鼠标悬浮时变成手的形状*/
            color: green; /*正常时显示绿色*/
        }
        span:hover{
            color: red; /*悬浮时显示红色*/
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <input type="text" v-model="val">
        <button @click="add">评论</button>
    </p>
    <ul>
        <li v-for="(info,i) in infos">
            {{ info }}
            <span @click="del(i)">x</span>  <!--模拟删除-->
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            infos:[],
            val:''
        },
        methods:{
            del:function (i) {
                //splice(a,b,c):a是从哪开始删，b是删多少个，c是删完添加的元素
                this.infos.splice(i,1)
            },
            add:function () {
                let val = this.val; //获取到评论内容
                if(val){
                    this.infos.splice(0,0,val); //在最开头添加
                    this.val = ''  //将评论框的内容置空
                }
            }
        }
    })
</script>
</body>
</html>

最早的评论内容展示在最下面；
点击评论按钮后，框内清空
点击后面的x，会删除对应内容

5.8、斗篷指令（v-cloak）

避免页面闪烁

<style type="text/css">
    [v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
    {{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			msg: "message"
		}
	})
</script>
<!-- 避免页面闪烁-->

5.9、解决插值表达式符号冲突（分隔符）

有时既有后台传来需要用模板语法渲染，又有差值表达式，到时候就区分不开了，这时候就需要给差值表达式指定分隔符
delimiters:['${', '}']

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{ msg }}
    {{{ msg }}
    ${ msg }
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'12345'
        },
        delimiters:['${', '}']
    })
</script>
</body>
</html>

因为更改了分隔符，所以只有一个成功渲染到页面

六、总结：

指令：
文本：{{}} v-text v-html v-once
属性：v-bind:href | :href :class='c1' :class='[c1, c2]' :style='s1'
（s1={color: "red"}）
事件：v-on:click | @click @click="action" @click="action(msg)" @click="action($event)"
表单：v-model
条件：v-show v-if v-else-if v-else
循环：v-for="(value, index) in list" v-for="(value, key, index) in dict"

成员：
el：挂载点
data：数据
methods：方法
computed：计算 -- 监听方法内所有的变量，返回值给绑定的变量，该变量无需在data中声明
watch：监听 -- 监听绑定的变量，绑定的变量必须在data中声明