Vue基础

Forever Nore

已于 2022-09-20 22:52:29 修改

阅读量441

点赞数

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

于 2022-09-19 22:01:16 首次发布

本文链接：https://blog.csdn.net/qq_30659573/article/details/126938608

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

Vue入门
- 引入vue
- Vue第一个入门应用
v-text和v-html
v-on
- 绑定事件基本语法
- Vue事件参数传递
v-show、 v-bind、v-for
v-model
事件修饰符
按键修饰符
- enter 回车键
- delete事件

课程资料
链接：https://pan.baidu.com/s/10zhofYzlIY9buSxqiVRILQ
提取码：yyds

Vue入门

引入vue

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

//生产版本:
	<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue第一个入门应用

<body>

<div id="app">
    {{msg}}<br>
    {{username}} <br>
    {{pwd}}
</div>
<script>
	//定义Vue实例
    var app = new Vue({
        el: "#app", //给Vue实例一个范围
        data: {
            msg: "今天天气还不错",
            username: "dc",
            pwd: "123456"
        }


    })
    
</script>

</body>

通过·{{ }}·来获取定义的变量

在这里插入图片描述

<body>

<div id="app">
    <h3>{{msg}}</h3>
    <h3>
        名称：{{user.name}}<br>
        年龄：{{user.age}}<br>
        第一个城市：{{lists[0]}}<br>
        第二个城市：{{lists[1]}}<br>
        全部城市:{{lists}}<br>
        <br>
        小黑年龄：{{users[0].age}}<br>
        小黑名字：{{users[0].name}}<br>
    </h3>


</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            user: {
                name: "dc",
                age: "20"
            },
            lists: ["上海", "合肥"],
            users: [
                {
                    name: "黑娃",
                    age: 3

                }
            ]
        }


    })

</script>

</body>

在这里插入图片描述

data为数据，可以是数组、对象，{{ }}可书写表达式、运算符

v-text和v-html

通过 v-text属性来获取data属性中的变量，也可以在里面使用表达式、运算符等

<body>

<div id="app">
    <span>{{msg}}</span>
    <br>

    <span v-text="msg+'12'"></span>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "今天好！"
        }
    })

</script>

</body>

在这里插入图片描述

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部

<body>

<div id="app">
    <!--    不会解析-->
    <span>{{msg}}</span>
    <br>
    <!--    不会解析-->
    <span v-text="msg"></span>
    <br>
    <!--    会解析html标签!-->
    <span v-html="msg"></span>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "<h1>今天是个好日子</h1>"
        }
    })

</script>

</body>

在这里插入图片描述

v-on

绑定事件基本语法

<body>

<div id="app">
    <h2>{{msg}}</h2>
    <h2 v-text="msg"></h2>
    <h2>年龄：{{age}}</h2>
    <hr color="red">
    <input type="button" value="点我改变年龄" v-on:click="changeAge">

</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "小飞棍来了",
            age:20
        },
        methods:{
            changeAge(){
                alert("点击就加一岁");
                // 获取Vue实例中data的数据,在事件函数中this指的就是Vue实例
                this.age++;
            }
        }
    })

</script>

</body>

v-on也可以简写

<!--    v-on:click='changeAge'也可以简写为@click='changeAge'-->
    <input type="button" value="点我改变年龄" @click="changeAge">

总结:使用@click代替v-on:click

Vue事件参数传递

<body>

<div id="app">
   <span>{{count}}</span>
    <input type="button" value="改变count为指定的值" @click="changeCount(20,'dc')">


</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            count:"1"
        },
        methods:{
            //定义函数与参数传递
           changeCount(count,name){
               this.count=count;
               alert(name);
           }
        }
    })

</script>

</body>

在这里插入图片描述

v-show、 v-bind、v-for

v-show:用来控制页面中某个标签元素是否展示底层使用控制是 display 属性

<body>

<div id="app">
    <h2 v-show="true">小飞棍来喽</h2>
    <!--    v-show="" 里面的运算结果为 true/false-->
    <h2 v-show="show"> 美好的东西!!!</h2>
    <!--    字符串不为空就是true-->
    <input type="button" value="点我切换" @click="show=!show">
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            show: false

        },
        methods: {}
    })

</script>

</body>

在这里插入图片描述

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性,只能有Vue单向绑定到标签属性


<style>
    .cs{
        border: 2px red solid;
    }
</style>
<body>

<div id="app">
<!--    将 Vue实例的img数据 绑定到img标签的src属性上,这里面可以是表达式、运算符-->
    <img :src="img" alt="图片" :class="showCss?'cs':''">
    <input type="button"  value="展示样式" @click="showCss=true">
    <input type="button"  value="展示图片" @click="showPho">
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            showCss: false,
            img:""
        },
        methods: {
            showPho(){
                this.img="http://n.sinaimg.cn/sinakd20111/588/w641h747/20220919/86d9-a7042f01399280a106e69a0c0dfc9d29.jpg"
            }
        }
    })

</script>

在这里插入图片描述

v-for: 作用就是用来对对象进行【遍历】的(数组也是对象的一种)

<body>

<div id="app">
    <!--    遍历对象-->
    <span v-for="(value,key,index) in user">
    {{index}}--{{key}}--{{value}}
    <br>
    </span>
    <!--    遍历数组-->
    <span v-for="(value,index) in arr">
        {{index}}--{{value}}
        <br>
    </span>
    <span v-for="(user,index) in users">
        {{index}}--{{user.id}}-{{user.name}}--{{user.age}}
        <br>
    </span>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            user: {name: "dc", age: 20},
            arr: ["上海", "杭州", "合肥"],
            users: [
                {id: "1", name: "小黑", age: 16},
                {id: "2", name: "小白", age: 16}
            ]
        },
        methods: {}
    })

</script>

</body>

在这里插入图片描述

v-model

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

<body>

<div id="app">
<!--    这个v-model与 data中的msg相关-->
    <input type="text" v-model="msg">
    <br>
    <span>{{msg}}</span>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
           msg:""
        },
        methods: {}
    })

</script>

</body>

在这里插入图片描述

注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源

事件修饰符

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

stop事件修饰符

用来阻止事件冒泡

 <div @click="alert1">我是外层
     <div @click.stop="alert2">我是内层 </div>
 </div>

总结:点击内层的时候不会触发外层的事件

prevent 事件修饰符

用来阻止标签的默认行为

<div id="app">
    <a href="http://www.baidu.com" @click.prevent="aClick">dc</a>

</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
           msg:""
        },
        methods: {
            aClick(){
                alert(1);
            }
        }
    })

</script>

点击上面的a标签后会弹出a被点击了，然后因为默认行为，还跳转到百度；

通过.prevent，来阻止默认跳转行为

self 事件修饰符

只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡

  <!--只触发标签自身的事件-->
    <div class="aa" @click.self="alert1">
        <!--事件后面.stop，来阻止事件冒泡-->
        <input type="button" value="按钮1" @click="alert2">
    </div>

once 事件修饰符

    <!--
    .prevent : 用来 阻止事件的默认行为
    .once    : 用来 只执行一次特定的事件
	-->
    <a href="http://www.baidu.com/" @click.prevent.once="aClick">achang</a>

按键修饰符

作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

# 按键修饰符
	.enter
	.tab
	.delete (捕获“删除”和“退格”键)
	.esc
	.space
	.up
	.down
	.left
	.right

enter 回车键

用来在触发回车按键之后触发的事件

 <input type="text" v-model="msg" @keyup.enter="keyups">

delete事件

用来在触发删除或退格按键之后触发的事件

<input type="text" v-model="msg" @keyup.delete="keyups">

Forever Nore

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录