chore: updated TODOs with SFC link

Author: NataliaTepluhina

src/api/application-api.md

@@ -138,7 +138,7 @@ app.directive('focus', {
 
 #### vnode
 
-A blueprint of the real DOM element received as el argument above. See the [VNode API](TODO) for full details.
+A blueprint of the real DOM element received as el argument above.
 
 #### prevNode
 

src/api/basic-reactivity.md

@@ -1,6 +1,6 @@
 # Basic Reactivity APIs
 
-> This section uses [single-file component](TODO: SFC) syntax for code examples
+> This section uses [single-file component](../guide/single-file-component.html) syntax for code examples
 
 ## `reactive`
 

src/api/composition-api.md

@@ -1,6 +1,6 @@
 # Composition API
 
-> This section uses [single-file component](TODO: SFC) syntax for code examples
+> This section uses [single-file component](../guide/single-file-component.html) syntax for code examples
 
 ## `setup`
 
@@ -104,24 +104,24 @@ If `setup` returns an object, the properties on the object will be merged into t
 </template>
 
 <script>
-import { ref, reactive } from 'vue'
-
-export default {
-  setup() {
-    const count = ref(0)
-    const object = reactive({ foo: 'bar' })
-
-    // expose to template
-    return {
-      count,
-      object
+  import { ref, reactive } from 'vue'
+
+  export default {
+    setup() {
+      const count = ref(0)
+      const object = reactive({ foo: 'bar' })
+
+      // expose to template
+      return {
+        count,
+        object
+      }
     }
   }
-}
 </script>
 ```
 
-Note that [refs](./refs-api.html#ref) returned from `setup` are [automatically unwrapped](./refs-api.html#access-in-templates ) when accessed in the template so you shouldn't use `.value` in templates.
+Note that [refs](./refs-api.html#ref) returned from `setup` are [automatically unwrapped](./refs-api.html#access-in-templates) when accessed in the template so you shouldn't use `.value` in templates.
 
 ### Usage with Render Functions
 
@@ -299,22 +299,22 @@ When using the Composition API, the concept of [reactive refs](./refs-api.html#r
 </template>
 
 <script>
-import { ref, onMounted } from 'vue'
+  import { ref, onMounted } from 'vue'
 
-export default {
-  setup() {
-    const root = ref(null)
+  export default {
+    setup() {
+      const root = ref(null)
 
-    onMounted(() => {
-      // the DOM element will be assigned to the ref after initial render
-      console.log(root.value) // <div/>
-    })
+      onMounted(() => {
+        // the DOM element will be assigned to the ref after initial render
+        console.log(root.value) // <div/>
+      })
 
-    return {
-      root
+      return {
+        root
+      }
     }
   }
-}
 </script>
 ```
 
@@ -352,23 +352,23 @@ Composition API template refs do not have special handling when used inside `v-f
 </template>
 
 <script>
-import { ref, reactive, onBeforeUpdate } from 'vue'
+  import { ref, reactive, onBeforeUpdate } from 'vue'
 
-export default {
-  setup() {
-    const list = reactive([1, 2, 3])
-    const divs = ref([])
+  export default {
+    setup() {
+      const list = reactive([1, 2, 3])
+      const divs = ref([])
 
-    // make sure to reset the refs before each update
-    onBeforeUpdate(() => {
-      divs.value = []
-    })
+      // make sure to reset the refs before each update
+      onBeforeUpdate(() => {
+        divs.value = []
+      })
 
-    return {
-      list,
-      divs
+      return {
+        list,
+        divs
+      }
     }
   }
-}
 </script>
 ```

src/api/computed-watch-api.md

@@ -1,6 +1,6 @@
 # Computed and watch
 
-> This section uses [single-file component](TODO: SFC) syntax for code examples
+> This section uses [single-file component](../guide/single-file-component.html) syntax for code examples
 
 ## `computed`
 
@@ -218,7 +218,7 @@ type StopHandle = () => void
 
 ## `watch`
 
-The `watch` API is the exact equivalent of the Options API [this.$watch](./instance-methods.html#watch) (and the corresponding [watch](./options-data.html#watch) option). `watch` requires watching a specific data source and applies side effects in a separate callback function. It also is lazy by default - i.e. the callback is only called when the watched source has changed.
+The `watch` API is the exact equivalent of the Options API [this.\$watch](./instance-methods.html#watch) (and the corresponding [watch](./options-data.html#watch) option). `watch` requires watching a specific data source and applies side effects in a separate callback function. It also is lazy by default - i.e. the callback is only called when the watched source has changed.
 
 - Compared to [watchEffect](#watcheffect), `watch` allows us to:
 

src/api/directives.md

@@ -30,7 +30,7 @@
   Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use `v-html` on trusted content and **never** on user-provided content.
   :::
 
-  In [single-file components](TODO:../guide/single-file-components.html), `scoped` styles will not apply to content inside `v-html`, because that HTML is not processed by Vue's template compiler. If you want to target `v-html` content with scoped CSS, you can instead use [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules.html) or an additional, global `<style>` element with a manual scoping strategy such as BEM.
+  In [single-file components](../guide/single-file-component.html), `scoped` styles will not apply to content inside `v-html`, because that HTML is not processed by Vue's template compiler. If you want to target `v-html` content with scoped CSS, you can instead use [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules.html) or an additional, global `<style>` element with a manual scoping strategy such as BEM.
 
 - **Example:**
 

src/api/refs-api.md

@@ -1,6 +1,6 @@
 # Refs
 
-> This section uses [single-file component](TODO: SFC) syntax for code examples
+> This section uses [single-file component](../guide/single-file-component.html) syntax for code examples
 
 ## `ref`
 
@@ -29,15 +29,15 @@ When a ref is returned as a property on the render context (the object returned
 </template>
 
 <script>
-import { ref } from 'vue'
-export default {
-  setup() {
-    const count = ref(0)
-    return {
-      count
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const count = ref(0)
+      return {
+        count
+      }
     }
   }
-}
 </script>
 ```
 
@@ -52,19 +52,19 @@ However, if we decide to change the inline event handler on button click to the
 </template>
 
 <script>
-import { ref } from 'vue'
-export default {
-  setup() {
-    const count = ref(0)
-    function increment() {
-      count.value++ // ref is not unwrapped outside the template
-    }
-    return {
-      count,
-      increment
+  import { ref } from 'vue'
+  export default {
+    setup() {
+      const count = ref(0)
+      function increment() {
+        count.value++ // ref is not unwrapped outside the template
+      }
+      return {
+        count,
+        increment
+      }
     }
   }
-}
 </script>
 ```
 

src/guide/component-basics.md

@@ -432,7 +432,7 @@ app.component('blog-post', {
 It should be noted that **these limitations does _not_ apply if you are using string templates from one of the following sources**:
 
 - String templates (e.g. `template: '...'`)
-- [Single-file (`.vue`) components](TODO:single-file-components.html)
+- [Single-file (`.vue`) components](../guide/single-file-component.html)
 - `<script type="text/x-template">`
 
 That's all you need to know about DOM template parsing caveats for now - and actually, the end of Vue's _Essentials_. Congratulations! There's still more to learn, but first, we recommend taking a break to play with Vue yourself and build something fun.

src/guide/component-props.md

@@ -198,10 +198,10 @@ app.component('my-component', {
     propG: {
       type: Function,
       // Unlike object or array default, this is not a factory function - this is a function to serve as a default value
-      default: function () {
+      default: function() {
         return 'Default function'
-      },
-    },
+      }
+    }
   }
 })
 ```
@@ -283,7 +283,7 @@ If you do **not** want the a component to automatically inherit attributes, you
 There are two common scenarios when attribute inheritance needs to be disabled:
 
 1. When attributes need to be applied to other elements besides the root node
-1. When a component has multiple root nodes (i.e., a [fragment](TODO:fragment.md))
+1. When a component has multiple root nodes
 
 By setting the `inheritAttrs` option to `false`, this gives you access to the component's `$attrs` property, which includes all attributes not included to component `props` and `emits` properties (e.g., `class`, `style`, `v-on` listeners, etc.).
 

src/guide/component-registration.md

@@ -16,7 +16,7 @@ app.component('my-component-name', {
 
 The component's name is the first argument of `app.component`. In the example above, the component's name is "my-component-name".
 
-The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](TODO), we strongly recommend following the [W3C rules](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) for custom tag names:
+The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](../guide/single-file-component.html), we strongly recommend following the [W3C rules](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) for custom tag names:
 
 1. All lowercase
 2. Contains a hyphen (i.e., has multiple words connected with the hyphen symbol)

src/guide/installation.md

@@ -29,7 +29,7 @@ version** in your published site, replacing `vue.js` with `vue.min.js`. This is
 
 > Currently not available for Vue 3
 
-NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as [Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). Vue also provides accompanying tools for authoring [Single File Components](TODO:single-file-components.html).
+NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as [Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). Vue also provides accompanying tools for authoring [Single File Components](../guide/single-file-component.html).
 
 ```bash
 # latest stable

src/guide/introduction.md

@@ -2,7 +2,7 @@
 
 ## What is Vue.js?
 
-Vue (pronounced /vjuː/, like **view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](TODO:single-file-components.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#components--libraries).
+Vue (pronounced /vjuː/, like **view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](../guide/single-file-component.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#components--libraries).
 
 If you’d like to learn more about Vue before diving in, we <a id="modal-player"  href="#">created a video</a> walking through the core principles and a sample project.
 

src/guide/mixins.md

@@ -219,4 +219,4 @@ In Vue 2, mixins were the primary tool to abstract parts of component logic into
 
 - Reusability is limited: we cannot pass any parameters to the mixin to change its logic which reduces their flexibility in terms of abstracting logic
 
-To address these issues, we added a new way to organize code by logical concerns: the [Composition API](TODO).
+To address these issues, we added a new way to organize code by logical concerns: the [Composition API](composition-api-introduction.html).