学习笔记------Vue基础

最新推荐文章于 2024-08-13 22:07:58 发布

F1CT0R

最新推荐文章于 2024-08-13 22:07:58 发布

阅读量24

点赞数

文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/m0_56464236/article/details/131604151

版权

Vue是一个用于构建用户界面的渐进式框架，可以替代JavaScript处理数据和页面操作。文章介绍了如何引入Vue，创建Vue实例以及在HTML中绑定数据，包括单向和双向绑定的概念，展示了在input元素中应用的例子。

摘要由CSDN通过智能技术生成

Vue简介

vue是为开发者提供的浏览器扩展工具，在功能上可以完全代替js完成各种数据页面操做。

引入vue

链接: https://pan.baidu.com/s/1Tnl01s6IjjDSwXoDA-vKxA?pwd=1234 提取码: 1234

点击上方链接下载vue.min.js文件下载vue包并保存到与程序同级的文件夹下，并在<head>标签下引用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
<!--引用vue包-->

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

</head>

接下来在body中准备一个容器并在scri中创建vue，与其绑定后即可进行页面元素的读取和改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>{{name}}</h1>
    </div>

    <script>
        new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{ //data用于存储数据，数据共el所指定的容器去使用
                name:'曹操'
            }
        })
    </script>
</body>
</html>

绑定

vue的绑定有两种方式：单向绑定，双向绑定，区别在于可否对页面数值进行改变，并且只可用input元素进行交互。废话不多说直接上实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 引入VUE -->

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

</head>

<body>

    <div id="app">

        <p>

            大家好，我是{{person.name}},我今年{{person.age}}。

        </p>

        <p>

            我来自{{hplist[0]}}

            <ul>

                <!-- {{}}只能用于文本改变 -->

                <!-- 循环遍历数组 e in arr -->

                <!-- e为arr中的每一个元素 -->

                <li v-for="(hp,i) in hplist">

                    {{hp}}--{{i}}

                </li>

            </ul>

            <ul>

                <li v-for="i in 10">

                    {{i}}

                </li>

            </ul>

        </p>

        <!-- v-bind:value="person.name" 单向绑定，只可以读取数据-->

        <input type="text" :value="person.name" id="" placeholder="请输入姓名">

        <input type="text" v-bind:value="person.age" id="" placeholder="请输入姓名"><br>

        <!-- v-model:value="person.name"双向绑定，可以读取与改变data中的数据，只用于表单项input标签-->

        <input type="text" v-model:value="person.name" id="" placeholder="请输入姓名">

        <input type="text" v-model="person.age" id="" placeholder="请输入姓名">

    </div>

</body>

<script>

    // 创建vue实例

    new Vue({

        el:'#app',

        data:{

            person:{name:'曹操',age:'36'},

            hplist:['武汉','湖南','河南']



        }

    })

</script>

</html>