vue2语法与生命周期

ronh
46 阅读4分钟

一、语法

v-once

  1. 后面不需要跟任何表达式

  2. v-once所在节点在初次动态渲染后，视为静态内容

  3. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

v-html

  1. 后面往往跟一个string类型

  2. 会将string的html解析出来并渲染

  3. v-html会替换掉节点中所有的内容

注意：v-html有安全性问题

在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击，

一定要在可信的内容上使用v-html，永不要用在用户提交的内容上

v-text

1.会向其所在的节点中渲染文本内容

2.v-text会替换掉节点中的内容，相对于v-text更安全

v-pre

1.跳过其所在节点（这个元素和它子元素）的编译过程。

2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

v-cloak

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

二、生命周期：

1.生命周期回调函数、生命周期函数、生命周期钩子。

2.当前组件在创建到销毁经历的一系列过程，称之为生命周期

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或 组件实例对象。

常用的生命周期钩子：

beforeCreate、created、beforeMounted、mounted beforeUpdate、updated 、 beforeDestroy、destroyed

1.created:

props,data,methods已创建，可用，组件模板结构未生成，可以发请求来拿数据，

再配合methods传数据给需要的地方

注意： 执行created之后会判断 has 'el' option? yes->下一步

no-> when vm.$mount(el) is called ->下一步

2.beforeMount:

将要把内存中编译好的HTML结构渲染到浏览器，此时浏览器中还没有当前组件的DOM结构

注意： 执行beforeMount之后，会用内存中编译生成的HTML结构替换掉el属性指定的DOM元素

3.mounted:

第一次把DOM渲染好。

如果要操作DOM，最早只能在mounted阶段执行

4.beforeUpdate:

when data changes->执行beforeUpdate

5.updated:

根据最新data重新渲染组件的DOM

注意： 数据变化后，为操作最新DOM，必须把代码写到updated中

6.beforeDestroy:

将要销毁此组件，组件仍正常工作

清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

７.destroyed：

组件已销毁，DOM完全移除

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。但不会更新显示到屏幕上

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

三、组件

注册组件的基本步骤

  1. 调用Vue.extend()方法 - 创建组件构造器

  2. 调用Vue.component()方法 - 注册组件

  3. 在Vue实例的作用范围内 - 使用组件

    <div id="app">
    //使用组件
    <my-cpm></my-cpm>
</div>
​
//创建组件构造器
const cpnC = Vue.extend({
    template: '
    <div>
        <h2>标题</h2>
        <p>模板</p>
    </div>'
})
​
//注册组件
Vue.component('my-cpn', cpmC)
​
const app = new Vue({
    el: '#app',
    data:{
        message: ''
    }
})
    局部组件
<div id="root">
        <school></school>
 </div>
  
  Vue.config.productionTip=false;
  const school=Vue.extend({
      template:`
          <div>
              <h2>学校名称:{{schoolName}} </h2>
              <h2>地址:{{address}} </h2>
          </div>
  `,
  data(){
      return {
          schoolName:'tjut',
          address:'天津'
      }
  },
  })
  new Vue({
      el:'#root',
      components:{
          school:school
      }
  })
语法糖简化注册组件的过程
// 全局组件
Vue.component('xxx', {
    template: '
    <div>
        哈哈哈哈
    </div>
    '
})
​
// 内部会自动调用Vue.extend()
​
​
// 局部组件
const app = new Vue({
    el: '#app',
    data: {
        meassage: '哈哈哈'
    },
    components: {
        'cpn': {
            template: '
                <div>
                    哈哈哈哈
                </div>
            '
        }
    }
})

四、prop

prop是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

//简单接收
props:['name','age','sex']

//接收的同时对数据进行类型限制
props:{
    name:String,
    age:Number,
    sex:String,
}

//加上默认值和必要性限制
props:{
    name:{
        type:String,//name是字符串
        required:true//name是必要的
    },
    age:{
        type:Number,
        default:66//默认值
    }
    sex:{
        type:String,
        required:true
    }
}

注意：

props是只读的，Vue底层会监视对props的修改，若修改就发出警告，

修改需复制props的内容到data中一份，然后去修改data中数据

五、Vue cli 使用注意

1.语法检查时会把命名不规范当成错误

组件名建议使用`大驼峰`或`-`衔接的方式

2.import后面的名字是引入时当前组件给他注册时的新名字

```js
import Student from './Student'
```
avatar
文章
阅读
粉丝