[TOC]

vue介绍

1 vue作者尤雨溪 2014开发vue.js
2 vue是一个基于javascript一个框架(vue.js angular.js react.js)
3 vue是一个渐进式javascript框架

v-else

作用： 进行逻辑判断 需要配合着v-if或者是v-else-if来进行使用
该指令不能单独使用
v-else 不需要写条件
v-if和v-else必须连续进行使用 中间不能隔开 隔开就报错
格式：

  • {{lists[0]}}

  • {{lists[1]}}



12344454
暂无内容

v-show

是通过属性的真假值 控制css样式display显示或者隐藏元素
格式： <元素标签 v-show=”条件”></元素标签>
如果条件成立 则该元素显示 display: block
如果条件不成立 则该元素隐藏 display: none
当前的元素是一直都存在 只是你看不见而已
v-show和v-if区别 v-show和v-if都可以通过条件的真假控制元素的显示或者是隐藏
但是v-show是跟据条件的真假
控制css的display属性来达到元素的显示或者隐藏
v-if如果条件不成立的时候 则直接销毁掉元素 元素不在存在
如果重新成立 则元素会被重建
具体什么时候用v-if 什么时候用v-show
例如控制tab切换的时候 一般选择使用v-show
例如在实现评论显示暂无内容的时候 我们就可以选择v-if

能看得见我

v-for

用法： 一般情况下对数据进行循环遍历 类似于js里边所用的for循环
语法： <元素标签 v-for=”(自定义名字, 自定义下标索引) in data数据” v-bind:key=”自定义下标索引”>{{自定义名字}}</元素标签>
例如：
  • {{item}}

    • 在此处item表示fruits里边的每一项
    index表示下标索引
    key是为了对数据进行快速排序的
    要循环遍历哪个元素 就在那个元素的上边写上v-for
    v-for可以对字符串 数组 对象都可以进行循环遍历
    字符串和数组是一样的 下标索引对应的就是0 1 …
    v-for=”(item, index) in obj”
    而遍历对象的时候 下标索引指的是 当前对象的属性名
    而item则表示当前对象的属性值
    但是v-for虽然能够对以上数据类型进行循环遍历
    但是一般情况下 v-for都是对数组进行循环遍历    		 
         <p v-for="(title, i) in titles" v-bind:key="title">{{title}}--{{i}}</p>
     <hr>
     <p v-for="(x, i) in msg" v-bind:key="i">{{x}}--{{i}}</p>
     <hr>
     <p v-for="(item, index) in obj" v-bind:key="index">{{item}}--{{index}}</p>
 </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            titles: ["标题1","标题2","标题3"],
            msg: "hello world",
            obj: {
                name: "张三",
                age: 15,
                sex: "男"
            },
            fruits: [
                {
                    name: "apple",
                    price: 0.5,
                    mount: 30
                },
                {
                    name: "banana",
                    price: 1.0,
                    mount: 50
                },
                {
                    name: "pear",
                    price: 1.2,
                    mount: 15
                },
                {
                    name: "peach",
                    price: 4.0,
                    mount: 100
                },
                {
                    name: "orange",
                    price: 5.0,
                    mount: 150
                }
            ]
        }
    })
</script>

    v-bind

    hello world

    		 绑定一个属性

    hello world

    		 绑定多个属性
    以数组形式编写：
    <元素标签 :属性名=”[data1, data2, data3…]”></元素标签>
    以对象形式编写：
    <元素标签 :属性名=”{‘添加的属性’: 布尔值}”></元素标签>
    如果写成对象形式前边的属性名 就是一个字符串 不能去写data中动态属性
    以数组对象形式编写：
    <元素标签 :属性名=”[data1, data2, {添加的属性: 布尔值}]”></元素标签>
    这里边的data1 data2 会一直存在 而新添加属性 则会随着条件的改变而进行动态的添加    		 绑定同个属性(属性里面有多个值)
    data中style是一个对象
    data: {
    “font-size”: “15px” // css样式如果有中中横线 且 你不想使用引号包裹样式 你可以直接写为小驼峰 fontSize: “15px”
    }    		 绑定style
    <元素标签 v-bind={属性名1: data1, 属性名2: [data1, data2],….}></元素标签> 使用对象一次绑定多个动态属性
    :class=”{active:isActive}” 添加类名
    :class=”[class1,class2]” 添加多类名
    :class=”{ft:show , demo:true , demo1:show}”
    :class=”[class1, class2, {test:false}] “
    :id=”class1” 添加id名
    :src=”imgSrc” 添加图片src


    v-model

    获取和设置表单元素(输入类元素上)的值（双向数据绑定）改变value的
    使用场景 该指令只适用于表单元素
    input textarea select 组件
    用法： 在表单控件或者组件上创建双向数据绑定
    格式： <元素标签 v-model=”data数据”></元素标签>
    image.png

    v-on

    v-on指令可以绑定自定义事件 可以认为跟原生js里边onclick比较类似
    注意：
    在v-on指令中如果事件不需要传递参数时候 我们的方法名后边可以不加括号 当然也可以加
    但是如果需要进行参数传递的时候 那么你的方法中必须添加括号 括号当中写上要传递的实参
    在vue中同一个标签可以使用v-on绑定多个事件方法 但是一般情况下我们只绑定一个
    如果一个标签商标绑定多个事件 我们可以使用多个事件进行绑定 我们也可以写成对象形式
    <元素标签 v-on=”{事件名1: 方法名1, 事件名2: 方法名2 ,….}”></元素标签>
    以对象的形式绑定多个事件 则方法不能使用括号传递参数 因为方法不会被识别
    @keyup=”sayHi” 相当于oninput
    @click 点击事件
    @keyup.enter=”sayHi” 控制按下enter触发


    //双击
    var app=new Vue({
    el: “#app”,
    methods: {
    doIT: function ( ) {
    alert(“王文超”);
    }
    },
    })
    v-on 修饰符
    .stop 调用 event.stopPropagation()。
    .prevent 调用 event.preventDefault()。
    .capture 添加事件侦听器时使用 capture 模式。
    .self 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    .{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调。
    .native 监听组件根元素的原生事件。
    .once 只触发一次回调。
    .left (2.2.0) 只当点击鼠标左键时触发。
    .right - (2.2.0) 只当点击鼠标右键时触发。
    .middle - (2.2.0) 只当点击鼠标中键时触发。
    .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
    用法：
    <元素标签 v-on:事件名.stop.self.once=”自定义方法名”></元素标签>
    修饰符支持链式调用
    修饰符 passive和capture两个修饰符是配合使用 当passive的值为true时候 我们可以给当前元素添加侦听器
    然后在使用 capture进行事件的捕获
    使用场景 可以使我们的移动执行的更加流畅
    @click.self=”pop1”
    @click.stop=”pop2”
    @click.once.left=”pop2” 第一次点击执行一次
    @click.stop.self.once=”pop2” 第一次点击执行一次
    @click.once.left.stop=”pop3” 执行一次-点击左键-然后停止
    @click.prevent=”jump” 点击跳转
    v-on:keyup.13=”txt” 点击按键触发 .13代表Enter

    v-slot

    插槽 有了slot 可以让组件更加的丰富多彩

    v-pre [了解]

    用法: 跳过这个元素和它的子元素的编译过程
    格式: <元素标签 v-pre></元素标签>
    不会被渲染data数据，输出 {{msg}}

    v-clock [使用最多]

    用法: CSS 配合使用 [v-cloak] { display: none } ，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕,直接显示数据，刷新不显示{{msg}}
    格式:

    {{data数据}}

    Vue事件修饰符

    v-on 修饰符
    1.@click.prevent: 阻止默认事件（常用）比如跳转页面
    2.@click.stop: 阻止事件冒泡（常用）
    3.@click.once: 事件只触发一次（常用）
    4.@click.capture: 使用事件的捕获模式
    5.@click.self:只有event.target是当前操作的元素时才触发事件
    6.@click.passive:事件的默认行为立即执行，无需等待事件回调执行完毕 (移动端用的多)
    @wheel 滚轮滚动触发
    @scoll 轮动条滚动触发
    v-bind 修饰符
    .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
    .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
    .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
    第三个修饰符sync使用场景（在组件中使用）
    父组件向子组件传递数据 同时子组件可以修改掉父组件里边的原数据
    .camel修饰符 是添加到自定义属性里边 官方释义可以讲中横线属性转化为小驼峰 但是在html解析时候对于属性名
    不区分大小写 所以在html中最终结果是 解析为没有中横线的字母拼接 而不是小驼峰
    以上三个修饰符 使用最多的是第三个 上边两个基本用不到
    v-model修饰符
    v-model.lazy=”msg” - 取代 input 监听 change 事件
    v-model.number=”msg” - 输入字符转为有效的数字
    v-model.trim=”msg” - 输入首尾空格过滤

    键盘事件

    Vue中常用的键盘别名：
    @keyup.enter=”show” 键盘按下enter回车触发show事件
    @keyup.delete=”show” 键盘按下delete删除触发show事件
    @keyup.esc=”show” 键盘按下esc退出触发show事件
    @keyup.space=”show” 键盘按下space空格触发show事件
    @keyup.up=”show” 键盘按下up↑触发show事件
    @keyup.down=”show” 键盘按下down↓触发show事件
    @keyup.left=”show” 键盘按下left←触发show事件
    @keyup.right=”show” 键盘按下right→触发show事件
    @key.down.ctrl=”show”
    @key.down.alt=”show”
    @key.down.shift=”show”
    @key.down.meta=”show”

    vue组件注册

    vue组件 全局注册 [不常使用]

    定义: 我们可以使用组件将对应重复使用的一些html css和js代码封装起来 进行反复调用
    特征 1 可以复用
    2 组件之间data数据是独立存在 互相不影响
    格式: 写法:
    Vue.componet(‘自定义组件名’, {
    组件的配置对象
    data() {
    return {
    msg: 123
    }
    }
    })
    注意:
    自定义的组件名 不能与w3c规定的已有html标签名冲突
    组件的配置对象有除了el挂载点之外 所有的new Vue里边的对象配置
    组件中的data数据值必须是一个函数 并且里边数据必须使用return进行返回
    自定义组件名的方式有两种:
    短横线分隔命名:
    my-component-name
    首字母大写(大驼峰):
    MyComponentName
    我们的html不区分大小写 需要转化为短横线分隔形式 而字符串模板不需要考虑
    在组件的模板字符串我们可以使用短横线来命名组件标签也可以直接使用己有的大鸵峰的组件名来渲染我们的组件但是在html中不能直接使用必须转化为短横线命名法才能识别

    vue组件 局部注册 [经常使用 重要]

    局部注册需要在对应的组件配置对象中进行注册
    局部注册不能像全局注册一样在组件的任意地方进行调用
    但是在以后vue编写中我们使用最多却是局部注册组件
    局部注册写法 自定义组件名: {
    template: <br /> // 组件的模板<br />,
    // 如果当前组件有子组件 则配置components
    components: {
    组件名: 子组件的配置对象
    }
    }

    组件传值

    父子 非父子
    组件与组件之间数据不能共享 互相不能通信 所以说组件数据只能自己使用
    如果其他组件想要用一下另一个组件中数据时候 我们需要借助组件传值
    组件传值分为三种
    1 父组件向子组件传值
    2 子组件向父组件传值
    3 非父子组件传值

    父组件向子组件传值

    1 首先在子组件的模板对象中配置props属性 属性中写上自定义名字
    Vue.component(‘子组件名’, {
    props: [‘自定义名字’]
    })
    2 在父组件中找到子组件标签 在子组件标签上写上 v-bind:自定义名字=”父组件要传递的数据”
    <子组件标签 v-bind:自定义名字=”父组件要传递的数据”></子组件标签>
    3 在子组件中直接将自定义的名字 当作data来进行使用 该值就是父组件传递过来的数据
    { // 子组件模板
    template: <br /> <div class="child">{{自定义的名字}}</div><br />
    }



    子组件向父组件传值

    1 在子组件中标签上边绑定事件 使用this.$emit发送数据
    // 子组件的模板
    {
    template: <br /> <button @click="自定义事件名">发送</button><br />,
    methods: {
    自定义事件名( ) {
    this.$emit(‘自定义方法名’, 要发送的子组件中的数据)
    }
    }
    }
    2 在父组件模板中找到子组件标签 在子组件标签使用 v-on:自定义方法名=”新的方法名”
    <子组件标签 @自定义方法名=”新的方法名”></子组件标签>
    3 在父组件的methods方法中写上定义的新的方法 方法中默认有一个参数 该参数就是子组件传递给父组件的data数据
    methods: {
    新的方法名(data) {
    console.log(data) // data就是子组件传递给父组件的data数据
    }
    }

    {{a}}

    非父子组件传值

    可以使用this.$emit发送数据
    使用this.$on来监听数据
    1 创建公共实例化对象
    const bus=new Vue( )
    2 在发送数据的组件中创建methods方法 添加函数 在函数中触发自定义事件 然后给对应的元素绑定对应的事件
    {
    methods: {
    函数名( ) {
    bus.$emit(‘自定义方法名’, 要发送的数据)
    }
    }
    }
    3 在需要接受数据的组件中 使用created生命周期函数 使用bus.$on来监听发送过来的数据
    {
    created( ) {
    bus.$on(‘自定义方法名’, (data)=> {
    console.log(data) // data就是另一个组件发送过来的数据
    })
    }
    }





    props进阶

    props可以是数组也可以是对象
    props限制传递的数据类型 prop自定义名字: 数据类型
    props传递多个数据类型 prop自定义名字: [数据类型1, 数据类型2]
    如果没有传递相关的值 想要有默认值 prop自定义名字: {
    default: ‘默认值’
    }
    如果即想传递相关的值 又要设置数据类型 prop自定义名字: {
    type: 数据类型,
    default: “默认值”
    }
    如果该prop是必传项 prop自定义名字: {
    required: true
    }
    如果想要使用自定义验证
    validator(value) {
    // value 就是对应的prop得到的值 父组件传递给子组件的数据
    validator中返回true则验证通过 返回false则验证失败
    }
    注意：
    在使用props进行验证的时候 我们一般在以后的项目中使用最多的配置选项时 type类型
    所有的父组件向子组件传值，必须使用props进阶写法



    sync修饰符

    什么情况下使用sync 如果一个值m需要从父组件传递给子组件
    并且子组件需要执行相关操作修改掉当前m值
    那么我们可以使用sync进行处理
    1 在子组件中添加props接受父组件传递过来数据 props: {
    数据名: 数据类型
    }
    2 给需要改变这个数据的元素上绑定事件，
    并且触发自定义事件update:数据名
    <元素标签 @click=”函数名”></元素标签>    		 methods: {
    函数名() {
    this.$emit(“update:数据名”, 新的数据)
    }
    }
    3 在父组件中找到子组件标签，在子组件的标签上边添加数据 <子组件标签 v-bind:数据名.sync=”值”></子组件标签>

    {{msg}}

    axios加vue

    传统 axios 请求
    get请求 document.querySelector(“.get”).onclick=function ( ) {
    axios.get(“https://autumnfish.cn/api/joke/list?num=3").then(function (response) {
    console.log(response.data.jokes);
    }, function (err) {
    console.log(err);
    })
    }
    post请求 document.querySelector(“.post”).onclick=function ( ) {
    axios.post(“https://autumnfish.cn/api/user/reg“,
    { username: “用户名” }).then(function (response) {
    console.log(response);
    }, function (err) {
    console.log(err);
    })
    }
    在vue中想要实现动态数据请求，一般需要配合axios来进行数据的异步请求
    1 在vue中需要首先引入axios.min.js
    2 在vue组件中就可以调用axios的api接口进行数据请求
    注意： 建议：axios.min.js文件需要引入在vue.min.js后边
    axios+vue


    {{ joke }}


    • {{list.title}}





    vue脚手架引入axios

    vue中引入axios三种方式
    1 局部引入
    1 直接在@vue/cli中 安装axios
    npm i axios —save-dev
    2 在需要请求数据的组件中 引入axios
    import axios from ‘axios’
    3 在需要使用axios地方 使用axios.get() axios.post()
    2 全局引入
    方式一【用这个】：
    1 安装axios
    npm i axios —save-dev
    2 在main.js中引入axios
    import axios from ‘axios’
    3 将axios设置给Vue原型对象
    Vue.prototype.axios=axios
    4 在需要使用axios的地方 使用this.axios.get() this.axios.post()

    方式二：
    1 安装axios和vue-axios
    npm i axios vue-axios —save-dev
    2 在main.js文件中引入axios和vue-axios
    import axios from ‘axios’
    import VueAxios from ‘vue-axios’
    3 调用use()方法
    Vue.use(VueAxios,axios)
    4 在需要使用axios的地方 使用this.axios.get() this.axios.post()
    getMetadata() {
    this.axios.get(‘https://conde.js.org/api/v1/topics').then(res=> {
    console.log(66666, res);
    }).catch(err=> {
    console.log(err)
    })
    }

    vue相关属性配置

    computed 计算属性

    计算属性
    如果表达式过于复杂 我们就可以使用computed进行处理
    computed和methods写法相同
    在computed中可以使用函数方法对表达式进行处理 然后将自定义函数方法名作为data数据来进行使用
    格式:
    computed() {
    自定义函数名1( ) {
    return 表达式
    }
    }

    {{自定义函数名1}}


    computed也可以对我们data数据进行处理得到最新的数据

    {{reverseMsg}}


    {{stu.name}} {{stu.age}}



    filters 过滤器

    如果有些时候我们需要给某些数据进行某种方式的绑定
    我们就可以使用过滤器

    {{item | tab}}

    watch 监视属性

    一般用来监听data数据的改变
    监听data数据时候 函数中有两个参数 value oldValue
    两个参数对应的是data的新值和老值
    格式：
    data: {
    msg: ‘111’
    }
    watch: {
    msg(val, oldval) {
    console.log(val, oldVal)
    }
    }
    watch:{
    tabs: {
    handler(val) {
    this.getData(val)
    },
    immediate: true
    // 在页面加载之后立即执行handler里边函数代码
    }
    },
    methods: {
    getData(tab=’all’) {
    axios.get(“https://cnodejs.org/api/v1/topics“, {
    params: {
    limit: 10,
    tab
    }
    }).then(res=> {
    console.log(res)
    this.lists=[…res.data.data]
    }).catch(err=> {
    console.log(err)
    })
    }
    }

    监视属性

    监视属性watch:
    1.题被监视的属性变化时,回调函数自动调用,进行相关操作
    2.监视的属性必须存在，才能进行监视!!
    3.监视的两种写法:
    (1).new Vue时传入watch配置
    (2).通过vm.$watch监视

    深度监视

    深度监视:
    (1).Vue中的watch默认不监测对象内部值的改变（一层）。
    (2).配置deep:true可以监测对象内部值改变(多层)。
    备注:
    (1). Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
    (2).使用watch时根据数据的具体结构,决定是否采用深度监视。

    Vue插槽

    什么是插槽(slot)
    slot组件是vue官方提供的组件标签 所以说我们不需要注册可以直接使用
    在标签中写的内容会自动出现在slot组件中
    如果有了slot 我们可以让组件更加的丰富多彩
    有几个slot 那么组件标签中的内容就会出现在所有默认的slot中



  • 购物车



  • 详情页

  • 抽奖



    		•

    具名插槽

    具有名字的插槽叫做具名插槽
    格式：
    // 该slot最终渲染是第一个p元素
    // 该slot最终渲染是第二个p元素
    调用
    <组件标签>



    </组件标签>
    使用具名插槽的原因
    使用具名插槽可以对当前组件中多个slot进行精确匹配
    指定某一个slot对应组件标签中的内容
    注意：
    一个不带 name 的 有隐含的名字“default”


    显示器




    内存




    硬盘




    硬盘


    内存

    独占默认插槽

    一个组件的模板中只有一个slot 并且该slot没有名字 (相当默认名default)
    后备内容
    如果组件的模板中有slot 我们可以给slot组件标签中添加内容
    在页面中调用组件标签 且组件标签中没有写任何的内容 这个时候会显示slot插槽中的内容
    如果组件标签中编写了内容 则替换slot中所写的内容


    666

    作用域插槽 (老技术 老项目会用)

    用途: 有时让插槽内容能够访问子组件中才有的数据是很有用的。
    1 使用slot-scope进行子组件数据获取
    在子组件模板添加slot,并在slot标签上进行数据绑定
    template: <br /> <div class="test"><br /> <slot :自定义名称="要传递的内容"></slot><br /> </div><br />
    在对对应的子组件标签内容上添加template标签，并在标签上使用slot-scope进行数据接收
    <子组件标签>

    </子组件标签>
    解构插槽





    v-slot指令 脚手架使用

    v-slot指令 缩写：#
    使用场景限定于 1.template标签 2.组件
    用途 提供具名插槽或作用域插槽