Every Vue application starts by creating a new Vue instance with the new Vue()
syntax; passing an options object:
var vm = new Vue({ // options })
data
and el
.
<div id='app'> <h1>{{ title }}</h1> </div> <script> var vue_ob = new Vue({ el: '#app', data: {title: 'Vue Tutorial'} }) </script>
var data = { a: 1 } // Our data object // The object is added to a Vue instance var vm = new Vue({ data: data }) // Setting the property on the instance // also affects the original data vm.a = 2; console.log(data.a); // 2 // ... and vice-versa data.a = 3; console.log(vm.a); // 3
var data ={ a:1, b:'', ar:[] }
data
properties, Vue instances expose a number of useful instance properties and methods. These are prefixed with $ to differentiate them from user-defined properties.var data = { a: 12 } // Our data object // The object is added to a Vue instance var vm = new Vue({ data: data }) console.log(vm.$data); // { a: 12 } // $watch is an instance method vm.$watch('a', (newValue, oldValue)=>{ // This callback will be called when vm.a changes console.log('old-value:'+oldValue, 'new-value:'+newValue); }) //changing the value of vm.a, it will triger vm.$match() vm.a = 8;
methods:
properties.
var vm = new Vue({ methods:{ methodName:function(ev){ //code.. } } })Example, when click on a button it calls a custom method defined in Vue:
<div id='app'> <div>{{ str }}</div> <button @click='newStr'>Click</button> </div> <script> var vm = new Vue({ el: '#app', data: {str: 'Be Yourself.'}, methods:{ newStr:function(ev){ this.str ='Love the Life'; } } }) </script>
created
hook can be used to run code after an instance is created:
var vm = new Vue({ data: { a: 1 }, created: function(){ // `this` points to the vm instance console.log('a is: ' + this.a) } }) //Results in console: a is: 1
mounted
, updated
, and destroyed
. All lifecycle hooks are called with their this
context.
<input type="checkbox" name="a_name" value="value" checked="checked" />
#id { background:url("path_to_image.png"); background-size:contain; background-repeat:no-repeat; }
var rest8_7 = 8 % 7; alert(rest8_7);
$nr = ceil(3.5); echo $nr; // 4