Vuejs_ovrjs-优快云博客

本文链接：https://blog.youkuaiyun.com/Khaleesa/article/details/112714066

Vuejs

认识vue
Vue.js安装
Vuejs体会一哈
- var/let/const
- 体验响应式

认识vue

vue是一个渐进式框架，那么什么是渐进式？

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
若希望将更多的业务逻辑用Vue实现，那么可以使用Vue的可辛苦及其生态系统，如Core+Vue-router+Vuex。
Vue有很多特点和Web开发者常用的高级功能

Vue.js安装

方式一：直接CDN引入
方式二：下载和引入
方式三：NPM安装

Vuejs体会一哈

var/let/const

var 有缺陷js产物
let 定义变量
const 定义常量

体验响应式

显示内容会随着data中所给的数据随时更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloVuejs</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
    // let(定义变量）/const（定义常量）
    // 编程范式：声明式编程
    let app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: {     // 定义数据
            message: 'hello,yoyo!',
            name: 'yoyo'
        }
    })

    // 原始js做法:创建div元素，设置id属性；定义变量；将变量放在div中显示
    // 编程范式：命令式编程
</script>
</body>
</html>