0基础看完轻松学会Vue 月薪过万不是梦

1.Vue

 

1.介绍

vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

简单，高效，生态丰富（插件多）

vue的更新换代

2014年 Vue.js发布

2016年 Vue2.x发布

2022年 Vue3.x发布

2.Vue3的安装

<script src="https://unpkg.com/vue@next"></script>

可以直接引用script 或者 去Vue.js官网下载

3.创建应用的实例

在介绍vue之前先用vue写一个绑定实例让大家看看

先在body里面写入html样式

<div id="app">
        <input type="text">
        <p></p>
    </div>

 然后在script标签里面createApp 函数创建一个新的应用实例

   const app = Vue.createApp({

            data() {

                return { msg: "你好vue" }

            }

        })

        var vm = app.mount("#app")

然后在html样式里面添加指定的指令

<div id="app">

        <input type="text" v-model="msg">

        <p>{{msg}}</p>

在输入框输入然后下面的p标签文本里面的字就会随着输入框里面的字变化

 这样一个简单的绑定案例就出来了

4.vue的内置指令

内置指令就是 -v 开头的特殊属性 联系html模板的javasc数据模型

<div>

<p v-text="msg"></p>

</div>

创建app 

const app = Vue.createApp({

            data(){

                return{

                    msg:"你好你好",

                    canUse:true,

                }

            }

        }).mount("#app")

        //挂载 app.mount("#app")

  1.文本渲染

  只能写一行表达式

  不能写复杂的js如if for

        v-text   {{}}   v-html

2.属性渲染

 v-bind:属性名="值";

        ：属性名 = 值

<p v-bind:title="msg">你好</p>

5.vue的多重条件案例

<div id="app">

        <p v-if="score>=90">优秀</p>

        <p v-else-if="score>=80">良好</p>

        <p v-else-if="score>=70">中等</p>

        <p v-else-if="score>=60">及格</p>

        <p v-else>不及格</p>

    </div>

    <script>

        Vue.createApp({

            data(){

                return{

                    score:70

                }

            }

        }).mount("#app")

    </script>

 6.v-show与v-if

        v-show 是通过css隐藏

        v-if 直接移除节点隐藏

        如果频繁切换显示与隐藏V-show

        偶尔切换显示隐藏用v-if

 7.vue的key属性

 key属性为了让Vue内部给遍历的节点 给一个唯一的标识符 以便更好地去

 排序过滤等操作 为了性能优化 key的值要唯一

8.vue对象的遍历    v-for

key给vue遍历的节点一个唯一的标识符更好的让vue去

做排序过滤等操作为了性能的优化key的值要唯一

<div id="app">
        <div v-for="(value,key) in obj" :key="key">{{key}}:{{value}}</div>
    </div>
    <script>
        Vue.createApp({
            data(){
                return{
                    obj:{title:"Vue3入门",author:"嗯嗯",padate:"2020-2-24"}
                }
            }
        }).mount("#app")

 9.vue v-for范围

<div id="app">
        <div v-for="value in 10">{{value}}</div>
    </div>
    <script>
        Vue.createApp({
            data(){
                return{
                    
                }
            }
        }).mount("#app")

 10.v-for和v-if

v-if v-for 不能一起使用  如果非要一起的话

需要用template

<template v-for="item in 10">

<p v-if="item%2===0">{{item}}</p>

</template>

<div id="app">
        <template v-for="item in 10">
            <p v-if="item%2===0">{{item}}</p>
        </template>
    </div>
    <script>
        Vue.createApp({
            data(){
                return{

                }
            }
        }).mount("#app")
    </script>

11.v-on事件

当点击按钮的时候两个按钮上面的数字就会+1

 12.如何用vue制作一个选项卡

<div id="app">

        <p>

            <button @click="num=1" :class="num==1?'active':''">CSS</button>

            <button @click="num=2" :class="num==2?'active':''">html</button>

            <button @click="num=3" :class="num==3?'active':''">js</button>

        </p>

        <div v-if="num===1">css内容</div>

        <div v-if="num===2">html内容</div>

        <div v-if="num===3">js内容</div>

    </div>

<script>

        Vue.createApp({

            data(){

                return{num:1}

            }

        }).mount("#app")

    </script>

选项卡效果