初始VUE

切图仔

发布于 2022-09-08 15:11:57

8300

发布于 2022-09-08 15:11:57

文章被收录于专栏：生如夏花绚烂

vue.js是一种很流行的轻量级MVVM框架,那什么是MVVM架构呢？在这之前如果你了解后端框架，如laravel,thinkphp等等，他们的开发方式是MVC架构，何为MVC架构简单来说就是，将一个项目分成三层。 M(Model)层为模型层主要用于数据库操作，执行数据的CRUD。 C(Controller)层为控制层只要用于处理业务逻辑，在设计到数据操作时，会调用M层的相关方法 V(View)层就是视图层主要用于展示数据，用户交互等等。

下面我们要说的MVVM架构就是针对前端的视图层 MVVM架构分为三层 M层保存了每个页面的数据 V层则是每个页面的HTML架构 VM层介于M和C之间，实现M和C的数据交互，如C层需要显示数据，则提供VM中间处理，而M层数据需要与C层同步，也得经过VM层。

一个简单的示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
    <div id='app'>
        <p>{{msg}}</p>
    </div>
<script type="text/javascript" src='./lib/vue-2.4.0.js'></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello word'
        },
        methods:{

        }
    })
</script>
</body>
</html>

上面代码中我们可以将 html部分理解为V层，data区域可以看作为M层

这Vue构造函数可以看做为VM层

了解了基本的MVVM架构后我们来看一下怎样使用VUE

1.vue官网上下载Vue.js

2.script标签引入vue.js

3.实例化VUE构造函数，该构造函数接收一个对象

最基本的elvue控制页面的区域，data为当前区域需要的数据methods为当前页面的一些业务逻辑。

在Vue中我们只需关心数据与业务逻辑，无需关心Dom操作。

常用Vue指令

1.v-cloak：解决数据闪烁的问题如html代码使用{{msg}}获取data数据时，在页面还没有加载完成时，用户可能会看到{{msg}}这样的字符，这对用户非常不友好，因此我们的解决方式是给显示数据的元素添加指令 v-cloak并设置样式

[v-cloak]{
display:none
}

2.v-text:这个指令与视图中使用{{}}类似，该指令也可用于展示数据，但他们之间唯一的区别是v-text不会发生数据闪烁。

3.v-html:v-text虽然能够显示数据，但v-text不能使浏览器解析html代码，v-html解决了这个问题

4.v-bind：用于绑定变量，简写方式为冒号如当我们要设置某个元素的属性值时

<div id='app'>
        <p v-bind:title='msg'>{{msg}}</p>
    </div>
<script type="text/javascript" src='./lib/vue-2.4.0.js'></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello word'
        }
    })
</script>

通过v-bind告诉title使用的是data里面的msg而不是一个普通的字符串

5.v-on:用于元素绑定事件，简写方式为@ 如

<div id='app'>
    <p @click='show'>{{msg}}</p>
</div>
var xxm = new Vue({
        el:'#app',
        data:{
            msg:123,
            title:'标题'
        },
        methods:{
            show(){
            console.log('hello')
            }

        }
    })

6.v-for:遍历数组，对象 6.1迭代数字

<div id='app'>
    迭代数字
    <p v-for="count in 10">迭代{{count}}次</p>
</div>
//p标签将被输出10次

6.2：遍历普通数字

<div id='app'>
        <p v-for="(item,i) in list">索引{{i}} 值{{item}}</p>
</div>

var vm =new Vue({
         el:'#app',
         data:{
             list:[1,2,3,4,5,6]
         }
     })

item代表数组中具体的值，i代表数组索引 6.3遍历对象

<p v-for="(val,key) in list" :key="val.id">
        <input type="checkbox" >
        {{val.id}}==={{val.name}}
 </p>
var vm = new Vue({
        el:'#app',
        data:{
            list:[
                {id:0,name:'老大'},
                {id:1,name:'老二'},
                {id:2,name:'老三'},
                {id:3,name:'老四'},
                {id:4,name:'老五'}
            ]
        }
            }
        }
    })

使用v-for遍历数组或对象时，如果要使用组件，如单选框，复选框等应注意给元素添加一个唯一标识的key值，这个值可以是字符串也可以是数字，上面使用的对象的id，如果不添加有时候可能会发生异常的情况

如下案例

我们可以为下列表添加一些数据，在添加之前我们先选择一个名称，当选中后我们在执行添加操作时发现之前选中的”老三“变成了老二，这里我们是像数组之前添加元素所以出现这种情况，为了解决类似的情况我们可以在被遍历的元素添加:key='数组id'保持元素的唯一标识

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
    
<div id='app'>
    <label>ID
        <input type="text" name="" v-model='id'>
    </label>
    <label>Name
        <input type="text" name="" v-model='name'>
    </label>
    <input type="button" @click='add' value='添加' name="">
    <!-- 迭代对象 -->
    <p v-for="(val,key,i) in list" :key="val.id">
        <input type="checkbox" >
        {{val.id}}==={{val.name}}
    </p>

</div>
<script type="text/javascript" src='./lib/vue-2.4.0.js'></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            id:0,
            name:'',
            list:[
                {id:0,name:'老大'},
                {id:1,name:'老二'},
                {id:2,name:'老三'},
                {id:3,name:'老四'},
                {id:4,name:'老五'}
            ]
        },
        methods:{
            add(){
                this.list.unshift({id:this.id,name:this.name})
            }
        }
    })
</script>
</body>
</html>

7.v-if与v-show:v-if与v-show都是变量为true时才执行html代码，不同的是v-if是通过创建或删除的方式使用元素显示或隐藏，而v-show则通过设置display属性控制显示和隐藏

<div id='app'>
        <input type="button" value='toggle' @click="flag=!flag" name="">
        <h3 v-if='flag'>这是v-if</h3>
        <h3 v-show='flag'>这是v-show</h3>
    </div>
 //
 var vm =new Vue({
        el:'#app',
        data:{
            flag:true
        }
    })

8.v-model:实现数据双向绑定，通过数据双向绑定我们不用dom操作即可获取到表单元素的值v-model只在表单元素中生效,表单元素使用了v-model就不用使用value