刘刚刚的个人博客

1.vue基础——开始使用


vue 的使用让前端的开发更加的便捷。内容:基础指令 ,VUE对象的属性功能 ,事件冒泡

vue

vue与jq的比较:

​ jq 擅长处理特效,vue擅长处理数据。如果数据处理较多则选vue,如果特效多则jq,如果都多则一块使用。

vue 使用注意事项

1. 一个html页面中,可以存在多个vue实例对象,但是实例对象的变量名强烈建议唯一,而且每个vue对象负责一个特效功能
 2. js 中虽有的变量和语法都对大小写敏感
 3. 实例话vue对象的代码写在body后边,防止出现绑定元素不存在的情况。写到body 前边时,需要写 window.onload()

vm对象时刻保证页面中的数据与data中的一致

在控制台中,打印vm对象,以$开头的为初始化时的属性。模型中的数据会作为vm对象的属性存在(不带$)

vue的使用

  1. vue的使用要从创建Vue对象开始

    var vm = new Vue();
  2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象至少有两个属性(el'data)成员

    var vm = new Vue({
          el:"#app",
          data: {
              数据变量:"变量值",
           },
    });

    el:设置vue可以操作的html内容范围,值一般就是css的id选择器。
    data: 保存vue.js中要显示到html页面的数据。

  3. vue.js要控制器的内容范围,必须先通过id来设置。

      <div id="app">
          <h1>{{message}}</h1>
          <p>{{message}}</p>
      </div>

数据的显示

  1. 在双标签中显示纯文本内容要通过{{ }}来完成数据显示,双括号中还可以支持js表达式和符合js语法的代码,例如函数调用
  2. 如果要输出data里面的数据作为表单元素的值,需要使用vue.js提供的元素属性v-model

     <input v-model="name">     

    使用v-model把data里面的数据显示到表单元素以后,一旦用户修改表单元素的值,则data里面对应数据的值也会随之发生改变,甚至,页面中凡是使用了这个数据都会发生变化。

  3. 如果想输出html,则需要使用 v-html 指令

     <div class="app">
            <span v-html="img"></span>
    </div>
    <script>
           let vm = new Vue({
               el:".app",
               data:{
                   img:'<img src="images/shendan.png">',
               }
           })
    </script>    

常用指令

  1. v-if v-model v-for
  2. 两种写法的指令

    vue1.xvue2.x
    {{ 普通文本 }}{{普通文本}}
    v-bind:属性名:属性名
    v-on:事件名@时间名
  3. 详解

    1. 操作属性
    <标签名 :标签属性="data属性"></标签名>
    1. 事件绑定

      1. 使用@事件名来进行事件的绑定
        语法:
           <h1 @click="num++">{{num}}</h1>
      1. 绑定的事件的事件名,全部都是js的事件名:
        @submit ---> onsubmit
        @focus ---> onfocus
        @blur ---> onblur (失去焦点)
        @click ---> onclick
        ....
    2. 操作样式

      • 通过class

        <style>
            .c_red{
               color:red; 
            }
            .bg_blue{
                background:blue
            }
            
        </style>
        <div class="box" :class="{c_red:true,.bg_blue:true}">2222</div>
        <div class="box" :class="myclass">2222</div>
        data:{
                  myclass:{
                    c-red:true,
                    bg-blue:false,
              
                 }
                }
      • 通过style(日常开发中尽量不要使用style 修改样式)

        <!--        //方式一:-->
                <div class="box" :style="{color:color1,background:bg1}">333</div>
        <!--        //方式二:-->
                <div class="box" :style="style2">2222</div>
        <!--        //方式三:-->
                <div class="box" :style="[style2,style3]">2222</div>
        data:{
             myclass:{
                 color1:'red',
                  bg1:'gray',
                  style2:{
                     color:'orange'
                   },
                   style3:{
                        background:'green'
                  }      
              }     
        }

条件渲染

  1. v-show

    <div v-show="true"> my name is shuta </div>

    v-show 如果为false,会给元素增加 display:none 的属性。

  2. v-if...v-else-if...v-else

    v-if 如果结果为false,则会将元素从dom中移除

循环

v-for

​ v-for可以将对象或者数组循环到页面中

  • 数据为数组时

    1. 写法一

      <div v-for="book in book_list"> </div>

      book代表数组中的每一个元素

    2. 写法二

      <div v-for="(book,index) in book_list"> </div>

      index 代表数组的下标

  • 数据为对象时

    1. 写法一

      <div v-for="book in book_list"> </div>

      book代表对象的每个值

    2. 写法二

      <div v-for="attr,book in book_list"> </div>

      attr 代表对象的每个下标

Vue对象提供的属性功能

过滤器

  1. 全局过滤器

    Vue.filter("format", function(money){
          return money.toFixed(2)+'元'
    })
  2. 局部过滤器

    var vm = new Vue({
      el:"#app",
      data:{},
      filters:{
       format(money){
            return money.toFixed(2)+'元'
        }
      }
    });

    局部过滤器只能在当前vm对象中使用,如果过滤器名字相同则优先使用局部过滤器

计算属性

computed:{   //计算属性:里面的函数都必须有返回值
                price2: function(){
                    return this.price + 1 +'元'
                }
            }

会自动根据其他的属性计算生成 price2

属性侦听

watch:{
                num:function(newval,oldval){
                    //num发生变化的时候,要执行的代码
                    console.log("num已经发生了变化!");
                }
            }

属性侦听过程中,会传入两个参数,一个时旧值,一个时新值

生命周期

  1. beforeCreate
    vm对象创建前
  2. created() 常用
    vm对象创建后
  3. beforeMount
    数据渲染前,此时html还是模板形式
  4. mounted 常用
    数据渲染后,此时已经生成包含数据的html
  5. beforeUpdate
    模板中数据更新前,此时,js中的数据已经改动,但是模板中的数据还没更新
  6. updated

模板中数据更新后

  1. beforeDestroy

    当vm 对象被销毁时执行,可以使用 vm.$destroy()模拟销毁

  2. destroyed

阻止事件冒泡

jq中使用return false.在js中可以这么写

function(event){
    event.stopPropagation
}

js中可以使用事件委托方式提高性能:

var ul = documeng.getElementById('app')
ul.onclick = function(event){
    var self = event.target
    console.log(self.innerHtml)
}

在vue中可以使用@click.stop阻止事件冒泡

<div @click="show('点击了1')"> 111
    <div @click.stop="show('点击了2')"> 22</div>
</div>

使用@click.prevent 阻止页面刷新,一般在ajax提交中使用

<a href="baidu.com" @click.prevent="show('点击了1')" > 111 </a>

@click.stop.click 可以一块使用

我的名片

昵称:shuta

职业:后台开发(php)

邮箱:648949076@qq.com

站点信息

建站时间: 2020/2/19
网站程序: ANTD PRO VUE + TP6.0
晋ICP备18007778号