Vue学习-01

最新推荐文章于 2024-07-09 10:14:58 发布

_Solider

最新推荐文章于 2024-07-09 10:14:58 发布

阅读量82

点赞数

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

本文链接：https://blog.csdn.net/weixin_46694747/article/details/113086027

版权

Vue学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue js

1. 什么是Vue

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

2. 为什么使用Vue

在这里插入图片描述

3. Vue入门

3.1 案例一

3.1.1 从vue.js官网下载vue.js文件

在这里插入图片描述

3.1.2 使用script引入Vue.js

//相对路径
<script src="../js/vue.js"></script>

3.1.3 编辑01-Vue.html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <h2>{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    /*
    * 传统js赋值方法：（编程范式：命令式编程）
    *   1.  创建div元素，设置id属性
    *   2.  定义一个变量：message
    *   3.  将message变量放在div中显示
    */
    //let -- 变量
    //const -- 常量
    //编程范式：声明式编程
    const app = new Vue({
        el: "#app",//用于要挂载的元素
        data: {//定义数据
            message: "你好，再见！",
            name: '周石榴'
        }
    })
</script>

</body>
</html>

3.1.4 网页效果

在这里插入图片描述

3.1.5 浏览器console窗口中编辑message

可直接修改message的赋值，并自动显示到页面，实现响应式
在这里插入图片描述

3.2 案例二

3.2.1 编辑02-VueList.html

 <!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>

在这里插入图片描述

3.2.2 console追加内容

在这里插入图片描述

3.3 案例三-计数器

3.3.1 编辑03-VueCounter.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-VueCounter</title>
</head>
<body>
<div id="app">
    <h2>计数器: {{count}}</h2>
    <!--<button v-on:click="count++">+</button>-->
    <!--<button v-on:click="count&#45;&#45;">-</button>-->
    <!--<button v-on:click="add">+</button>-->
    <!--@click &#45;&#45; v-on：click的简写形式，属于v-on的语法糖-->
    <button @click="add">+</button>
    <!--<button v-on:click="sub">-</button>-->
    <button @click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            count: 0
        },
        methods: {
           add: function (){
               console.log("add");
               /* this -- 当前对象 */
               this.count++;
           },
           sub: function () {
               console.log("sub");
               this.count--;
           }
        }
    })
</script>
</body>
</html>