Sauce

Sauce just change its template to Vue.

Usage

Install

• add below at the after </body>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://rawcdn.githack.com/SamanFekri/Sauce/master/lib/sauce.js"></script>

• you must define the name and the path of template in variable and then pass it to sauce

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://rawcdn.githack.com/SamanFekri/Sauce/master/lib/sauce.js"></script>
  <script>
    let sauces = [
      {name: 'ketchap', src: 'ketchap.sue'},
      {name: 'bold', src: 'bold.sue'}];
    new Sauce(sauces);
  </script>

• A sample template

  <id>app</id>
  <template>
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>
      <p>{{ first_name }} : {{ last_name_name }}</p>
  
      {{desc}}
      {{name}}
  </template>
  
  <data>
      data : {
      message: 'Hello Sue!'
      }
  </data>
  
  <other>
      methods: {
          reverseMessage: function () {
              this.message = this.message.split('').reverse().join('')
          }
      }
  </other>
  
  <style>
      p {
          color: red;
          font-size: 40px;
      }
  </style>

  • <template> is the html you want render in your code.
  • just add data part of vue js in <data> and add other parts to <other>.
  • <style> is css you want to apply on your template.

• you can find some samples in sample folder :)

How pass data

• You can pass data from attribute in html to vue like below:

  <ketchap data:name="Saman"></ketchap>

• You can pass data using the tags inside html

  <ketchap>
      <data:first-name>Saman</data:first-name>
      <data:last-name-name>Fekri</data:last-name-name>
      <data:desc>
          This is the description "Yoooooo"'hoooooooo'
      </data:desc>
  </ketchap>

Access to vue object

• all vue objects which have same component is on a array that's name is id of component.

  for example in above template you can access vue object array with ket[i] and i is the number of object.

• if you want to have a specific object id for your custom template you can specify id in your html:

    <ketchap id="my_ketchap"></ketchap>

  then you have access to that object with '_' + <element_id> in js, example id: _my_ketchap