vue

MVVM

vue的生命周期：

Mustache语法：写在内容那里

v-once：只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。可以用于优化更新性能

v-html：将字符串html解析，就是再网页上显示html渲染后的语言，直接返回对应的html

v-text：再网页上展示文本内容，但是不如mustache灵活

v-pre：不进行解析，写什么就显示什么

v-cloak：防止未渲染（了解）

v-on：添加事件监听，相当于@ 对应的响应在methods中设置

<button v-on:click="btnclick">按钮</button>
然后再
const app=new vue({
el:#app,
methods:{
btnclick:function(){
this.isActive=!this.Active
}
}

})

v-bind的基本使用

<img v-bind:src="imgURL" alt="">    //动态赋值，并不是写死了
语法糖： <img :src="imgURL" alt="">    //加个冒号

v-bind动态绑定class：：class={"key:boolean"}

<style>

.active {

color: red;

}

</style>

</head>

<body>

<h2 :class="{'active': isActive}">今天天气不错!</h2>

</div>

const app = new Vue({

el: '#app',

data: {

isActive: true

}

})

  //以键值对的形式绑定

v-for：遍历数组 v-for="(i,index) in Array" 遍历对象如果只用一个值，获取到的是value，想要获取key和value的话 ( v-for="(value,key) in obj" ,使用v-for时，尽量再绑定一个key，但是要保证key中的值是唯一的 :key="item"

v-bind绑定style：：style="{key(属性名)：'value'(属性值)}" 也可以封装一个函数放在methods里面，加单引号就是字符串，不加单引号就是变量。

计算属性：计算属性一般没有set方法，若没有set方法就为只读属性。

computed:{函数}    //计算属性调用时不需要加()

<div id="app">
  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Kobe',
      lastName: 'Bryant'
    },
    computed: {
      fullName: {
        set(newValue) {                                                  //修改值时调用set方法，将值变成参数调用。可以不写set 只写get，调用时不可以加()。this.firstName = names[0]
          this.lastName = names[1]
        },
        get() {
          return this.firstName + ' ' + this.lastName
        }
      }
    }
  })

计算属性的缓存：尽量使用computed而不使用methods，

v-on（事件监听）基本使用和语法糖：

v-on:click=" "  相当于 @click = ""

在事件监听时，click=" "调用，若不需要传入参数可以不添加() @click="btnClick"

<div id="app">
  <h2>点击次数: {{counter}}</h2>
  <!--情况一: 方法没有参数-->
  <button @click="btnClick1">按钮1</button>
  <button @click="btnClick1()">按钮1</button>

  <!--情况二: 如果方法有参数-->
  <!--1.调用时不传入参数,会默认将event作为第一个参数传入-->
  <button @click="btnClick2">按钮2</button>
  <!--2.调用时不传入参数,那么参数为undefined-->
  <button @click="btnClick2()">按钮2</button>

  <!--情况三: 如果方法有参数,并且希望传入event-->
  <button @click="btnClick3(10, $event)">按钮3</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      btnClick1() {
        console.log('按钮1被点击');
      },
      btnClick2(payload) {
        console.log('按钮2被点击', payload);
      },
      btnClick3(num, event) {
        console.log('按钮3被点击', num, event);
      }
    }
  })

v-on的修饰符：

@click.stop=" "    //停止事件冒泡

@submit.prevent    //阻止默认行为

@ketup.enter=" "       //监听回车键帽

@click.once=""           //某监听事件只监听一次

v-if v-else-if v-else:

v-if="判断语句或者变量"   //变量在data中有判断语句 true为显示，false为隐藏

v-else 放在标签中代表 v-if中的判断语句为false时显示v-else标签中的语句

v-eles-if不推荐使用，若判断语句多的话可以放在computed中。

v-show：隐藏标签，相当于display：none 语法 v-show:false //隐藏元素（display）

vue修改数组中的值(响应式)： Vue.set(this.数组，想要修改的位置，修改后的值)

for  in    //遍历后返回属性名（遍历对象，一定不要去遍历数组）
for  of    //遍历后返回索引对象

返回值放入数组中

累加

表单绑定v-model：一般用于input或者textarea，实质是绑定了两个指令 1.v-bind绑定一个value属性，2.v-on指令给当前元素绑定input事件

  <input type="text" v-model="message">   //修改input中的值时，message同时被绑定，一起修改

v-model和radio绑定： v-model:radio radio是选项，其中有name属性是同一个值才可以互斥，或者v-model是同一个值也可以互斥

checkbox多选框：单选框对应布尔值，多选框对应数组类型

单选框：select 里面放的 option

v-model修饰符的使用：

　　　　lazy：在表单中，相互绑定的标签是动态修改的，我们在v-model.lazy后绑定的标签，在失去焦点或者敲击回车后才可以显示

<input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

　　　　number： <input type="number" v-model.number="age"> //type=“number”只能输入数字，但是显示为string类型，在v-model后.number自动将string类型转换为number类型

　　　　trim：去除两边空格， <input type="text" v-model.trim="name">

组件化：组件的使用分为三个步骤：1.创建组件构造器 Vue.extend() 2.注册组件 Vue.conponent() 3.使用组件

<div id="app">
  //<!--3.使用组件-->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>

  <div>
    <div>
      <my-cpn></my-cpn>
    </div>
  </div>
</div>

<my-cpn></my-cpn>

<script src="../js/vue.js"></script>
<script>
  // 1.创建组件构造器对象   一个构造器只能用一个模板
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈哈</p>
        <p>我是内容, 呵呵呵呵</p>
      </div>`
  })

  // 2.注册组件
  Vue.component('my-cpn', cpnC)   // 传入两个参数'my-cpn'标签名 cpnC构造器对象  这个组件为全局组件，意味着可以在多个Vue的实例下面使用，若想注册局部组件，则在实例中进行components

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    } 
   components:{cpn:cpnC}   //cpn为使用组件时的标签名 （局部组件）
  })
</script>

父组件和子组件之间的区别：子组件的注册组件放在父组件创造构造器里面注册，父组件的注册组件放在vue实例里面注册，vue实例称为root组件

组件模板抽离：

<!--2.template标签-->
<template id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是内容,呵呵呵</p>
  </div>
</template>      //然后在template中输入id   (#cpn)  正确写法为:template:'#cpn'

组件化的数据存放问题

 // 1.注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        title: 'abc'
      }
    }               //数据存放在data函数中，并且返回的是一个对象
  })

父子组件的访问方式：

　　父访问子：$refs props主要传输数据，refs调用方法子访问父：$parent 访问根组件：$root

<cpn ref="aaa"></cpn> 
<button @click="btnClick">按钮</button>

 methods: {
                btnClick() {
                    console.log(this.$refs.aaa.showMessage);
                }
            }            //父组件的btn去访问子组件的showMessage

slot-插槽的使用

目的：让我们封装的组件更有

1.插槽的基本使用 <slot></slot>    //放在template中用div和所有元素包裹起来
2.插槽的默认值 <slot><button></button></slot>
3.如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素

具名插槽

    <div id="app">
        <cpn>
            <button slot="center">sahdah</button>
        </cpn>
    </div>

    <template id="cpn">
        <div>

            <slot name='left'><button></button></slot>
            <slot name='center'><button></button></slot>
            <slot namer='right'><button></button></slot>
        </div>

    </template>

webpack的使用：

webpack ./src/main.js ./dist/bundle02.js 
//将红色打包到蓝色

 common.js
module.exports( )   //导出
const { } = require('文件地址')  //导出

Runtime + Compiler 中 Vue 的运行过程:

(1)首先将vue中的模板解析成abstract syntax tree （ast）抽象语法树

(2)将抽象语法树再编译成render函数

(3)将render函数再转换成virtual dom，也就是虚拟dom

(4)最后将虚拟dom显示在浏览器上

而 Runtime-only 只需2步：

(1)将render函数再转换成virtual dom，也就是虚拟dom

(2)最后将虚拟dom显示在浏览器上