Fix styleguide - part 2 (#2161)

* fix: fixed a rule for prop casing

* fix: added CAPI example to simple expressions

* chore: added CAPI examples for computed

* fix: made notes about consistency

Author: NataliaTepluhina

src/style-guide/rules-strongly-recommended.md

@@ -529,36 +529,72 @@ components/
 
 ## Prop name casing {#prop-name-casing}
 
-**Prop names should always use camelCase during declaration, but kebab-case in templates and [JSX](/guide/extras/render-function.html#jsx-tsx).**
-
-We're simply following the conventions of each language. Within JavaScript, camelCase is more natural. Within HTML, kebab-case is.
+**Prop names should always use camelCase during declaration. When used inside in-DOM templates, props should be kebab-cased. Single-File Components templates and [JSX](/guide/extras/render-function.html#jsx-tsx) can use either kebab-case or camelCase props. Casing should be consistent - if you choose to use camelCased props, make sure you don't use kebab-cased ones in your application**
 
 <div class="style-example style-example-bad">
 <h3>Bad</h3>
 
+<div class="options-api">
+
 ```js
 props: {
   'greeting-text': String
 }
 ```
 
+</div>
+
+<div class="composition-api">
+
+```js
+const props = defineProps({
+  'greeting-text': String
+})
+```
+
+</div>
+
 ```vue-html
-<WelcomeMessage greetingText="hi"/>
+// for in-DOM templates
+<welcome-message greetingText="hi"></welcome-message>
 ```
 
 </div>
 
 <div class="style-example style-example-good">
 <h3>Good</h3>
 
+<div class="options-api">
+
 ```js
 props: {
   greetingText: String
 }
 ```
 
+</div>
+
+<div class="composition-api">
+
+```js
+const props = defineProps({
+  greetingText: String
+})
+```
+
+</div>
+
 ```vue-html
+// for SFC - please make sure your casing is consistent throughout the project
+// you can use either convention but we don't recommend mixing two different casing styles
 <WelcomeMessage greeting-text="hi"/>
+// or
+<WelcomeMessage greetingText="hi"/>
+```
+
+```vue-html
+// for in-DOM templates
+<welcome-message greeting-text="hi"></welcome-message>
 ```
 
 </div>
@@ -629,6 +665,8 @@ Complex expressions in your templates make them less declarative. We should stri
 {{ normalizedFullName }}
 ```
 
+<div class="options-api">
+
 ```js
 // The complex expression has been moved to a computed property
 computed: {
@@ -642,6 +680,22 @@ computed: {
 
 </div>
 
+<div class="composition-api">
+
+```js
+// The complex expression has been moved to a computed property
+const normalizedFullName = computed(() =>
+  fullName.value
+    .split(' ')
+    .map((word) => word[0].toUpperCase() + word.slice(1))
+    .join(' ')
+)
+```
+
+</div>
+
+</div>
+
 ## Simple computed properties {#simple-computed-properties}
 
 **Complex computed properties should be split into as many simpler properties as possible.**
@@ -667,6 +721,8 @@ Simpler, well-named computed properties are:
 <div class="style-example style-example-bad">
 <h3>Bad</h3>
 
+<div class="options-api">
+
 ```js
 computed: {
   price() {
@@ -681,9 +737,24 @@ computed: {
 
 </div>
 
+<div class="composition-api">
+
+```js
+const price = computed(() => {
+  const basePrice = manufactureCost.value / (1 - profitMargin.value)
+  return basePrice - basePrice * (discountPercent.value || 0)
+})
+```
+
+</div>
+
+</div>
+
 <div class="style-example style-example-good">
 <h3>Good</h3>
 
+<div class="options-api">
+
 ```js
 computed: {
   basePrice() {
@@ -702,6 +773,24 @@ computed: {
 
 </div>
 
+<div class="composition-api">
+
+```js
+const basePrice = computed(
+  () => manufactureCost.value / (1 - profitMargin.value)
+)
+
+const discount = computed(
+  () => basePrice.value * (discountPercent.value || 0)
+)
+
+const finalPrice = compued(() => basePrice.value - discount.value)
+```
+
+</div>
+
+</div>
+
 ## Quoted attribute values {#quoted-attribute-values}
 
 **Non-empty HTML attribute values should always be inside quotes (single or double, whichever is not used in JS).**