万字血书Vue—走近Vue

Vue是什么？

Vue是一套用于构建用户界面的渐进式JavaScript框架

  • 构建用户界面：用vue往html页面中填充数据

  • 渐进式：Vue可以自底向上逐层的应用，从轻量小巧核心库的简单应用，到引入各式各样插件的复杂应用。

  • 框架：一整套现成的解决方案，遵守框架的规范，学习框架，就是学习框架中的规定用法

谁开发的？

https://zhuanlan.zhihu.com/p/58335278

Vue特点

  1. 采用组件化模式，提高代码复用率，且让代码更好维护。
  2. 声明式编码，开发人员无需操作DOM，提高开发效率。

Vue文档

https://v2.cn.vuejs.org/

https://cn.vuejs.org/

起步

<!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">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="https://www.cnblogs.com/gfhcg/archive/2023/03/js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello World!</h1>
        <h1>Hello {{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示
        //创建Vue实例
        //容器和实例 一一对应
        const vm=new Vue({
            el:'#root',//用于指定当前Vue为哪个容器服务，值通常为css选择器字符串，不能基于body和html初始化
            data:{//data中用于存储数据，供el指定的容器使用
                name:'张三',
            }
        })
    </script>
</body>
</html>

el和data的第二种写法:

<body>
    <div id="app">{{username}}</div>
    #导入脚本文件
    <script src="https://www.cnblogs.com/gfhcg/archive/2023/03/17/vue.js"></script>
    <script>
        const vm=new Vue({
            data(){ //此处this指向vue实例
            return{
                   username:'zs'
            }
            }
        })
        vm.$mount=('#app')//挂载
        //data:对象式和函数式，组件时只能用后者，不能用箭头函数this会指向window而不是vue
    </script>
</body>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。