vue2基础总结

文章目录

• • 渐进式框架
  • 环境搭建
  • Vue的基本模式(M V V M)
  • • • 扩展
      • mvc
      • mvp
  • Vue的生命周期
  • • 基础生命周期
    • 几个特别的生命周期
    • • activated
      • deactivated
    • nextTick
  • mustache模板语法
  • 动态绑定行内样式
  • vue中输入框事件的使用
  • 动态创建组件和keep-alive缓存
  • Vue的常见指令
  • • v-model(服务于表单案例)
    • v-cloak
    • v-text
    • v-html
    • v-bind
    • v-on
    • v-if
    • v-show
    • v-one
    • v-lazy
  • 按键修饰符
  • • 事件修饰符
    • 键盘修饰符
    • 系统修饰键
    • 修饰符
  • ref refs
  • 在组件上绑定事件(.native)
  • 无法深度监听时，采用this.$set 来动态添加响应数据
  • • vue无法监听的数组变化的场景
    • 解决无法监听数组变化的方法
    • vue无法监听到对象变化的场景
    • 案例
    • • 扩展

渐进式框架

对“渐进式”这三个字的理解：Vue渐进式-先使用Vue的核心库，再根据你的需要的功能再去逐渐增加加相应的插件。

环境搭建

通过 serve 来运行 打包后

serve index.html 
           

通过npm 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
           

安装yarn

cnpm install -g yarn
           

Vue开发环境配置

• node
• cnpm/yarn
• cnpm install -g @vue/cli

创建项目的方式

vue create demo01

           

or

vue ui
           

Vue的基本模式(M V V M)

vue本生只是实现了对data数据的监听，并没有实现对内部数据变化的监听，但对js中大量的方法进行了从写(push,splice,pop 等)，使之既能实现原有方法的功能，又可以更新视图

扩展

链接

mvc

mvp

Vue的生命周期

基础生命周期

总共分为8个阶段 创建前/后，载入前/后，更新前/后，销毁前/后

请求数据一般在 created 里面就可以，此时可以操作data和methods;

如果涉及到需要页面加载完成之后的话就用 mounted,也就是说如果要操作dom节点

几个特别的生命周期

activated

路由组件生命周期，进入组件时触发

deactivated

路由组件生命周期，进入组件时触发

应用场景:当路由被缓存，destroy 将无法触发，而这两个路由钩子还是会触发

nextTick

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法Vue.nextTick一样，不同的是回调的 this 自动绑定到调用它的实例上

mustache模板语法

动态绑定行内样式

<div class="img3" :style="{ backgroundImage: 'url(' + img3 + ')' }"></div>
  
data() {
    return {
      img3: require("../assets/img/2.png"),
      img4: require("@/assets/img/2.png"),
    };
  },

           

vue中输入框事件的使用

@input //适用于实时查询，每输入一个字符都会触发该事件。

@keyup.enter //点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。

@change //该事件和enter事件相似，在手机上都是要经过触发虚拟键盘的搜索键才会触发事件。使用方式同input事件。

@blur //失焦

动态创建组件和keep-alive缓存

< component is=”home” />  //home是组件
keep-alive                 //  路由缓存
 <div id="app">
    <!-- 注意： 这里include，exclude匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。 -->
    <keep-alive :include="['home','login']">
      <router-view></router-view>
    </keep-alive>
  </div>

           

Vue的常见指令

v-model(服务于表单案例)

<div id="app">
        <div>
            <h2>
               1. 指定value
            </h2>
            下拉单选框
            <select v-model="isCheck2">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
              </select>
        </div>
        <div>
            <h2>
                这个 1. 指定value 	2. 收集的data必须是个 number or string
            </h2>
            <input type="radio"  id="small" value="small_value" v-model="isCheck3">small_value
            <input type="radio"  id="big" value="big_value" v-model="isCheck3">big_value
        </div>
        <div>
            <h2>
              v-model在单选框 1.收集的data必须是个 blool
            </h2>
            <input type="checkbox"  v-model="isAgree">

        </div>

        <div>
            <h2>
                v-model在复选框中的使用 1.需要value 2. 打他中的收集 必须是个数组
            </h2>
            <div id="app">
                <input type="checkbox" id="one" value="value_one" v-model="isCheck4">
                <label for="one">选项一</label>
                <input type="checkbox" id="two" value="value_two" v-model="isCheck4">
                <label for="two">选项二</label>
                <input type="checkbox" id="three" value="value_three" v-model="isCheck4">
                <label for="three">选项三</label>
                <br>
              </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isAgree:false,       // 默认值是bool v-model 绑定的就是选中状态
                isCheck2:"A被选",
                isCheck3:"small_value",
                isCheck4:[]         // 默认值是数组 v-model 绑定的就是选中的value 的集合
            },
            watch:{
                isCheck1(val){
                    console.log("单选框的v-model值",val)
                },
                isCheck2(val){
                    console.log("单选框的v-model值",val)
                },
                isCheck3(val){
                    console.log("单选框的v-model值",val)
                },
                isCheck4(val){
                    console.log("单选框的v-model值",val)
                },
            }
        })
    </script>

           

1.vue在使用data中的数据时，在标签中“isFlase”直接使用即可

小程序中”{{isFlase}}”

2.vue事件传参数@click=“handle(index)”,index可以直接传入;

wx中bindtap=”handle“ data-index=”index” ，通过hangle(e)事件源来获取

v-cloak

用于防止加载闪烁

v-text

默认能防止闪烁，同时能覆盖内容

v-html

用于解析有标签的内容

v-bind

用于动态绑定类

4.1 动态绑定单一类

4.2 动态选择类绑定

4.3 动态绑定多个类1 数组都是单个值

4.4动态绑定多个类2 对象形式

4.5 用于动态绑定行内样式

<p :style="{color:red1,fontSize:font1+'px'}"> </p> 
   data:{
       red1:"red",
       font1:30
        },
           

v-on

用于绑定事件

//事件参数必须在最后一个

show:function(a,event){
	event.target.innerHTML        //获得内容
	event.target.tagName        //获得标签
}
           

附：v-on事件修饰符

.stop:

<div @click="show1">
<button @click="show2"></button>

</div>

           

对比js中的事件冒泡：

stopPropagation

对比js中的默认事件：

preventDefault

v-if

删除或创建元素

v-show

经常性的操作使用v-show

不经常性的操作使用v-if

8.v-for=”(item，index） in items” //循环列表

对应标签要注意使用key属性（只接收string和number）

v-one

只执行一次

v-lazy

失去焦点再触发响应式同步

按键修饰符

事件修饰符

vue为v-on提供了事件修饰符，通过点(.)表示的指令后缀来调用修饰符。

.stop

阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation()

.prevent

防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），等同于JavaScript中的event.preventDefault()，prevent等同于JavaScript的event.preventDefault()，用于取消默认事件。

.capture

与事件冒泡的方向相反，事件捕获由外到内,捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内 父节点-》子节点的点击事件

.self

只会触发自己范围内的事件，不包含子元素

.once

只执行一次，如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次。

.passive

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符

.passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

事件修饰符还可以串联

注：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

键盘修饰符

在JavaScript事件中除了前面所说的事件，还有键盘事件，也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：

.enter：回车键

.tab：制表键

.delete：含delete和backspace键

.esc：返回键

.space: 空格键

.up：向上键

.down：向下键

.left：向左键

.right：向右键

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl

.alt

.shift

.meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

.exact修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。鼠标按钮修饰符

鼠标修饰符用来限制处理程序监听特定的滑鼠按键。常见的有：

.left

.right

.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。自定义按键修饰符别名

在Vue中可以通过config.keyCodes自定义按键修饰符别名。

修饰符

(1).lazy

在改变后才触发（也就是说只有光标离开input输入框的时候值才会改变）

(2).number

将输出字符串转为Number类型·（虽然type类型定义了是number类型，但是如果输入字符串，输出的是string）

(3).trim

自动过滤用户输入的首尾空格

正则表达式

具体查看文档

https://www.runoob.com/regexp/regexp-syntax.html

ref refs

Ref获取dom元素的内容 （ref refs）

ref:对要操作的元素取名字

this.refs.名字：对其的具体操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3 ref='myh3'>我是dom元素的内容</h3>
        <com ref="myCom"></com>
        <button @click="getData"> 123</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                getData() {
                    console.log(this.$refs.myh3.innerText) //我是dom元素的内容
                    console.log(this.$refs.myCom.name) //undefined
                    console.log(this.$refs.myCom.show) //show(){console.log('hello world')}
                }
            },
            components: {
                'com': {
                    template: '<p>我是组件的内容</p>',
                    methods: {
                        show() {
                            console.log('hello world')
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>

           

在组件上绑定事件(.native)

有时候我们想在子组件上面监听一些事件，比如click，但是不论你怎么点，它都没反应，为什么呢？

<template>
    <div>
        <Child @click="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>
           

因为这样写vue会认为，你自定义了一个click事件，要在子组件通过$emit(‘click’)触发才行。如果我就是要在父组件触发呢？那就要用到native修饰符了。

例子

<template>
    <div>
        <Child @click.native="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>
           

父组件如何调用子组件的方法

子组件：

<template>
  <div>
    child
  </div>
</template>
 
<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      parentHandleclick(e) {  //将要被父组件调用的方法
        console.log(e)
      }
    }
  }
</script>

父组件：

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>  //给子组件添加引用
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>
           

注意：

1、在子组件中：

是必须要存在的

2、在父组件中：首先要引入子组件 import Child from ‘./child’;

3、 是在父组件中为子组件添加一个占位，ref="mychild"是子组件在父组件中的名字

4、父组件中 components: 是声明子组件在父组件中的名字

5、在父组件的方法中调用子组件的方法，很重要this.$refs.mychild.parentHandleclick(“嘿嘿嘿”);

无法深度监听时，采用this.$set 来动态添加响应数据

vue无法监听的数组变化的场景

• 通过数组索引改变数组元素的值；
• 改变数组的长度；

解决无法监听数组变化的方法

• this.set(target,index,val)
• 通过splice push pop shift unshift sort reverse
• 使用临时变量作为中转，重新赋值数组；

vue无法监听到对象变化的场景

• 对象的增加、删除无法被vue监听到

案例

新增加对象中的一个属性

data(){
return	{
	person:{
	name:"wxj"
}
}
}
methods：
// 添加一个age字段
this.$set(this.person,age,18)
           

扩展

// 直接 filter 不行，但可以重新赋值
    filterMore(){
      this.arr=this.arr.filter(item=>{
        return item>2
      })
    }