Vue简介之初学Vue

最新推荐文章于 2024-07-30 16:49:30 发布

m0_53978368

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量100

点赞数 1

文章标签： html5 vue.js 前端前端框架 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_53978368/article/details/128495535

版权

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，能帮助高效地开发用户界面

Vue的特点：

采用组件化模式，提高代码的复用率、且让代码能够更好的进行维护

声明式编码，让编码人员无需直接操作DOM，能够提高开发效率

声明式编码（例如v-for)：提供一个容器进行操作，能够不进行命令式编码（一条指令一条指令进行编码），提供一个操作即可完成。

从官网下载Vue的JS开发包，使用<script>引入Vue作为一个全局变量，新建一个实例，定义好相关参数，在{{}}内引用的参数是使用Vue模板里面的插值语法实现的，相关的参数由实例的容器提供。

插值语法：

指令语法：多用于标签参数的绑定，例如:<a v-bind:href="www">百度</a>

<!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">
    <script src="./dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>
            hello,{{name}}，{{age}}，{{Date.now()}}
        </h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root' , //el用于指定当前vue实例为哪个容器服务，通常用css选择器字符串
            // el:document.getElementById('root')
            data() {
                return {    //data用于存储数据，数据供el所指定的容器使用，值暂时先写成一个对象
                    name:'张三',
                    age:18,
                    school:{
                        name:'李四',
                        address:'北京'
                    }
                }
            },
        })
    </script>
</body>
</html>