vue使用

Posted 2020-11-19 kw28188151

本节目标：

          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，生命周期函数

这个比较简单