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.
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class { display: list-item; }
var obj = { "courses": ["php", "javascript", "ajax"] }; var jsonstr = JSON.stringify(obj); alert(jsonstr); // {"courses":["php","javascript","ajax"]}
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>'; $dochtml = new DOMDocument(); $dochtml->loadHTML($strhtml); $elm = $dochtml->getElementById("dv1"); echo $elm->nodeValue; // CoursesWeb.net