vue学习笔记

1.v-for循环

<ul>

<li v-for="item in list">

{{item}}

</li>

<ul>

2.绑定属性v-binf:title:"title";绑定html v-html="";绑定数据 v-text="";

3.绑定style

<ul>

<li v-for="(item,key) in list" :class="{'red':key==0}">

{{item}}

</li>

</ul>

绑定style

<div class="box" v-bind:style="{width:boxWidth+'px'}">

我是div

</div>

//mvvm：双向数据绑定，必须在表单里面使用

<button v-on:click="getMsg()">提交</button>

export default{

data () { /* 业务逻辑中获取的数据*/

return{

msg:'123'

}

},

methods:{ /* 放方法的地方*/

getMsg(){

alert(this.msg);

}

}

}

4.ref:获取dom元素

vue钩子函数、组件

import life from './life.vue'组件引用

components:{

'v-life':life

},

<v-life></v-life>

5.vue请求之vue-recource

//安装recource

//npm install vue-recource --save //save安装到配置文件里package.json

//引用在main.js

import VueResource from 'vue-resource'

Vue.use(VueResource);

//自定义一个事件。

getData(){

var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

this.$http.get(api).then(function(data){

this.list =data.body.result;

},function(err){

console.log(err);

})

}

6.父组件像子组件传值

<v-life :title="title"></v-life>父组件绑定元素

子组件props:['title']

父组件主动获取子组件的数据方法

1.调用子组件的时候定义一个ref

<v-header ref="header"></v-header>

2.在父组件里通过

this.$refs.header.属性

类似获取dom；

vue路由配置

1.安装

npm install vue-router --save

2.引入并Vue.usee(VueRouter) ----main.js

import VueRouter from 'vue-router'

Vue,use(VueRouter)

3.配置路由

1.创建组件 引入组件

2.const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ]

3.实例化

const router = new VueRouter({ routes // (缩写) 相当于 routes: routes })

4.挂载

new Vue({

el:'#app',

router,

render:h=>h(app)

})

5. <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view>

//任务管理demo

 <template>

<div id="app" >

<input type="text" v-model="todo"/>

<button @click="doAdd()">+增加</button>

<h2>进行中</h2>

<ul>

<li v-for="(item,key) in list" v-if="!item.checked">

<input type="checkbox" v-model="item.checked" @change="saveList()"/>{{item}}---<button @click="remove(key)">删除</button>

</li>

</ul>

<h2>已完成</h2>

<ul>

<li v-for="(item,key) in list" v-if="item.checked">

<input type="checkbox" v-model="item.checked" @change="saveList()"/>{{item}}---<button @click="remove(key)">删除</button>

</li>

</ul>

</div>

</template>

<script>

export default{

data(){

return{

todo:'',

list:[]

}

},

methods:{

doAdd(){

this.list.push({

title:this.todo,

checked:false

});

this.todo='';

localStorage.setItem('list',JSON.stringify(this.list));

},

remove(key){

this.list.splice(key,1);

localStorage.setItem('list',JSON.stringify(this.list));

},

saveList(){

localStorage.setItem('list', JSON.stringify(this.list))

}

},

mounted(){

var list=JSON.parse(localStorage.getItem('list'));

if(list){

this.list=list;

}

}

}

</script>

<style>

</style>

转载于:https://juejin.im/post/5b2710d7f265da599854b302