VUE2

VUE初始

  1. 引入VUE
  2. 创建VUE实例new Vue({设置})
  3. 挂载使用VUE解析的DOM,两种方式
    1. 在设置参数对象中添加el:"选择器"键值对
    2. 使用.$mount("选择器")来挂载
  4. 使用data:{ 变量名1: 数据 , 变量名2: 数据 }来承载数据
  5. 在需要渲染的DOM元素内使用双括号{{变量名}}来直接将数据渲染到页面,也可以在双括号内执行逻辑语句

因此VUE不需要获取元素和自己写渲染语句,VUE重要的是页面结构,一定要注意结构,否则渲染出来的效果会出错

函数

在参数设置里写methods:{函数1,函数2}字段来承载函数,函数内使用data内变量时需要使用this指向

函数在使用时如果不需要传参可以省略括号

函数可以在所有可以书写js语句的地方使用,比如{{}}、比如指令内

VUE指令

一般都以v-指令名="js语句/变量/函数"的格式展示,直接在标签行内书写

v-for循环

格式为v-for="变量名 in 数组",或者v-for="(变量名,索引) in 数组"

会自动遍历数组并创建标签渲染数组内容

可以多层嵌套

也可以遍历对象,格式v-for="(属性值,键值) in 对象"

也可以遍历数字,格式v-for="(变量名,索引) in 100",表示打印从1到100

也可以遍历字符串,格式v-for="变量名 in 字符串"

JavaScript判断数据类型最准确的是Object.protopyte.toString.call(数据)

v-if、v-else判断

v-if是根据条件来判断元素的显示与否

格式为v-if="逻辑语句"v-else

v-else一定要和v-if或者v-else-if相邻才能够使用,中间不能出现别的元素

如果想要中间插入别的元素,一般可以用两个v-if来替代v-ifv-else

直接删除DOM,检查元素中不可见

v-show显示隐藏

效果和v-if相似,但是实现原理是通过display属性来操作元素,因此他不会从结构中消失,在检查元素中仍可见

格式为v-show="逻辑语句"

v-show和v-if的使用场景不同,前者适用于频繁使用且数据不需要保证私密性的时候,因为不操作DOM性能更好,后者更加安全确保不会泄露数据

除非明确使用v-show,否则更推荐使用v-if,因为更安全

v-bind动态属性

属性分为静态属性和动态属性,我们常写的属性多是静态属性,也就是属性值以字符串表示,不能发生变动

v-bind可以将静态属性变成动态属性,此时我们就可以在属性上书写逻辑语句来实现动态属性

格式为v-bind:属性名="js或逻辑语句",也可以简写成:属性名="js或逻辑语句",此时我们需要注意如果要写字符串一定加上单引号,因为默认写在里面的都是变量

:class

:class有三种格式

适用于一个类名的判断class="isTrue?'class1':'class2'"

适用于多个类名的判断class = "{class1:boolean,class2:boolean,class3:boolean}"

适用于需要同时显示多个类名但不需要判断,使用数组来装载类名:class = '['class1','class2','class3']',使用频率较低

:style

可以使用对象来承载不同的多个属性,属性名是键,属性值是值

:style='{color:isTrue?"red":"",height:"100px"}'

如果属性过多也可以使用变量或者函数,只要表示的值是对象就可以

v-on事件绑定

格式为v-on:事件名="语句",简写为@事件名="语句"

v-model双向数据绑定

用于表单元素,可以将表单元素和变量绑定,任何一方改变都会影响另一方

格式为v-model="变量名"

v-html、v-text

v-html可以解析标签,主要用来展示富文本,比如评论区、邮件等

v-text不会解析标签,他的简写就是{{}}

v-cloak

在网络不好时{{}}会有一小段时间无法解析直接将模板输出到页面,而v-text因为书写在标签内因此不会出现问题

为了解决这个问题,我们可以现将元素隐藏,当资源加载出来再让其显示

v-cloak的功能就是让隐藏元素出现

他一般配合CSS属性选择器使用,因为除了VUE的指令,他在HTML中还表示了自定义属性

[v-cloak] {
    display:none
}

v-once

添加这个指令的标签只渲染一次,不再更新数据显示

v-pre

添加这个指令的标签VUE不进行解析,对于一些HTML静态资源节省性能

自定义指令

自定义指令

Vue.directive('hide', {    
    bind(el, value, vnode) {
        el.style.display = value.value ? 'none' : 'block'
    }
});
  • hide是自定义指令名
  • el是获取到的标签
  • value是指令获取到的值

bind函数里可以正常书写js语句来实现各种指令功能

组件

组件就是对HTML结构、CSS样式和数据逻辑的封装

组件创建

全局组件

全局组件默认注册在根实例中,页面中所有组件内都可以使用

创建方式为Vue.component(组件名,{配置}),或者Vue.component(组件名,局部组件名)

组件名和变量名一样,但注意驼峰命名在创建标签时两个单词使用-连接而非使用驼峰,因为HTML5不区分大小写

组件的使用和标签一样<组件名></组件名>

  Vue.component('comment', {
    data() {
      return {
        list: ['html', 'css', 'js', 'java']
      }
    },
    methods: {
      del(i) {
        this.list.splice(i, 1)
      }
    },
    template: '#commentList',
    components:{
    }
})
  <template id="commentList">
    <ul>
      <li v-for="(item, index) in list">
        <span>{{item}}</span>
        <span class="del" @click="del(index)">删除</span>
      </li>
    </ul>
  </template>
  • template,表示组件模板,可以写成字符串格式,也可以单独定义一个template标签来包裹模板,然后绑定标签的id,后者更方便一些,因为有代码提示
  • data,组件的数据承载,函数类型,返回一个对象,对象内是承载数据
  • methods,和Vue实例一样
  • components,当前组件内的局部组件注册的地方

局部组件

访问的时候需要注册,在哪个组件内使用就在哪个组件内注册,无法跨组件使用

局部组件格式为

const 组件名 = {
    template: "",
    data(){
        return {
        }
    },
    methods:{
    },
}

使用的时候需要在父组件内的components字段内注册,调用方法和全局组件一样

在哪个组件内使用就在哪个组件内注册,无法跨组件,也无法被子组件继承

组件嵌套

多个组件嵌套,将子组件在父组件的模板里调用即可

  <template id="父组件id">
    <div>
        <子组件1></子组件1>
        <子组件2></子组件2>
      </div>
  </template>

需要注意一个template标签只能包裹一个div,不能并排出现两个div,因此并行多个div标签可以使用另一个div标签进行包裹

如果是局部组件需要先注册才能使用

组件通信—父传子

组件作为模板并非一成不变,内容数据是有可能发生变化的,因此组件在使用的时候需要传入参数来实现复用

在组件标签上直接书写变量="内容",然后在组件的props:['变量1','变量2']字段中添加变量,之后就可以像data中的数据一样使用了

数据作用域

每一个组件它的数据方法都是私有的 ,没有继承关系,想要使用就只能通过组件通信

面试题

  • 组件内的data为什么是个函数

    因为函数有私有作用域,在组件复用过程中确保每个组件的data都是私有的,保证data数据不会污染,根实例之所以可以用对象是因为根实例不会复用,没有数据污染的问题

组件通信—子传父

子组件的数据传到父组件也需要组件通讯,使用的方法是自定义事件

  1. 子组件方法内书写this.$emit('事件名',数据)创建一个自定义事件
  2. 子组件标签上添加自定义事件并绑定一个父组件中的方法,方法不能加括号
  3. 父组件methods字段里书写绑定的方法来接收参数,这样就实现了子组件的数据传输到父组件
  <div id="app">
    <home></home>
  </div>

  <template id="home">   // 父组件
    <div class="home">
      <ipt @add-list="addList"></ipt> // 2. 子组件标签调用,添加了自定义事件绑定add方法
      <ul>
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>
  </template>

  <template id="ipt"> // 子组件
    <div>
      <input type="text" v-model="value">
      <button @click="submit">提交</button> // 0.点击提交调用子组件的submit方法
    </div>
  </template>
  Vue.component('home', { // 父组件
    template: '#home',
    data() {
      return {
        list: ['html', 'css', 'js']
      }
    },
    methods: {
      addList(value) { // 3. 子组件标签的自定义事件绑定的add方法,参数是从子组件的自定义事件中传过来的
        this.list.push(value)
      }
    }
  })

  Vue.component('ipt', { // 子组件
    template: '#ipt',
    data() {
      return {
        value: ''
      }
    },
    methods: {
      submit() {
        this.$emit('add-list', this.value) // 1. 创建自定义事件,将子组件数据传出去
      },
    },
  })

注意,组件标签只有自定义事件,没有默认事件,也就是无法给组件标签添加@click指令