vue-is

2018-01-17

vue-is

在 vue 中，当使用 DOM 作为模板时，你会受到 HTML 的一些限制。像 ul 、ol、table、select 这样的元素里如果写入自定义组件将被当做无效内容，例如：

1
2
3

<table>
  <my-row>...</my-row>
</table>

 <input v-model='newTodo' @keyup.enter='addNewdo' placeholder ='Add  a todo-list-example'/>
 <li is='todo-item' v-for='(todo,index) in todos' :key='index' :title='todo.title' @remove='move'></li>
 new Vue({
     el:'#is',
     data:{
	newTodo:'',
		todos: [
	    {title:'Do the dishes' },
	    {title: 'Take out the trash',},
	    {title: 'Mow the lawn' }
		]
},
      components:{
	'todo-item':{
		props:['title'],
		template:`<li>
     {{ title }}
     <button @click="$emit('remove')">X</button>
   	</li>`
	},
       methods:{
	addNewdo(){
		/*在 vue 中访问任何数据都要在前面加 this ，否则会报错*/
		this.todos.push({title:this.newTodo});
		this.newTodo='';
	},
       move(){
		 return this.todos.splice(this.todos.index,1);
	}
}
 })

另外附上一个axios的用法

axios.all([
      axios.get('https://api.github.com/users/mzabriskie'),
      axios.get('https://api.github.com/users/mzabriskie/orgs')
    ]).then(axios.spread(function (user, orgs) {
      document.getElementById('useravatar').src = user.data.avatar_url;
      document.getElementById('username').innerHTML = user.data.name;
      document.getElementById('orgs').innerHTML = orgs.data.map(function (org) {
        return (
          '<li class="row">' +
            '<img src="' + org.avatar_url + '" class="col-md-1"/>' +
            '<div class="col-md-3">' +
              '<strong>' + org.login + '</strong>' +
            '</div>' +
          '</li>'
        );
      }).join('');
    }));