vue基础

一、vue条件渲染

条件渲染有三个，v-if  v-else-if v-else  使用方法和js相似

v-if：

作用：移除dom节点，

值：Boolean

v-show：

隐藏dom节点

v-show与v-if的区别：v-if 移除dom根节点，v-show将对应根节点的属性增加了 display：none

v-for

基本用法：

        
<div id="app">
    <ul>
        <li v-for = 'item in movies'>{{ item }}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
     new Vue({
         el: "#app",
         data: {
             movies: ['扫毒2天地对决', '跳舞吧!大象', '英雄之战', '复仇者联盟4:终局之战']
         }
    })
</script>

//返回
扫毒2天地对决
跳舞吧!大象
英雄之战
复仇者联盟4:终局之战      

<div id="app">
    <ul>
        <li v-for = 'item in movies'>电影名称:{{ item.movie }}|评分:{{ item.rate }}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 new Vue({
            el: "#app",
            data: {
                movies: [{
                    movie: '扫毒2天地对决',
                    rate: '8.1',
                },{
                    movie: '跳舞吧!大象',
                    rate: '7.6',
                },{
                    movie: '英雄之战',
                    rate: '6.4',
                },{
                    movie: '复仇者联盟4:终局之战',
                    rate: '9.1',
                },]
            }
        })
</script>
//返回
电影名称:扫毒2天地对决|评分:8.1
电影名称:跳舞吧!大象|评分:7.6
电影名称:英雄之战|评分:6.4
电影名称:复仇者联盟4:终局之战|评分:9.1

生命周期

1.beforeCreate   创建前

实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。

2.created   创建后

数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。

3.beforeMount  挂在前

$el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。

4.mounted  挂在后

data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。

5.beforeUpdate  更新前

当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。

6.updated  更新后

当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。

7.beforeDestory 销毁前

组件销毁之前调用 ，在这一步，实例仍然完全可用。

8.destoryed  销毁后

组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。

v-model

原理:v-model 实际就是 value属性和oninput时间的 合成

v-model在input中时

<input v-model="sth" />

<input :value="sth" @input="sth = $event.target.value" />

结论:在给input元素添加b-model属性是,默认会把value作为元素的属性,然后把input事件作为实时传递value的出发事件;;

v-model在组件上时

<div id="demo">
 <currency-input v-model="price"></currentcy-input>
 <span>{{price}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script>
<script>
Vue.component('currency-input', {
 template: `
  <span>
   <input
    ref="input"
    :value="value"
    <!--为什么这里把 'input' 作为触发事件的事件名？`input` 在哪定义的？-->
    @input="$emit('input', $event.target.value)"
   >
  </span>
 `,
 props: ['value'],// 为什么这里要用 value 属性，value在哪里定义的？貌似没找到啊？
})
 
var demo = new Vue({
 el: '#demo',
 data: {
  price: 100,
 }
})

结论:给组件添加v-model属性时,默认会把value作为组件的属性,然后把input作为组件绑定事件时的事件名

vue监听

watch基本用法

当Name值变化时,watch监听到并且执行

<div>
      <p>Name: <input type="text" v-model="Name"></p>
</div> 
new Vue({
  el: '#root',
  data: {
    Name: 'wayne',
  },
  watch: {
    Name(newName, oldName) {
      console.log(newName)
    }
  } 
})

handler方法

watch: {
  Name: {
    handler(newName, oldName) {
      console.log(newName)
    },
    // 代表在wacth里声明了Name这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    immediate: true
  }
}

deep属性 深度监听 常用爱对象下面属性的改变

<div id="app">
    <input type="text" v-model:value="childrens.name" />
    <input type="text" v-model:value="lastName" />
</div>
 
<script type="text/javascript">	
    var vm = new Vue( {
        el: '#app',
        data: {
            childrens: {
                name: '小强',
                age: 20,
                sex: '男'
            },
            tdArray:["1","2"],
            lastName:"张三"
        },
        watch:{
            childrens:{
                handler:function(val,oldval){
                    console.log(val.name)
                },
                deep:true//对象内部的属性监听，也叫深度监听
            },
            'childrens.name':function(val,oldval){
                console.log(val+"aaa")
            },//键路径必须加上引号
            lastName:function(val,oldval){
                console.log(this.lastName)
            }
        },//以V-model绑定数据时使用的数据变化监测
    } );
    vm.$watch("lastName",function(val,oldval){
        console.log(val)
    })//主动调用$watch方法来进行数据监测
</script>