哪有什么岁月静好，不过是有人替你负重前行！

vue的基础语法，基础英语

 

vue的基础语法，基础英语

temeplate 是 模板 的意思 需要将html代码写到这个里面

options

options就是属性的意思

创建一个vue实例，所有的数据和操作都要写在这个实例里面，options就是这个实例的属性

const vm = new Vue(options)
 

el和mount 两种挂载点的用法

挂载点: 要替换容器上的哪一块，通常在html上用id标识

el的使用方法

直接写在参数里,oldCode就是id名

const vm = new Vue({
   el:'#oldCode', 
  })

mount的使用方法

//可以使用链式方法
  const vm = new Vue({
   el:'#oldCode', 
  }).$mount('#oldCode')
  //也可以在实例名后面
  vm.$mount('#oldCode')

data 数据的两种写法

data是内部数据，建议使用函数写法 对象

const vm = new Vue({
   el:'#oldCode', 
   data:{
        n:0
   },
  })

另一种方式是函数（推荐使用）

函数写法需要将数据写在return返回值里面

const vm = new Vue({
     el:'#oldCode', 
     data(){
        return{
          n:0
        }
    },
  })

methods方法

const vm = new Vue({
     el:'#oldCode', 
     data(){
        return{
          n:0
        }
    },
    methods:{
      add(){
        this.n+=1
      }
  }
  })

props组件传参

在组件中传参，需要先创建一个组件，这里创建一个文件

  1. 使用{{}}在模板里占位，在props里声明传入的参数
<template>
  <div class="red">
    {{message}}
  </div>
</template>

<script>
export default {
  props:['message']
}
</script>
<style scoped>
.red{
  color: red;
  border: 1px solid blue;
}
</style>

2.要想将实例中的数据变量传如组件中需要在参数名前面加：,此时传入的才是变量值

<Demo :message="n" />
传入函数
  1. 函数需要先在实例中定义好，在组件标签里写入 参数="函数名"，这里也要使用:fn就是传入的参数，add则是函数名
<Demo :message="n" :fn="add" />
  1. 在组件中定义和声明
<template>
   <div class="red">
     {{message}}
     //函数的参数名
    <button @click="fn">+1</button>
   </div>
 </template>
 <script>
   export default {
   //声明参数
   props:['message','fn']
   }
 </script>

生命周期钩子

<body>
    <div id="app">
        <h3 id="h3">{{msg}}</h3>
        <input type="button" value="修改msg" @click="msg='No'">
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'ok',
            },
            methods:{
                show(){
                    console.log('执行了show方法')
                }
            },
/* 
 一、第一个生命周期函数，表示实例完全被创建之前，会执行这个函数
     在beforeCreate生命周期函数执行的时候，data 和 methods 中的数据还没有被初始化
*/

            beforeCreate() {   
                 console.log(this.msg)   //undefind
                 this.show()   //is not defind
            },

/*
 二、第二个生命周期函数
     在 created 中，data 和 methods 都已经被初始化好了！
     如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
*/
            created() {    
                console.log(this.msg)   //ok
                this.show()        //执行了show方法
            },

/*
 三、第三个生命周期函数，表示模板已经在内存中编译完成，但是尚未把模板渲染到页面中
     在beforeMount执行的时候，页面中的元素没有被真正替换过来，知识之前写的一些模板字符串
*/

            beforeMount() {  
                console.log(document.getElementById('h3').innerText)  //{{msg}}
            }, 

/*
 四、第四个生命周期函数，表示内存中的模板已经真实的挂载到页面中，
 用户已经可以看到渲染好的页面
     这个mounted是实例创建期间的最后一个生命周期函数，
     当执行完 mounted 就表示，实例已经被完
     全创建好了，此时，如果没有其它操作的话，这个实例，就静静地在内存中不动
*/
            mounted() {    
                console.log(document.getElementById('h3').innerText)   //ok
            }, 

/*
组件运行阶段的2个钩子函数
 五、第五个生命周期函数，表示 界面还没有被更新，但是数据肯定被更新了
     得出结论：当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，
     此时data 数据是最新的，页面尚未和 最新的数据保持同步
*/
            beforeUpdate() { 
                console.log('界面上元素的内容'+ document.getElementById('h3').innerText)  //没有执行，因为数据没改变
                console.log('data 中的msg数据是：' + this.msg)
            },

/* 
六、第六个生命周期函数
     updated事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
*/
     updated() {
        console.log('界面上元素的内容'+ document.getElementById('h3').innerText)   //No
        console.log('data 中的msg数据是：' + this.msg)   //No
     },

 //第七个 和 第八个销毁阶段

  })
    </script>
</body>
  1. created-实例出现在内存中
  2. mounted-实例出现在页面中
  3. updated-实例更新了
  4. destroyed-实例消亡了
posted @ 2022-02-16 17:54  longfei825  阅读(48)  评论(0)    收藏  举报