Vue的快速入门

最新推荐文章于 2024-05-05 17:54:12 发布

春早晚冬平水桥

最新推荐文章于 2024-05-05 17:54:12 发布

阅读量444

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_63534255/article/details/127378549

版权

Vue的简介：

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

Vue语言的特点：

易用
在有HTML，CSS，JavaScript的基础上，快速上手。
Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。
Vue.js 的 API 的对于其他框架的参考不仅是参考，其中也包含了许多 Vue.js 的独特功能。
灵活
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能
20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化

一：快速入门案例

案例达到效果：在输入框中输入任意信息，该信息可以在输入框后实时展示出来

1.创建web工程，导入js文件

2.创建.html页面，在页面中引入vue.js文件

3.创建vue核心对象，进行数据绑定

4.创建视图，取出数据时使用{{数据名称}将对应数据取出

5.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的快速入门</title>
</head>
<body>

<!--编写视图-->
<!--使用 {{}} 将数据取出-->
<div id="app" class="cc">
    <input v-model="msg">{{msg}}
</div>

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

<script>
    
    new Vue({
        //写入选择器,id对应#id,class对应.class，此处使用#app选择器
        el:"#app",
        data(){
            //初始化数据对象
            return{
                msg:""
            }
        }
    });

</script>

</body>
</html>

二：vue常用的指令

1.v-bind 的简单实用

案例效果：在输入框中输入网址，动态改变超链接的地址,并动态的将输入框中的信息展示出来

1.1引入vue.js文件，创建vue的核心对象

1.2绑定视图

1.3源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--绑定视图-->
<div id="app" class="cc">
<!--    <a v-bind:href="url" >百度一下</a>{{url}}-->

    <!--    简写-->
    <a :href="url">点我点我</a>{{url}}
    <br>
    <input type="text" v-model="url">
</div>

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

<script>

    new Vue({
        //写入选择器,id对应#id,class对应.class，此处使用#app选择器
        el:"#app",
        data(){
            //初始化数据对象
            return{
                url:""
            }
        }
    });

</script>
</body>
</html>