vue使用（二）

本节目标：

          1.数据路径的三种方式
          2.{{}}和v-html的区别

1.绑定图片的路径

方法一：直接写路径

<img src="http://pic.baike.soso.com/p/20140109/20140109142534-188809525.jpg">

方法二：在data中写路径，在div中使用

<img v-bind:src="url">

然后在data中写路径

  data () {return {msg:'你好，我是啦啦啦!',url:'http://pic.baike.soso.com/p/20140109/20140109142534-188809525.jpg',}}

方法三：这个和方法二一样，变化的为红色标注部分

   <img :src="url">

2。使用{{}}和使用v-html的区别

使用{{}}的时候数据会原样输出，使用v-html的使用会将特殊字符进行解析成html，然后显示。

这种方式是将他们的数据直接输出，并没有达到我们想要的解析{{h}}<hr/>下面的方法可以解决问题<div v-html="h"></div>

3.绑定数据的第二种方法

 绑定数据的第二种方法是<div v-text="msg"> </div>

4.绑定样式

<hr/>绑定样式的使用<div v-bind:class="{'red':flag}">我是渣渣！</div>

也可以写成简单的形式，将v-bind:直接写成：

5.方法的调用

 （1）无参数的调用

<button v-on:click="getmsg()">我是按钮！</button>

对于这个注意下面的写法

methods:{getmsg(){/*alert('方法执行！');*/alert(this.msg);}

方法调用写在methods中。

 （2） 有参数方法的调用

<button @click="fun04('1111')">

fun04(val)
{alert(val);
}

6.动态值的绑定，就是数据只要发生变化，使用此变量值的地方都会发生变化。

{{msg}}只要数据发生改变，这里的值也会发生改变
<button v-on:click="setmsg()">我是改变</button>

methods的写法

setmsg(){/*alert('方法执行！');*/this.msg="我是渣渣！"}

7.ref获取值，并显示

<input type="text" ref="info"/>

获取值

this.$refs.info

显示值（这个使用到了上面的动态值绑定，只要值发生改变，启用的地方就会发生变化）

<div ref="box">我是；啦啦啦</div>

this.$refs.box.style.background='this.$refs.info.value';

设置背景色

this.$refs.box.style.background='red';

8.历史值的获取

我们有时候在页面上显示数据的时候，当我们刷新之后，数据就会消失，所以我们可以使用声明周期函数，将数据加入到声明周期中进行保存，在刷新之后，可以重新的显示数据

数据
 data () {return {todo:'dsfh',list:[],ok:true}}

methods:{doAdd(){this.list.push(this.todo);localStorage.setItem('list',JSON.stringify(this.list));},deelete(val){//在某个位置上删除数据this.list.splice(val,1);localStorage.setItem('list',JSON.stringify(this.list)) ； /*this.list.pop(val);*//*上面的两个方法是相同的 */}}

红色的是将值保存起来，当我们刷新出发声明周期方法，

mounted(){var list = JSON.parse(localStorage.getItem('list'));alert(list);if(list){
this.list = list;将数据设置回list中去}}

9.组件的使用

（1）创建一个组件

<template><!--所有的内容需要被div包含起来--><div id="home"><h2>这是一个组件</h2>{{msg}}</div>
</template>
<!--在组件中也是可以放入业务逻辑的-->
<script>
export default{data(){return{msg:'我是啦啦啦!'    }        }
}
</script>
<!--scoped表示局部作用域 -->
<style lang="scss" scoped>
</style>

（2）将组件引入

import Home from './component/Home.vue';

（3）将组件挂载

 components:{/*** 2.挂载组件*/'v-home':Home,'v-news':News}

（4）使用组件

<v-home></v-home>

10，生命周期函数

这个比较简单