初识VUE

最新推荐文章于 2022-07-25 19:26:06 发布

shionlin2010

最新推荐文章于 2022-07-25 19:26:06 发布

阅读量92

点赞数

分类专栏： VUE 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/shionlin2010/article/details/125624701

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象
demo 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法
demo 容器里的代码被称为【Vue模板】
Vue实例和容器是一一对应的，真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{xxx}}是 Vue 的语法：插值表达式，{{xxx}}可以读取到 data 中的所有属性
一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新( Vue 实现的响应式)

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- 引入Vue -->
        <script type="text/javascript"  src=""https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js""></script>
    <title>初始vue</title>
    </head>
    <body>
        <div id="root">
            <h2>hello {{ name }} !</h2>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false //阻止vue启动时生成生产提示
            const x= new Vue({
            el:'#root', //选择挂载点，指定vue实例为哪个容器服务
            data:{ //data 用于存储数据
            name:'Vue'
            }
            })
        </script>
    </body>
</html>