您现在的位置是:首页 > 前端学习 > vue基础学习(一)

vue基础学习(一)

王递杰 2021年11月20日 前端学习

Vue:动态构建用户界面的渐进式js框架

官网:https://cn.vuejs.org/

 

Vue【模板语法】有2大类:

 1.插值语法:

    功能:用户解析标签体内容

    写法:{{ xxxx }} , xxxx会作为表达式去解析,且可以自动读取到data中的属性

 2.指令语法:

    功能:用于解析标签(标签属性、标签内容、绑定事件。。。)

    写法:v-bind:href="xxxx" 或简写为: :href="xxxx"

 

1.单项数据绑定(v-bind):数据只能从data流向页面

2.双向数据绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data

备注:

1.双向数据绑定一般都是针对表单类元素

2..v-model:value  可以简写为v-model,因为v-model默认搜集value值

 

data的两种写法:

1.对象式:非组件化编码时可以写成对象,也可以写函数 data :{msg:'hello'}

2.函数式:组件化编码必须使用函数式的data  例:data() { return { msg:'hello'}}

 

Vue数据绑定的原理

1. vue会监视data中所有层次对象的属性

2. 对象中的属性数据通过添加set方法来来实现监视

3. 数组中也实现了监视: 重写数组一系列更新元素的方法,做了两件事:

    1).调用原生对应的方法对数组进行处理

    2).去更新界面

 

Vue【数据代理】:

data

_data

 

数据代理底层实现使用 Object.defineProperty()

//模拟数据代理
let _data = {msg:"hello"}
let vm = {}
 
Object.defineProperty(vm,'msg',{
    set(value){
        _data.msg=value
    },
    get(){
         return _data.msg
    }
})

这样vm中就有msg对象,修改_data中的对象,vm中也会修改。反之也会修改

 

注意:data中的数据,不能使用this初始化赋值另外一个字段的值

data(){

msg:I am jack,

hello:this.msg

}

错误!!!

 

【事件处理】:

<button @click="show2($event,56)">调用show2</button>

methods:{
    show(event) {
         //event 指调用者的事件
        //event.target.innerText
    },
    show2(event,number) {
         //event 指调用者的事件
        //event.target.innerText
    },
}

【计算属性   

渲染:{{ fullName }}

//1.初次渲染会调用;2.依赖的属性改变时会调用,不变不调用,有缓存机制,因此效率更高

//computed 属性默认只有 getter (即只做读取),不过在需要时你也可以提供一个 setter

 

computed:{   // 简写(默认)(只有getter

   fullName : function() {

      return this.firstName + this.lastName

  }

}

//完整写法
computed:{
   fullName :{
        get(){
           return this.firstName + this.lastName
        },
       set(value){
          const arr = value.split('-')
          this.firstName=arr[0]
          this.lastName=arr[1]
       }
    }
}

【数据监视】:

watch

1.当被监视的属性变化时,回调函数自动调用,进行相关操作

2.属性必须存在,才能进行监视

3.监视的两种写法

  (1).new Vue时传入watch配置

  (2).通过vm.$watch监视

4.默认是浅层次的监视,对于对象里面的数据的变化无法监视到

 

computedwatch之间的区别:

1.只要是computed能完成的功能,watch都可以完成

2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作

 

data:{

    firstName:'',

    lastName:''

},

watch:{

    //watch中的firstName什么时候调用?data中的firstName被改变的时候调用

    firstName(newValue,oldValue) {

    },

    lastName() {

    }

}

 

//写法2

vm.$watch('firstName', function(nval, oval) {

    alert('firstName值的变化 :' + oval + ' 变为 ' + nval + '!');

});

 

深度监视(默认的监视不会监视到数组里面对象的变化,需要用到深度监视)

 data() {

    return {

      todos: [

        { id: '001', name: '抽烟', done: true },

        { id: '002', name: '喝酒', done: false },

        { id: '003', name: '烫头', done: true },

      ],

    }

  }

监视

  watch: {

    todos: {

      deep: true, // 开启深度监视,可以监视对象里面元素数据的变化

      handler(value) {

        localStorage.setItem('todos', JSON.stringify(value))

      },

    },

  }

 

【样式绑定】:

参考:https://www.runoob.com/vue2/vue-class-style.html

:class="myStyle"

:class="{ 'active' : isActive, 'text-danger' : hasError }"

渲染后:<div class="active text-danger"></div>

 

data: {

    isActive: true,

    hasError: true

}

 

【条件渲染】:

v-if:

适用于:切换频率很低的场景

特点:不展示的DOM节点直接被删除

 

v-show:

适用于:切换频率很高的场景

特点:不展示的DOM节点没有被删除,仅仅是使用display:none隐藏

 

循环语句:遍历数组、对象、字符串

v-for:

<li v-for="site in sites">{{ site.name }} </li>

 

【过滤器】:

//全局注册的过滤器
Vue.filter('dateFormater',function(value,str='YYYY-MM-DD'){
    return moment(value).format(str)
})
 
//使用:
<div id="root">
    <h2>显示格式化后的时间</h2>
    <h3>{{time | dateFormater}}</h3>
    <h3>{{time | dateFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
</div>
 
<div id="root2">
    <h2>显示格式化后的时间</h2>
    <h3>{{time | dateFormater}}</h3>
    <h3>{{time | dateFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
</div>

 

【自定义指令】:

使用的时候前面要加v-,比如定义的指令名称是text-upper,使用的时候要用v-text-upper='name'

 //自定义一个指令(全局) el->element  binding指元素的值
Vue.directive('text-upper', function (el, binding) {
    el.innerText = binding.value.toUpperCase()
})

//定义局部指令
new Vue({
    el: '#root',
    data() {
        return {
            name: 'hAh',
        }
    },  
    directives:{
        'text-lower':function(el,binding){
            el.innerText=binding.value.toLowerCase()
        }
    }
})

//使用:
<div id="root">
    <h2 v-text-upper="name"></h2>
    <h2 v-text-lower="name"></h2>
</div>

 

【自定义插件】:

定义一个插件wdj.js如下:

const wdj = {}
 
wdj.install = function (Vue, options) {
    //添加两个全局指令
    Vue.directive('upper-text', function (el, binding) {
        el.innerText = binding.value.toUpperCase()
    })
    Vue.directive('lower-text', function (el, binding) {
        el.innerText = binding.value.toLowerCase()
    })
    //给Vue自身添加属性
    Vue.projectName = '食堂管理系统'
    Vue.MyVersion = 'V1.0'
    Vue.ShowInfo = function () {
        console.log('我是一些信息')
    }
 
    //给vue原型上添加数据,供vm使用
    Vue.prototype.$random = function (min, max) {
        return Math.floor(Math.random() * (max - min) + min)
    }
}
 //使用:
    <div id="root">
        <h1 v-upper-text='name'></h1>
        <h1 v-lower-text='name'></h1>
        <h2>{{$random(2,8)}}</h2>
    </div>
      //Vue会帮我们去调用wdj.js这个插件里的install方法
        Vue.use(wdj)
 
        console.log(Vue.projectName)
        console.log(Vue.MyVersion)
        Vue.ShowInfo()
 
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: 'wangDIjie'
                }
            },
        })




评论

评论插件