• Vue.js入门教程（一）

    目录

    什么是 Vue？

    环境搭建

    1：创建Vue项目

    2：安装浏览器插件

    编写第一个Vue程序 Hello world

    Vue中的模板语法

    1：插值语法

    2：指令语法

    Vue双向数据绑定

    1：单向数据绑定

    2：双向数据绑定

    vue.js官网：https://cn.vuejs.org

    什么是 Vue？

    Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

    环境搭建

    1：创建Vue项目

    从官网下载 vue.js 文件

    创建一个index.html文件，引入下载好的vue.js文件

    2：安装浏览器插件

    下载add-remote-devtools分支上的源码压缩包

    下载完成后，解压压缩包源码，使用 npm install 安装依赖，然后使用 npm run build 打包

     打包完成之后打开谷歌浏览器，进入谷歌浏览器扩展程序，如下图

    浏览器vue插件安装完成

    然后打开vue程序页面，F12就可以看到刚安装好的vue插件

    编写第一个Vue程序 Hello world

    2. <body>
    3.     <div id="app">{{ message }}div>       
    4.     <script>
    5.         const app = new Vue({               // 创建vue对象实例
    6.             el: '#app',                     // 使用固定的 el 属性指定当前的vue实例为哪个容器使用，值为css选择器字符串
    7.             // template: `
      {{message}}
      `,    // 不使用el的话也可以使用template模板，注意模板中不能同时存在多个根节点
    8.             data: {                         // 使用固定的 data 属性存储数据给 el 指定的容器使用
    9.                 message: "hello world"      // 数据变量，容器中 使用 {{ }} 语法渲染数据
    10.             }
    11.         })
    12.     script>
    13. body>

    • 一个vue实例只能对应一个html标签容器
    • {{}} 语法可以读取到在data中的所有属性
    • data中的数据发生变化，那么在容器用到的数据会自动更新

    Vue中的模板语法

    1：插值语法

            特点：用在html标签体内

            写法：{{ xxx }}        // xxx是js表达式，可以拿到data中的所有属性

    2：指令语法

            特点：用在标签解析上（标签属性、标签体内容、绑定事件等），只要用上指令语法那么数据值就可以在data中赋值

            写法：v-xxx

            // 解析标签属性：v-bind

            v-bind:href = 'url'            // url是data中的自定义属性

            :href='url'                        // 简写模式

            举例（动态渲染a标签的跳转路径）：

    2. <body>
    3.     <div id="app">
    4.         <a v-bind:href="url">百度一下a>
    5.     div>
    6.     <script>
    7.         const app = new Vue({               
    8.             el: '#app',                     
    9.             data: {                         
    10.                 url: "https://www.baidu.com"      
    11.             }
    12.         })
    13.     script>
    14. body>

    Vue双向数据绑定

    1：单向数据绑定

            特点：只能从data流向页面

    2. <body>
    3.     <div id="app">
    4.         
    5.         <input type="text" v-bind:value="name" />
    6.     div>
    7.     <script>
    8.         const app = new Vue({               
    9.             el: '#app',                     
    10.             data: {                         
    11.                 name: "单向数据绑定"            
    12.             }
    13.         })
    14.     script>
    15. body>

    2：双向数据绑定

            特点：不仅可以从data流向⻚⾯，也能从⻚⾯表单元素（输⼊元素）流向data

            实现：使用 v-model 指令，只能用在能输入的标签上

                    

                            // 简写

                            // 表示只能输入数字类型

            举例：

    2. <body>
    3.     <div id="app">
    4.         
    5.         <input type="text" v-model:value="name" />
    6.     div>
    7.     <script>
    8.         const app = new Vue({               
    9.             el: '#app',                     
    10.             data: {                         
    11.                 name: "双向数据绑定"            
    12.             }
    13.         })
    14.     script>
    15. body>

            原理：vue的双向数据绑定使用的MVVM模型

    • M：Model（模型） 对应data的数据
    • V：View（视图） 模板==>页面
    • VM：ViewModel（视图模型） Vue实例对象

            ViewModel 包含 DOM Listeners 和 Data Bindings。Data Bindings 用于将数据绑定到 View 上显示，DOM Listeners 用于监听操作

    MVVM

    • 从 Model 到 View 的映射，也就是 Data Bindings 。这样可以大量省略我们手动 update View 的代码和时间
    • 从 View 到 Model 的事件监听，也就是 DOM Listeners 。这样我们的 Model 就会随着 View 触发事件而改变

    Vue中的MVVM

    • data中所有的属性、computed的计算属性、methods中的方法等，最后都出现在了vue实例vm身上
    • vue实例vm身上所有的属性 及 Vue原型上所有属性，在Vue模板{{}}中都可以直接使用

                    

  • 相关阅读:
    构建Flink第一个应用程序
    帐号授权助力软件产业打造独有商业优势
    JavaEE基础知识
    H2O R语言搭建
    【03】FISCOBCOS配置及使用控制台
    SpringBoot中一个万能的Cors跨域Filter
    apollo配置中心的client端分析
    dubbo 核心源码分析
    算法小白的心得笔记：分清楚执行程序和动态链接库的编译方式。
    MAC m系列docker login报错
  • 原文地址：https://blog.csdn.net/a1053765496/article/details/126736843