快速入门

LiAng2023年11月30日大约 3 分钟约 509 字

官方文档：https://cn.vuejs.org/v2/guide/index.html 下载：https://cn.vuejs.org/v2/guide/installation.html 需要在IDEA中安装 Vue.js 插件

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

  </head>
  <body>
    <!--
    1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div
    2. 因为div更加适合做布局
    3. id 不是必须为app , 是程序员指定,一般我们就使用app
    -->
    <div id="app">
      <!--
      1. {{message}} : 插值表达式
      2. message 就是从model的data数据池来设置
      3. 当我们的代码执行时，会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换, 如果没有匹配上, 就是输出空
      -->
      <h1>欢迎你{{message}}--{{name}}</h1>

    </div>

    <!--引入vue.js-->
    <script src="vue.js"></script>
    <script>
      //创建 Vue对象
      /**
     * 1. 创建Vue对象实例
     * 2. 我们在控制台输出vm对象，看看该对象的结构！(data/listeners)
     */
      let vm = new Vue({
        el: "#app",//创建的vue实例挂载到 id=app的div
        data: {//data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
          message: "Hello-Vue!",
          name:"LiAng"
        }
      })
      console.log("vm=>", vm);
      console.log(vm._data.message);
      console.log(vm._data.name);
      console.log(vm.name);
      console.log(vm.message);
    </script>
  </body>
</html>

Vue 数据绑定机制

通过查看浏览器的控制台, 可以分析 Vue 数据绑定机制/MVVM
上面这个 debug 方式, 必须掌握

注意事项和使用细节

注意代码顺序，要求 div 在前，script 在后，否则无法绑定数据
从案例可以体会声明式渲染：Vue.js 采用简洁的模板语法来声明式地将数据渲染进DOM 的系统，做到数据和显示分离
Vue 没有繁琐的 DOM 操作，如果使用 jQuery，我们需要先找到 div 节点，获取到 DOM对象，然后进行节点操作, 显然 Vue 更加简洁