Vue快速入门

最新推荐文章于 2022-05-14 16:29:07 发布

꧁এ悲宸๓₯㎕

最新推荐文章于 2022-05-14 16:29:07 发布

阅读量66

点赞数

分类专栏： java学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_44889894/article/details/115470201

版权

java学习专栏收录该内容

56 篇文章 0 订阅

订阅专栏

概念

Vue 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue入门

安装Vue
两种方式安装：

下载vue.js到本地，再引入到JavaScript中

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

使用在线版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue.js指令

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性。
1，v-model指令
Vue.js可以使用v-model指令实现模型和表单元素的双向绑定，也就是说模型中的数据可以显示在表单元素中，修改模型数据表单元素会跟着修改，在表单元素中输入时模型数据也会更改。

<!DOCTYPE html>
<html>
<head>
    <title>使用Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--这是View部分，绑定了Model的数据-->
    <div id="app">
        <p>{{name}}</p>
        <p>{{sex}}</p>
        <p>{{age}}</p>
        <input type="text" placeholder="Input Name" v-model="name"><br>
        <input type="text" placeholder="Input Sex" v-model="sex"><br>
        <input type="text" placeholder="Input Age" v-model="age"><br>
    </div>
    <script type="text/javascript">
        //这是Model部分
        var person = {name:'张三',sex:'男',age:20};
        //这是ViewModel部分
        var vue = new Vue({
            el:'#app',
            data:person
        });
    </script>
</body>
</html>

在这里插入图片描述
在控制台修改模型的数据，文本框也会更新

在这里插入图片描述

2，v-if和v-else指令

v-if指令后面可以添加条件，当条件成立时会将所在标签插入到HTML中，条件不成立时所在标签不会出现在HTML中。
v-else标签和v-if标签配合使用，当if条件不成立时，可以将其他内容插入到HTML中。

<div id="app">
    <p>{{name}}</p>
    <p>{{sex}}</p>
    <p>{{age}}</p>
    <h2 v-if="age>=18">{{name}}是成年人</h2>
    <h2 v-else>{{name}}是未成年人</h2>
</div>
<script type="text/javascript">
    var person = {name:'张三',sex:'男',age:20};
    var vue = new Vue({el:'#app', data:person });
</script>

在这里插入图片描述
3，v-show指令

对条件进行判断，成立时显示标签，不成立时隐藏标签。
和v-else指令的效果比较类似，不同的是v-show指令是通过display样式实现标签的隐藏和显示，而v-if是将标签在HTML代码中插入和删除。

<h3 v-show="sex=='男'">{{name}}是男人</h3>

4，v-for指令
v-for指令用于遍历数组，所在的标签会反复添加。
语法是：
<标签 v-for=“变量名 in 数组名”>

<!--这是View部分，绑定了Model的数据-->
<table id="app" border="1xp">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr v-for="person in persons">
        <td>{{person.name}}</td>
        <td>{{person.sex}}</td>
        <td>{{person.age}}</td>
    </tr>
</table>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            persons:[
                {name:'张三','sex':'男',age:20},
                {name:'李四','sex':'男',age:20},
                {name:'大虎','sex':'女',age:24}
            ]},
        methods:{
            hello:function (name) {
                alert("hello!"+name);
            }
        }
    });
</script>

在这里插入图片描述
5，v-bind指令
v-bind可以和HTML标签的属性配合，通过表达式绑定不同的属性值。

<--!v-bind:属性=”表达式”
案例：
在上面案例中添加样式-->
<style type="text/css">
        .redbg{background:red}
        .yellobg{background: #fdfe22}
    </style>

在v-for所在的tr标签中添加：

v-bind:class="person.sex=='男'?'redbg':'yellobg'"

这样实现了男女分别显示不同的背景颜色
在这里插入图片描述
6，v-on指令
v-on指令可以实现事件的绑定。
v-on:事件名=”函数(参数)”
注意：这里的函数需要在Vue对象的methods参数中定义

    <table id="app">
       <tr v-for="person in persons" v-bind:class="person.sex=='男'?'redbg':'greenbg'" v-on:click="sayHi(person.name)">
            <td>{{person.name}}</td>
            <td>{{person.sex}}</td>
            <td>{{person.age}}</td>
       </tr>
    </div>
    <script type="text/javascript">
        //这是ViewModel部分
        var vue = new Vue({ el:'#app', 
            data:{
                //Model部分
                persons:[ 
                {name:'张三',sex:'男',age:20},
                {name:'李四',sex:'女',age:22},
                {name:'王五',sex:'男',age:26} 
                ]
            },
            methods:{
                sayHi:function(name){
                    alert("Hi!"+name);
                }
            }
        });
</script>

在这里插入图片描述
Vue的生命周期：

在这里插入图片描述

꧁এ悲宸๓₯㎕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue快速入门

概念Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue入门安装Vue两种方式安装：下载vue.js到本地，再引入到JavaScript中<script src="/js/vue.js"></script>使用在线版本&
复制链接

扫一扫

专栏目录