vue框架基础

最新推荐文章于 2024-08-14 18:44:30 发布

爱写点小屎山

最新推荐文章于 2024-08-14 18:44:30 发布

阅读量870

点赞数 27

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_64310316/article/details/140474882

版权

vue是构架用户界面的渐进式框架，采用自底向上逐层应用开发。他的核心理念是数据驱动视图，组件化开发。

库和框架的区别

首先了解一下库和框架的区别，框架例如vue.，是一套完整的解决方案，对项目侵入性比较大，项目如果需要更换框架，需要重新架构整个项目。而库只是提供一个小功能，例如jQuery，对项目侵入性比较小，如果这个库满足不了使用，可以很容易的切换到其他库。

MVC和MVVM的区别

这个一点很重要，MAC是一种后端分层开发概念，MVVM是前端视图层的概念。
在MAC中，v代表view视图层，作用发送数据，展示数据
c代表controller调度层，作用响应数据，返回数据，
m代表model模型层，作用处理数据，与数据库交互
在MVVM中，v代表view视图层，作用展示数据，
vm代表view-model视图模型层，作用连接视图层和模型层，承上启下，
m代表model模型层，作用逻辑处理

vue的基础语法

//创建vue实例
let vm=new Vue({
	el:'#app'，   //控制区域，类似于选择器的写法
	data:{
		msg:"这是一个变量"
	},           //存放数据使用，就是变量
	motheds:{
		fn(){
			console.log('测试')
		}
	}			//存放方法
})

元素绑定 v-bind 和v-on

v-bind是和元素属性绑定的，绑定后，这个属性就可以使用data里的变量了。v-on是绑定事件的

<div id="app">
        <!-- 元素属性绑定 v-bind -->
         <img v-bind:src="src" alt="">
         <!-- 简写 v-bind:简写成一个冒号-->
          <img :src="" alt="">
          <!-- 事件绑定v-on:事件类型-->
           <button v-on:click="fn">按钮</button>
           <!-- 简写 v-on: 简写成@ -->
           <button @click="fn">按钮</button>

    </div>

数据双向绑定 v-model

在不适用数据双向绑定的情况下，数据只能展示，并不能拿到在页面上更改后的值，例如input框的值，只能通过变量设置，但不能获取input框上新的值，新的值不能传回data区的变量，双向绑定后，就可以互相影响了
它的原理：数据劫持结合发布者—订阅者模式的方式来实现的，通过
Object。defineProperty（）来劫持各个属性的setter，getter，在数据发生变动时，告诉订阅者是否要更新，执行对应的更新函数，而更新视图。

<input type="text " v-model:value="msg">
<input type="text " v-modele="value">  //可以简写成这样

事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue-2.4.0.js"></script>
</head>
<style>
    .one{
        width: 500px;
        height: 500px;
        background-color: aliceblue;
    }
    .two{
        width: 400px;
        height: 400px;
        background-color: red;
    }
    .three{
        width: 300px;
        height: 300px;
        background-color: yellow;
    }
    .four{
        width: 200px;
        height: 200px;
        background-color: orange;
    }
</style>
<body>
    <div id="app">
         <!-- .stop  阻止冒泡，阻止事件继续向外传播 -->
          <!-- <div class="one" @click.stop="two"></div> -->
          <!-- .capture  添加事件捕获 -->
          <!-- .self  只有当事件在元素本身触发时调用 -->
          <!-- .once  事件只会触发一次 -->
          <!-- .prevent  阻止默认事件 -->
           <div class="one" @click="one">
                <div class="two" @click="two">
                    <div class="three"  @click.capture="three">

                        <div class="four"  @click="four">

                        </div>
                    </div>
                </div>
           </div>
    </div>
</body>
<script>
    // 创建vue实例
    let vm=new Vue({
        //控制区域
        el:'#app',
        //存放数据
        data:{
            msg:"111111",
            age:33
        },
        //存放方法
        methods:{
            one(){
                console.log('one');
            },
            two(){
                console.log('two');
            },
            three(){
                console.log('three');
            },
            four(){
                console.log('four');
            },
        }
    })
</script>
</html>