Vue入门

引入vue.js包

1.通过cdn引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.直接下载vue.js，在本地引入
下载地址：https://github.com/vuejs/vue/releases
将下载的压缩包解压，然后在dist文件夹里面可以找到vue.js包

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">{{info}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--下载地址https://github.com/vuejs/vue/releases-->
<script>
    //let(变量)、const(常量)
    // 编程范式：声明式编程
    const app = new Vue({
        el: '#app',
        data: {
            info: 'that is what I want to show'
        }
    })
</script>

</body>
</html>

上面的代码有一个div块，id为app，通过script标签引入vue.js包，
然后通过new一个vue，传入一个对象，这个对象的el属性指向div中的id，将这个对象与div块级元素关联起来，data中的info会指向div中的info，这个是vue内部做的实现。
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。

高级说法：

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

以上为个人见解，如有错误的地方，麻烦提醒下，万分感谢。

posted @ 2021-01-24 11:01  lamsacule  阅读(76)  评论(0)    收藏  举报