vue快速入门

格里菲斯~

已于 2024-05-19 10:44:10 修改

阅读量461

点赞数 15

文章标签： vue.js 前端 javascript

于 2024-01-17 16:13:59 首次发布

本文链接：https://blog.csdn.net/qq_62368250/article/details/135653488

版权

本文介绍了Vue前端框架的基础概念，包括MVVM模式、双向数据绑定的实现(v-model)，以及常用的指令如v-bind、v-model、v-on和v-for。此外，还简要提到了Vue的生命周期管理。

摘要由CSDN通过智能技术生成

一.Vue概述

Vue 是一套前端框架，免除原生 JavaScript 中的 DOM 操作，简化书写
基于 MVVM(Model-View-ViewModel) 思想，实现数据的双向绑定，将编程的关注点放在数据上
官网： https://cn.vuejs.org

在双向绑定中，当用户在视图中进行操作，比如输入表单字段的值或者选择选项，这些操作会直接修改对应的模型数据。然后，当模型数据改变时，会自动反映到绑定的视图上，从而更新相关的DOM元素，无需手动操作（手动提交）。

也就是没有双向绑定也能实现双向绑定就是得手动提交和写dom代码罢了

而vue就是通过viewmodel实现省略dom获取赋值代码和自动更新不必手动提交，用户感受更好

二.Vue快速入门

1.导入vue.js库

<script src="js/vue.js"></script>

2.创建vue的核心对象并用选择器选择

new Vue({
	el: "#app",
	data() {
			return {
				username: ""
			}
		}
});

el: "#app"：el 是一个配置选项，用于指定 Vue 实例挂载的元素。#为id选择器

data() {...}：data 是一个配置选项，用于定义 Vue 实例的数据。在这个例子中，data 方法必须返回一个对象。在这个例子中，通过 return 关键字返回了包含一个 username 属性的对象。这个 username 属性的初始值为空字符串。

3.修改标签

<div id="app">
	<input v-model="username" >
	{{username}}
</div>

v-model=”username“是对data中username属性进行双向绑定，该input中的值即为username，而username就是vue对象中的username，修改input中的值即能修改vue对象中的username并自动更新，{{username}}为插值表达式，即取出data中的username这个属性

<body>
<div id="app">
    <input v-model="username">
    {{username}}
</div>

<script src="js/vue.js"></script>

<script>
    new Vue({
       el:"#app",
       data(){
           return{
               username:""
           }
       }
    });
</script>
</body>

//实际上data是这样的
new Vue({
   el:"#app",
   data：function(){
       return{
           username:""
       }
   }
});

三.Vue 常用指令

指令： HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如： v-if ， v-for…

v-bind

（1）**v-bind：**就是提取data中的属性值去作为v-bind中的属性例如href，css

v-bind:href="url"可简化书写为 :href=“url”

v-model

（2）**v-model：**就是做一个能通过修改视图来修改模型的双向绑定，也就是修改data中的属性

两者结合实现百度搜索功能：

<body>
<div id="app">
    <input v-model="url">
    <a v-bind:href="url">请点击</a>
</div>


<script src="js/vue.js"></script>

<script>
    new Vue({
       el:"#app",
       data(){
           return{
               username:"",
               url:"https://www.baidu.com"
           }
       }
    });
</script>
</body>

v-on:事件

（3）**v-on:事件：**就是绑定事件触发vue中metheds

中的方法

v-on:click可简化书写为 @click

<div id="app">
    <input type="button" value="按我" v-on:click="show()">
</div>


<script src="js/vue.js"></script>

<script>
    new Vue({
       el:"#app",
       data(){
           return{
               username:"",
               url:"https://www.baidu.com"
           }
       },
        methods:{
           show(){
               alert("脸红~")
            }
        }
    });
</script>
</body>

v-if-else

（4）**v-if-else:**就是识别data中的属性符合这个条件的时候才启用

<body>
<div id="app">
    <input v-model="count">
    <br>
    <div v-if="count==1">魅魔</div>
    <div v-if="count==2">老师</div>
    <div v-if="count==3">精灵</div>
</div>


<script src="js/vue.js"></script>

<script>
    new Vue({
       el:"#app",
       data(){
           return{
               count:1
           }
       }
    });
</script>
</body>

v-show

（5）**v-show:**也是符合条件的才会展示，但是跟if-else不一样的是该标签只是隐藏了，依然存在页面中，渲染方式不同

<div id="app">
    <input v-model="count">
    <br>
    <div v-show="count==1">魅魔</div>
</div>


<script src="js/vue.js"></script>

<script>
    new Vue({
       el:"#app",
       data(){
           return{
               count:1
           }
       }
    });
</script>
</body>

魅魔还在就是藏起来了~

v-for

**（6）v-for：**遍历data中的数组属性来获取值，类似select *

<body>
<div id="app">
    <div v-for="sex in sexDog">
        {{sex}}
        <!--这里插值表达式也能区sex，可以看作sex也为data一员了就是指针罢了-->
    </div>
</div>


<script src="js/vue.js"></script>

<script>
    new Vue({
       el:"#app",
       data(){
           return{
               sexDog:["魅魔","护士","h魔法师"]
           }
       }
    });
</script>
</body>