lucidum v1.1.0

Lucidum

Examples can be found in 'examples' folder

Basic instance

let vm = new Lucidum({
  data: {
    mynum: 3,
    user: {
      name: "chris",
      age: 16
    },
    foodList: ["Apple", "Bread", "Cookie"],
    newFoodItem: "Grapes"
  },
  methods: {
    getCurrentDate() {
      return new Date().getFullYear();
    }
  },
  watch: [
    {
      prop: "user.name",
      fn(val, oldVal) {
        console.log(`property 'user.name' changed from ${oldVal} to ${val}`);
      }
    }
  ],
  onCreate() {
    console.log("Lucidum instance loaded");
  },
  el: "#app"
});

Supported features

Property and function interpolation

<h1>Hello {{user.name}}</h1>
<p>The date is {{getCurrentDate(())}}</p>

Property binding

<input bindval="user.name"></input>

Event binding

<button @click="user.age++"></button>

Conditional rendering

<p showif="user.name === 'chris'">Your name is chris</p>
<p showelse>Your name is not chris</p>

Dynamic lists

<ul>
  <li loopfor="(index, food) in foodList">
    {{index}}: {{food}}
  </li>
</ul>

Filters

filters: {
  reverse(s) {
    return s.split("").reverse().join("");
  }
}

Property watching

watch: [
  {
    prop: "user.name",
    fn(val, oldVal) {
      console.log(`property 'user.name' changed from ${oldVal} to ${val}`);
    }
  }
]

Life cycle hooks

onCreate() {
  console.log("Lucidum instance loaded");
}