初始Vue

发布时间：2020-12-15 01:56:27 所属栏目：Java 来源：网络整理

导读：什么是Vue？ Vue是一个渐进式的JavaScript框架，它与Angular.js、React.js并称为前端三大主流框架 Vue是一套用于构建用户界面的框架，它的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合 Vue的核心是一个允许采用简洁的模板语法来声明式

什么是Vue？

Vue是一个渐进式的JavaScript框架，它与Angular.js、React.js并称为前端三大主流框架
Vue是一套用于构建用户界面的框架，它的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
Vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
Vue遵循MVVM模式

MVVM与MVC

MVC是后端的分层开发模式（Model-View-Conreoller）
MVVM是前端视图层的模式，它分为3个部分：
?? ?M-model 数据模型
?? ?V-view 视图
?? ?VM-ViewModel 视图与模型的调度者

入门案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello Vue</title>
    </head>
    <body>
        <!-- Vue实例的控制区域，即V(View) -->
        <div id="app">
            <!--v-model指令：双向绑定，同步输入框和span标签内的数据 -->
            <input type="text" v-model="message" />
            <span>{{message}}</span>
        </div>
        <!-- 引入vue.js -->
        <script src="js/vue.js"></script>
        <script>
            // 创建vue实例,这就是一个VM调度者
            new Vue({
                el: "#app",// element,指定vue实例控制的节点区域
                // 控制节点所需要的数据，即M(Model) 
                data: {
                    message: "hello Vue"
                }
            })
        </script>
    </body>
</html>

说明：
1.首先引入vue.js或vue.min.js
2.声明页面中需要被Vue控制的区域
3.创建Vue实例，这其实是一个VM调度者
4.el:指定vue实例控制的节点区域,data:Vue实例中需要的数据并以键值对的形式存放
5.{{}}表达式中填入JavaScript表达式，data中的键作为变量名填入，让对应数据显示在视图中
6.v-model:这是一个Vue的指令，它是唯一一个双向绑定的指令，它用来同步输入框与控制区域内其他位置的数据

常用指令

Vue指令 (Directives) 是带有 v- 前缀的特殊特性。指令引用的值预期是单个 JavaScript 表达式（v-for例外）

v-cloak

在入门案例中，我们看到可以用{{}}表达式灵活地插入数据，但是存在一个问题，当网速较慢时浏览器不会马上将{{}}
表达式渲染成数据而是作为普通文本显示出来。
为解决这一问题，Vue提供了一个v-cloak指令。页面加载时v-cloak指令指定的元素不会显示，页面完全加载完成时才显示。

<style type="text/css">
    [v-cloak]{
        display: none;
    }
</style>

<p v-cloak>{{msg}}</p>

v-text

为解决上一问题，vue还提供了一个指令v-text替代{{}}表达式，不同的一点是v-text会覆盖元素内所有内容。

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

v-once

一次性地插值指令，在标签中使用了这个指令，若使用了{{}}表达式插入数据，则当{{}}中表达式的数据改变时，页面显示的数据不会更新。

v-html

在上面，我们了解了v-text显示数据，但是如果我们需要显示的数据是一段HTML代码，v-text和{{}}都将无能为力，为此，Vue提供了专门渲染HTML数据的指令

<div id="app">
    <p>{{msg}}</p>
    <p v-html="msg"></p>
</div>

v-bind与v-model

v-bind是单向数据绑定，v-model是双向数据绑定且一方只能是输入框这一点在入门案例中已经体现得很清楚了。

由于无法将Vue实例中的data的变量直接放进html元素的各属性中，比如

<img src="imgUrl" alt="msg"/>

这样绑定的结果是图片的路径就是"imgUrl"，因此图片找不到路径。

这样的事便由v-bind来解决，它还能绑定元素的各种属性，如src、herf、class、value等。另外v-bind:还有一个简易写法：:。

<div id="app">
    <img v-bind:src="imgUrl" v-bind:alt="msg"/>
    <img :src="imgUrl" v-bind:alt="msg"/>
</div>
<!-- js代码 -->
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",data:{
            imgUrl:"https://cn.vuejs.org/images/logo.png",msg:"Vue logo"
        }
    })
</script>

v-on

它用于监听 DOM 事件，用来绑定触发事件。与v-bind一样，它也有一个简写：@。

<div id="app">
    <button v-on:click="test">点击我</button>
    <button @click="test">点击我</button>
</div>
<!-- js代码 -->
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",methods:{
            test(){
                alert("hello Vue");
            }
        }
    })
</script>

与el、data一样method是Vue实例的配置属性，用来存放事件方法。

如果事件方法需要参数，则在绑定时加上()传入参数。

v-if与v-show

Vue提供两个控制元素的显示与切换的指令v-if和v-show。

区别：v-if是真正意义上的隐藏元素，但是每次需要重新删除和创建元素，具有较高的切换性能消耗；v-show不会重建进行DOM的删除和创建操作，只是修改样式display:none。

另外对于v-if，Vue还提供了v-else-if和v-else搭配，但元素必须紧密连接，否则指令不被识别。

案例：

<div id="app">
    <span v-if="num<=100&&num>=85">优秀{{num}}</span>
    <span v-else-if="num>=70&&num<85">良好{{num}}</span>
    <span v-else-if="num>=60&&num<70">及格{{num}}</span>
    <span v-else-if="num>=0&&num<=60">不及格{{num}}</span>
    <span v-else>不在范围内</span>
    <p v-show="isShow">v-show控制的元素</p>
</div>
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",data: {
            num: 95,isShow: true
        }
    })
</script>

v-for

Vue为渲染集合、数组提供了v-for指令，用法：v-for="item in/of items"，其中items是源数据数组，而item则是被迭代的数组元素的别名。

遍历数组列表时，还可以获取到被迭代的数组元素下标。

<ul>
    <!--index为迭代元素的下标-->
    <li v-for="(item,index) in items">
        {{index}}-{{item.msg}}
    </li>
</ul>

data:{
    items:[
        {msg:"a"},{msg:"b"},{msg:"c"}
    ],}

v-for还可以遍历对象内的属性

<div id="app">
    <ul>
        <!--遍历对象属性同样可以获取元素下标甚至可以获取到属性名-->
        <li v-for="(value,key,index) in object">
            {{index}}-{{key}}-{{value}}
        </li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#app",data:{
            object:{
                name:"张三",age:"18"
            }
        }
    })
</script>

如果文章有错的地方欢迎指正，大家互相交流。感谢关注公众号JsjCoding

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!