Vue学习笔记1

LinMint

已于 2022-05-02 17:31:02 修改

阅读量76

点赞数

文章标签： vue.js 前端框架 javascript 前端

于 2022-05-02 16:19:51 首次发布

原文链接： https://www.bilibili.com/video/BV1Zy4y1K7SH?p=7&spm_id_from=pageDriver#:~:text=%E6%8A%95%E7%A8%BF-,%E5%B0%9A%E7%A1%85%E8%B0%B7Vue2.0%2BVue3.0%E5%85%A8%E5%A5%97%E6%95%99%E7%A8%8B%E4%B8%A8vuejs%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A,-402.5%E4

版权

本文介绍了如何开始使用Vue，包括创建Vue实例、指定root容器、Vue模板的概念，以及数据绑定的原理。通过示例代码展示了如何在HTML中使用Vue.js，创建一个简单的Vue实例，并绑定数据到页面元素上，实现数据的动态更新。同时强调了在实际开发中，通常只有一个Vue实例，并结合组件进行使用。

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

1.初始Vue

1.想让Vue工作，就必须创建一个vue实例，且传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法；
3.root容器中得代码被称为【Vue模板】；

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


    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>

<div id="root">
    <h1>hello.{{name}}</h1>
    <h1>我的年龄是：{{age}}</h1>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;//阻止vue在启动时生成生产提示
    //创建vue实例
    new Vue({
       // el:document.getElementById('root');//亲自选择
        el:'#root', //自动选择,el用于指定当前VUE实例为那个容器服务，值通常为css选择器字符串
        data:{//data中用于存储数据，数据供el所指定的容器使用。值暂时写出一个对象
            name:'张三',
            age:'18'
        }

    })
</script>
</body>
</html>