Vue学习笔记

目录

一、安装

二、Vue实例结构

三、

1、条件 v-if

2、循环 v-for

3、处理用户输入 

4、数据与方法

5、生命周期钩子

---

一、安装

用 <script> 标签引入，Vue 会被注册为一个全局变量。

# CDN

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

二、Vue实例结构

包括视图+脚本

视图中有div标签，声明 {{变量}}

脚本<script>，包含js。

创建实例化对象。对象包含属性：el元素  data数据（注册变量并初始化赋值）

    <!--声明渲染-->
    <!--视图标签-->
    <div id="app">
    <!--变量-->
      {{message}}
    </div>

    <!--脚本标签-->
    <script>
    <!--全局变量Vue、对象app、属性el data-->
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!"
        }
      });
    </script>

三、实例结构

1、条件 v-if

2、循环 v-for

3、处理用户输入 

v-on：事件监听器,通过它调用在 Vue 实例中定义的方法
v-model:实现表单输入和应用状态之间的双向绑定
v-bind 指令将待办项传到循环输出的每个组件中

4、数据与方法

响应式系统：

实例创建时，data中的property是响应式的 。数据改变时，视图重新渲染，若添加新的property 不会触发视图更新。

例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

属性与方法：某些 property 与方法有前缀 $，以便与用户定义的 property 区分开来。可以在 API 参考中查阅到完整的实例 property 和方法的列表。

5、生命周期钩子

 created 钩子可以用来在一个实例被创建之后执行代码。还有如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

不要在选项 property 或回调上使用箭头函数，比如 
created: () => console.log(this.a) 或 
vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 
Uncaught TypeError: Cannot read property of undefined 或 
Uncaught TypeError: this.myMethod is not a function 之类的错误。

生命周期图示

四、模板语法