vue快速入门

基础

• 创建HTML界面，引用Vue.js文件

  <script src="/vue.js"> </script>

• 编写视图

  <!-- Vue.js 的挂载点，一个普通的 div 元素 -->
  <div id="app">
    <!-- 使用 Vue 的数据绑定功能来显示 message 数据 -->
    <h1>{{ message }}</h1>
    <!-- 另一个数据动态样式绑定在属性上 -->
    <p :style="abc" @click="myMethod_name()"></p>
    <!-- :style / v-bind:style  @click / v-on:click-->
  </div>

• {{type}} : 插值表达式

  • 变量

  • 三元运算符

  • 函数调用

  • 算数运算

• 在JS代码区域,创建Vue核心对象,定义数据模型

  <!-- 引入 Vue.js 的库文件 -->
  <!-- 请确保引入的是 Vue 的正确版本，且路径正确 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- 或者如果你正在使用 Vue 3，可以引入 Vue 3 的 CDN 链接 -->
  <!-- <script src="https://unpkg.com/vue@next"></script> -->
  ​
  <script>
  // 创建一个新的 Vue 实例
  new Vue({
    // 指定 Vue 实例挂载到的 DOM 元素，使用 '#app' 选择器找到 id 为 app 的元素
    el: "#app",
    
    // 定义 Vue 实例的数据对象
    data: {
      // 这里的 message 和 abc 是响应式数据
      // 它们可以在模板中被绑定和显示
      message: "Hello Vue!",  // 初始值 "Hello Vue!"
      abc: "abc"               // 初始值 "abc"
    }
    
    // 在这里可以添加更多的选项，如 methods, computed, watch, filters 等
     methods: {
       // 方法可以在实例的模板中被调用
      myMethod_name: function() {
         // ...
       }
     },
    
    // 生命周期钩子，可以在不同的生命周期阶段执行代码
    // created: function() {
    //   // 实例被创建之后，数据观测和事件/侦听器的配置之前被调用
    // },
    
    // mounted: function() {
    //   // 实例被挂载后调用，此时可以访问到 DOM 元素
    // },
    
    // 等等...
  });
  </script>

常见指令

v-bind/v-model

<script>
    new Vue({
        el: "#app"
        data:{
            url:"https://www.baidu.com"
        }
    })
    
</script>

• v-bind:为HTML标签绑定属性值

  • <a v-bind:href="url">test</a>
    <a :href="url">test</a>

  • 如果"url"改变那么 href 也会跟着改变

• v-model : 双向数据绑定

  • <input type="text" v-model="url"/>

  • 如果<input> 这个输入框改变了那 url 也会跟着改变, 同理 url 的改变也会也影响<input>这个输入框

v-on

• 为HTML标签绑定事件

• <script>
      new Vue({
          el:"#app",
          data:{
              log:"我被点击了"
          }，
          methods:{
              myMethod_name:function(){
                  alert(this.log);
                  console.log(this.log);
              }
          }
          
      })
  </script>
  ​
  ​
  <input type="button" value="按钮" v-on:click="myMethod_name()">
  <input type="button" value="按钮" @click="myMethod_name()">

v-if / v-else-if / v-else / v-show

<script> new Vue({ el:"#app", data:{ age; } methods:{...}, }) </script>

• v-if

• 不满足条件的标签不进行渲染

• <span v-if="age <= 18">未成年</span>
  <span v-else>成年</span>

• v-show

• 不同的是v-show是将不满足条件的标签设置为 display="none";

• <span v-show="age <=18">未成年</span>
  <span v-show="age>18">成年</span>

v-for

• v-for:列表渲染，遍历容器的元素或者对象的属性

• <div id="app">
      <table>
          <tr>
              <td>addrs</td>
              <td v-for="(addr, index) in addrs" :key="index">{{ addr }}</td>
          </tr>
      </table>
  </div>
  ​
  <script>
      new Vue({
          el: "#app",
          data: {
              addrs: ['301', '302', '303', '304']
          }
      });
  </script>
  ​

Vue的生命周期

生命周期选项 | Vue.js (vuejs.org)

生命周期示意图 —生命周期钩子 | Vue.js (vuejs.org)