Vue基础

和蔼的阿木木o

已于 2022-09-21 09:14:37 修改

阅读量1.1k

点赞数 2

分类专栏： vue js html 文章标签： vue.js 前端 javascript

于 2022-09-19 16:39:53 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/126929278

版权

js 同时被 3 个专栏收录

52 篇文章 1 订阅

订阅专栏

html

28 篇文章 0 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

vue介绍

vue引入

v-html指令

v-for

属性绑定

v-bind 缩写

v-on 缩写

案例-简易选项卡

el与data的两种写法

Vue事件响应

事件的参数

事件的特殊参数

事件修饰符

vue收集表单数据

vue单行和多个文本表单

vue单选框

vue复选框

vue表单修饰符

vue介绍

Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

vue的声明渲染、创建实例

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <input type="text" v-model="msg">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var vm= new Vue({
        el: "#app",   //指定模板返回（element）
        data: {
            msg: "你好Vue！"
        },   //指定数据
    })
        //el与data都是固定写法
</script>

vm通过 el与id为 "app"的页面元素实现关联，通过 data属性来与数据进行关联，这样我们只需要将数据拿到交给vm即可，整个数据的显示过程都由vm来控制，免去了我们认为的操作.使得我们可以真正的将注意力集中在View上.

{{message}}是vue的插值表达式，它将vm的data中 key为 message的数据的value显示在页面上.
{ {}}可以支持js语法，可以支持函数调用，但是必须是有返回结果的，但不能声明变量( let a = 2)

vue的文本渲染指令

指令是带有 v- 前缀的特殊 attribute。指令的属性值预期是单个 JavaScript 表达式

{{ }} 语法

<div> {{msg}}</div>

new Vue({
el:"#app",//指定vue的模板css选择器
data:{msg:"hello Vue!"}// 指定data数据
})

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{2+3}}</h1>
        <h1>{{msg.split("").reverse().join("")}}</h1>
        <h1>{{2+3>8?"大于":"小于"}}</h1>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",   //指定模板返回（element）
        data: {
            msg: "花儿"
        },   //指定数据
    })
        //{{}}  文本渲染指令
        //01 渲染vue的数据
        //02  数学运算
        //03  执行js普通方法split分割、reverse翻转数组、join连接数组为字符串
        //04   三元运算符 （不能使用if for等多行命令）
</script>

文本渲染 v-text指令

<div v-text="msg"> {{msg}}</div>

相当于js中的innerText

<body>
    <div id="app">
        <h1 v-text="msg"></h1>
        <h1 v-text="2+3"></h1>
        <h1 v-text="2+3>8?'大于':'小于'"></h1>
        <h1 v-text="msg.length"></h1>
        <h1 v-text="'我爱中国,'+msg"></h1>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //指定模板返回（element）
        data: {
            msg: "你笑起来真好看"
        },   //指定数据
    })
    //vm是new Vue创建的一个实例
</script>

v-html指令

为了输出真正的 HTML，你需要使用v-html

相当于js中的innerHTML

<body>
    <div id="app">
        <h1 v-html="msg"></h1>
        <p v-html="msg"></p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //指定模板返回（element）
        data: {
            msg: "你笑起来<strong>真好看</strong>"
        },   //指定数据
    })
    //vm是new Vue创建的一个实例
    // v-html会解析html文本
</script>

注：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

vue的条件渲染指令

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。

<body>
    <div id="app">
        <h1>武林大会</h1>
        <p v-if="score>90">好徒儿，师妹.....拜托</p>
        <p v-else>面壁思过吧！</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //指定模板返回（element）
        data: {
            score: 65,
        },   //指定数据
    })

</script>

v-else-if 多重条件渲染

<body>
		<div id="app">
			<p v-if="score>=90">优秀</p>
			<p v-else-if="score>=80">良好</p>
			<p v-else-if="score>=70">中等</p>
			<p v-else-if="score>=60">及格</p>
			<p v-else>不及格</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						score:99
					}
				}
			}).mount("#app");
		</script>
</body>

<body>
    <div id="app">
        <h1>武林大会{{score}}</h1>
        <h1 v-if="score>=90">独孤九剑</h1>
        <h1 v-if="score>=80">葵花宝典</h1>
        <h1 v-if="score>=70">三分归元气</h1>
        <h1 v-if="score>=60">小师妹嫁给你</h1>
        <h1 v-else>逐出师门</h1>
        <input type="text" v-model="score">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //指定模板返回（element）
        data: {
            score: 65,
        },   //指定数据
    })
</script>

条件渲染 v-show

另一个用于根据条件展示元素的选项是 v-show 指令

<div v-show="canShow">我喜欢你</div>

<body>
    <div id="app">
        <h1>v-if与v-show</h1>
        <p v-if="flag">我是if</p>
        <p v-show="flag">我是show</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //指定模板返回（element）
        data: {
            flag: false,
        },   //指定数据
    })
    //v-if与v-show的区别
    // 1.都是用来控制显示与隐藏
    //2.v-if是通过dom操作实现隐藏，v-show通过css方式隐藏
    //3.频繁切换用v-show反之v-if
</script>

v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<body>
    <div id="app">
        <h1>v-for</h1>
        <p v-for="item in list">{{item}}</p>
        <ul>
            <li v-for="(item,index) in list">{{index+1}}-{{item}}</li>
        </ul>
        <p v-for="item in list" v-key="item">{{item}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //指定模板返回（element）
        data: {
            list: ["Vue", "React", "Angular"]
        },   //指定数据
    })

    //v-key指令 vue在渲染列表的时候更加优化，v-key的值必须是唯一的
    //不建议用随机或者index
     item in list
    item  遍历的元素（自定义的名称）
    index 遍历的下标（键名）
    list  被遍历的数据
</script>

v-for的特殊用法

<body>
    <div id="app">
        <h1>v-for</h1>
        <!-- 遍历数字 -->
        <p v-for="item in 10">{{item}}</p>
        <!-- 遍历对象 -->
        <p v-for="item in obj">{{item}}</p>
        <h3 v-for="(item,key) in obj" v-key="key">{{key}}-{{item}}</h3>
        <!-- 遍历字符串 -->
        <h1 v-for="item in str">{{item}}</h1>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //指定模板返回（element）
        data: {
            str: "学好前端,月入w",
            obj: {
                tel: 11111111111,
                qq: 222222222,
                wx: 123123123,
                name: "zhang",
            }
        },   //指定数据
    })

</script>

属性绑定

<body>
    <div id="app">
        <h1>属性绑定</h1>
        <h1 v-bind:title="title" v-bind:id="s2">我想有个title</h1>
        <h1 :title="title" :id="s2" :key="'A'">我们写个简写</h1>
        <input type="text" v-model="title">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            title: "我爱我的祖国",
            s2: "myid"
        }
    })
</script>

单击事件绑定

<body>
    <div id="app">
        <h1>事件绑定</h1>
        <button v-on:click="num++">{{num}}</button>
        <button @click="sum+=2">{{sum}}</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            num: 1,
            sum: 1,
        }
    })
</script>

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

案例-简易选项卡

<style>
    .block {
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }

    .active {
        color: red;
    }
</style>

<body>
    <div id="app">
        <h1>选项卡</h1>
        <!-- @click 是v-on:click的简写 -->
        <!-- :click是v-bind:class 的简写 -->
        <button @click="id=0" :class="id===0?'active':''">Vue</button>
        <button @click="id=1" :class="id===1?'active':''">React</button>
        <button @click="id=2" :class="id===2?'active':''">Angular</button>
        <div class="block" v-show="id===0">
            Vue的文章列表
        </div>
        <div class="block" v-show="id===1">
            React的文章列表
        </div>
        <div class="block" v-show="id===2">
            Angular的文章列表
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            id: 0,

        }
    })
</script>

el与data的两种写法

Vue事件响应

<body>
    <div id="app">
        <button @click="num++">{{num}}</button>
        <button @click="saynum">{{sum}}</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                num: 1
            }
        },
        methods: {
            saynum() {
                this.num++;
                alert(this.num)
            }
        }
    })
    //this指代new Vue创建的实例
    //vue data采用函数返回的形式
    //vue实例直接数据隔离相互不影响
</script>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    #box{
        width: 300px;
        height: 300px;
        border:1px solid blue;
        margin: 10px;
    }
    .blue{
        background-color:red;
        box-shadow: 5px 5px 5px red;
    }
</style>
</head>
<body>
<div id="app">
    <button @click="seen=true">显示</button>
    <button @click="hide()">隐藏</button>
    <button  v-on:click="seen=!seen"> 切换</button>
    <button @click="isBlue=true">增加类</button>
    <button @click="delClass()">删除类</button>
    <button v-on:click="isBlue=!isBlue">切换类</button>
    <div id="box" :class="{blue:isBlue}" v-if="seen"></div>//isBlue为真这个bule类起作用
</div>
<script src="./vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            seen:true,
            isBlue:true
        },
        methods:{
            hide(){
                this.seen=false;
            },
            delClass:function(){
                this.isBlue=false;
            }
        }
    });
</script>
</body>
</html>

事件的参数

<body>
    <div id="app">
        <button @click="num++">{{num}}</button>
        <button @click="saynum(1)">{{num}}</button>
        <button @click="saynum(2)">点击+2</button>
        <!-- （5）实际参数：实参 -->
        <button @click="saynum(5)">点击+5</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                num: 1
            }
        },
        methods: {
            //（n）形式上的参数：形参
            saynum(n) {
                this.num++;
                alert(this.num)
            }
        }
    })
</script>

事件的特殊参数

<body>
    <div id="app">
        <!-- 默认不写括号也会传入事件$event -->
        <!-- 写括号 $event -->
        <h1 @click="saynum($event,2)">事件的特殊参数$event</h1>
        <button @click="saynum($event,3)">{{num}}</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                num: 1,
            }
        },
        methods: {
            //形参
            saynum(e, n) {
                //e代表事件对象
                //e.target被点击的元素，innerText文本内容
                alert(e.target.innerText)
                this.num += n;
            }
        }
    })
</script>

事件修饰符

.stop 阻止事件冒泡

.prevent 阻止默认行为

.once 只执行一次

.capture   捕获
.self       自身元素触发
.passive   滚动立即触发，不等待滚动完成（移动端性能提升）

<body>
    <div id="app">
        <h1>表白</h1>
        <div class="parent" @click="dohd">
            <!-- .once 只响应一次  .stop阻止事件冒泡 修饰符可以多个 -->
            <!-- v-on事件绑定指令 :click事件参数 .once修饰符 -->
            <button v-on:click.once.stop="say">表白</button>
            <!-- .prevent修饰符阻止默认事件 -->
            <a href="http://www.baidu.com" @click.prevent="doit">百度</a>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        methods: {
            dohd() {
                alert("又要生活费")
            },
            doit() {
                alert("有问题找百度")
            },
            say() {
                alert("表白成功")
            },
        }
    })
</script>

vue收集表单数据

vue单行和多个文本表单

<body>
    <div id="app">
        <h1>表单绑定</h1>
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
        <textarea name="" id="" cols="" rows="" v-model="text"></textarea>
        <p style="white-space: pre-line;">{{text}}</p>
        <p>{{str}}</p>
        <input type="text" v-model="str">
        <br>
        <input type="text" :value="str" @input="str=$event.target.value">
        <!-- @input="str=$event.target.value" = v-model="str" -->
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                msg: "",
                text: "",
                str: "you dida dida me",
            }

        }
    })

</script>

vue单选框

<body>
    <div id="app">
        <h1>radio-{{sex}}</h1>
        性别：
        <input type="radio" name="sex" v-model="sex" value="1">男
        <input type="radio" name="sex" v-model="sex" value="2">女
        <input type="radio" name="sex" v-model="sex" value="3">保密 <br>
        <h1>select-{{sel}}</h1>
        <p>小张的文凭</p>
        <select name="" id="" v-model="sel">
            <option value="小学">小学</option>
            <option value="初中">初中</option>
            <option value="高中">高中</option>
            <option value="大学">大学</option>
        </select>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                sex: 1,
                sel: "初中"
            }

        }
    })

</script>

vue复选框

<body>
    <div id="app">
        <h1>单个checkbox</h1>
        <input type="checkbox" v-model="select">同意我们的条款{{select}} <br>
        <button :disabled="!select">注册</button>
        <h1>多个checkbox</h1>
        <p>{{fav}}</p>
        <input type="checkbox" value="唱歌" name="fav" v-model="fav">唱歌 <br>
        <input type="checkbox" value="跳舞" name="fav" v-model="fav">跳舞 <br>
        <input type="checkbox" value="看书" name="fav" v-model="fav">看书 <br>
        <input type="checkbox" value="游泳" name="fav" v-model="fav">游泳 <br>


    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                select: true,
                fav: []
            }

        }
    })

</script>

vue表单修饰符

.lazy
你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

<input v-model.lazy="msg" />

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="text" />

.trim 过滤首尾空白
<input v-model.trim="msg" />

<body>
    <div id="app">
        <h1>表单修饰符</h1>
        <input type="text" v-model.number="num">
        <p>{{10+num}}</p>
        <input type="text" v-model.lazy="“str">
        <p>{{str}}}</p>
    </div>
</body>
<script src="./js/items.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        methods: {
            num: "1",
            src: "国企快乐",
        }
    })
    //.number 字符串转数字
    // .lazy 更新视图触发事件有input变为change事件

</script>