（二）Vue.js适合新手的入门案例

最新推荐文章于 2024-04-11 02:33:16 发布

Shashank497

最新推荐文章于 2024-04-11 02:33:16 发布

阅读量281

点赞数

分类专栏： # Vue.js保姆级教程文章标签： vue js vue.js node.js jquery

本文链接：https://blog.csdn.net/EMIvv/article/details/107636295

版权

Vue.js保姆级教程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

二、Vue之初体验

Vue(读音/vju:/)，人们常说的Vue.js其实就是Vue。

Vue属于Web前端三大主流框架之一，另外两个是Angular、React

Vue是一个渐进式的框架：
1.渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验；
2.或者如果希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统；
3.比如Vue全家桶Core+Vue-router+Vuex，可满足各种需求。
Vue的特点：
1.解耦视图和数据
2.可复用的组件
3.前端路由技术
4.状态管理
5.虚拟DOM

初体验1

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

</head>
<body>
<div id="app">{{message}}</div>

<script src="js/vue.js"></script>
<script>
    //let(ES6变量)/const（常量）/var（没有变量作用域）
    //编程范式：声明式编程；相对的是之前的命令式编程
    const app = new Vue({
        el:'#app',//用于挂载要管理的元素
        data:{//定义数据
            message:'Hello，Vue！'
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

上面代码做了什么事情？

第15行创建了一个新的新的Vue对象实例。
创建Vue对象的时候，传入了一些options：{}
{}中包含了el属性：该属性决定了这个Vue对象管理哪一个元素上面，很明显，我们这里挂载到了id为app的元素上。
{}中包含了data的属性：该属性中通常会存储一些数据：这些数据可能是我们直接定义出来的；也可能是来自网络，从服务器加载的。

初体验2（列表显示）

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


<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'Hello',
            movies:['星际穿越','大话西游','少年派','盗梦空间']
        }
    })
</script>

</body>
</html>

运行结果
在这里插入图片描述
上面代码做了什么？
上面的第12行HTML代码中，使用了v-for指令，一个循环语句。

如果是JavaScript，需要多行代码来显示列表，相对于JavaScript，是不是变得更简洁了很多！！

而且，更重要的是，它还是响应式的：当我们在数组中的数据发生改变时，界面会自动改变。比如打开浏览器的开发者模式console，试一下如下图：
在这里插入图片描述

初体验3（计数器）

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

<div id="app">
    <h2>当前计数：{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter--">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>

<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            counter:0
        },
        methods:{
            add:function (){
                console.log('add被执行');
                this.counter++
            },
            sub:function (){
                console.log('sub被执行');
                this.counter--
            }
        }
    })
</script>

</body>
</html>

在这里插入图片描述
上面的代码做了什么
展现出了新的属性：methods，该属性用于在Vue对象中定义方法；
新的指令：v-on:click（语法糖@click，即代码中@click可以替换v-on:click），该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法。

看完这些例子，你可能会有疑惑：Vue对象中又是定义el/data/methods，到底有哪些东西可以定义，以及他们的作用是什么？

这些疑惑都会在后面的学习中一一解开

Shashank497

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
（二）Vue.js适合新手的入门案例

二、Vue之初体验Vue(读音/vju:/)，人们常说的Vue.js其实就是Vue。Vue属于Web前端三大主流框架之一，另外两个是Angular、ReactVue是一个渐进式的框架：1.渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验；2.或者如果希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统；3.比如Vue全家桶Core+Vue-router+Vuex，可满足各种需求。Vue的特点：1.解耦视图和数据2.可复用的组件3.前端路由
复制链接

扫一扫