Vue 的第一天

最新推荐文章于 2024-07-24 20:27:46 发布

晚安.biubiu

最新推荐文章于 2024-07-24 20:27:46 发布

阅读量243

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/zd7id/article/details/122990711

版权

Vue 课程大纲

1.什么是 vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面 的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以 自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

简单来说：Vue是一套用于快捷开发前端应用的框架技术！

2.vue 的特点

Vue是一个用于快捷开发前端应用的框架，它的特点用于构建用户界面的前端渐进式框架，采用自底向上的逐层应用，只关于视图层，技术简单易于上手！

3.vue 的第一个应用

访问Vue官方网站，下载vue.js文件

编写自己的第一个Vue应用：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1> {{ name }} </h1> // 书写格式为 {{ xxx }}
    </div>
    
    <script src="./vue.js"></script> // 需要下载 vue.js
    <script>
        // 创建Vue实例，绑定页面中的一个标签  Vue V 需要大写
        const vm = new Vue({
            el: "#app", // 将实例绑定到一个标签上
            data: {     // 实例中的数据
                name: '作者：尤雨溪'
            }
        })
    </script>
</body>
</html>

4.`Vue`第一个数据处理应用

开发一个简易的密码提取器，完成用户输入数据的同步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        输入密码：<input type="text" v-model="passwd"><br /> // v-model 用于标签元素，用于数据双向绑定

        <p> 密码提取：{{ passwd }} </p> 
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app", // 绑定到制定的标签上 
            data: {
                passwd: "待输入密码"
            }
        })
    </script>
</body>
</html>

5.`Vue`实例选项

Vue项目中，Vue实例是项目的核心对象，对实例的熟悉程度直接关乎后续的开发效率！

// 创建实例
 const vm = new Vue({ 选项 })

实例选项：实例上添加了功能支持

① el：element缩写，表示实例绑定那个标签，该标签内部的数据由Vue实例管理

② data：数据的意思，用来声明当前Vue实例管理的所有数据

③ methods：函数、方法的意思，用来声明当前实例管理的所有函数

④ filters：过滤器的意思，用来声明按照条件进行数据处理的函数

⑤ created()/mounted()/updated()...生命周期选项

⑥ components：组件的意思，用来声明子组件...

const vm = new Vue({
    el: "#app",
    data: {
        name: "Vue 2.x",
        version: "2.4.0"
    },
    methods: {
        say() {
            console.log("当前版本：2.4.0")
        }
    },

   
    filters: {
        format(args){
            return "拼接字符" + args
        }
    },
    created() {
        console.log("当前页面被创建的时候执行一下，处理一些准备数据")
    },
    components: {
        Headers,	// 添加页面头部组件
        Footers,	// 添加页面底部组件
        // ...
    }
})

6.vue 的基础语法

（1）插值表达式

插值表达式：是Vue中一种固定的语法：{{ 变量 }}，用于渲染输出变量的数据

<body>
    <div id="app">
        <p> {{ info }}</p>
        <p> {{ "插值表达式输出数据：" + info }}</p>
        <p> {{ info.toUpperCase() }}</p>
        <p> {{ reverse(info) }} </p>
        <p> {{ isLogin ? '尊敬的用户，冬奥会欢迎您' : '先做核酸'}}</p>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                info: "hello vue 2.x!",
                isLogin: false
            },
            methods: {
                reverse(str) {
                    return str.split('').reverse().join('');
                }
            }
        })
    </script>
</body>

2）指令：`v-text/v-html`

v-text 将数据渲染到指定的标签中进行文本展示

v-html 将数据渲染到指定的标签中进行解释展示

<body>
    <div id="app">
        <p> {{ info }} </p>
        <p v-text="info"></p>
        <p v-html="info"></p>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                info: "<h2>谷爱凌</h2>"
            }
        })
    </script>
</body>

（3） `v-show`、`v-if`

`v-show`	根据判断条件是否为`true`，设置包含内容的显示/隐藏
`v-if`	根据判断条件是否为`true`，设置包含内容的加载渲染/不加载渲染

 <div id="app">
        <h2 v-if="isLogin">尊敬的管理员，欢迎访问本系统</h2>
        <h2 v-show="isLogin">XX会员您好，欢迎访问本系统</h2>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                isLogin: false
            }
        })
    </script>
</body>

总结：关于v-show和v-if

v-show和v-if在页面上都能达到相同的效果，可以通过条件变量判断是否显示某些内容

v-show：通过display样式控制显示/隐藏
v-if：通过DOM操作加载/不加载控制显示/隐藏

（4） `v-bind`

v-bind 动态操作标签属性的指令，让标签属性可以接受变量数据

 <div id="app">
        <!--
            v-bind:title="..."
            表示属性值是一个变量或者表达式
        -->
        <div v-bind:title="info">苏翊鸣</div>
        <div :title="info">苏翊鸣</div>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                info: "单板滑雪 男子大跳台 金牌得主"
            }
        })
    </script>
</body>

（5） `v-on`

v-on 用于给标签添加事件处理的指令

<div id="app">
        <button v-on:click="mySay">点击我试试</button>
        <button @click="mySay">点击我试试</button>
        <input type="text" v-on:keyup="record">
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                mySay() {
                    alert("用户点击了按钮")
                },
                record(e) {
                    console.log("用户输入了数据", e.target.value)
                }
            }
        })
    </script>

（6）`v-for`

v-for 列表渲染指令，循环遍历集合数据，如数组中的多项数据

<body>
    <div id="app">
        <ul>
            <li v-for="(job, index) in jobs" :key="index">
                <input type="checkbox" name="" id="">
                {{index+1}} - {{ job }}
            </li>
        </ul>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                jobs: [
                    "前端工程师",
                    "UI工程师",
                    "后端工程师",
                    "运维工程师",
                    "测试工程师"
                ]
            }
        })
    </script>

7.案例

选项卡案例：

<body>
    <div id="app">
        <div id="tab-container">
            <div id="title">
                <div @mouseover="index=1" :class="index===1?'active':''">001</div>
                <div @mouseover="index=2" :class="index===2?'active':''">002</div>
                <div @mouseover="index=3" :class="index===3?'active':''">003</div>
            </div>
            <div id="content">
                <div v-show="index===1">内容内容001</div>
                <div v-show="index===2">内容内容002</div>
                <div v-show="index===3">内容内容003</div>
            </div>
        </div>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                index: 1
            }
        })
    </script>
</body>

关于状态保持，添加工作案例

<body>
    <div id="app">
        <input type="text" v-model="jobname"> 
        <button @click="addJob">添加工作</button>
        <ul>
            <li v-for="(job, index) in jobs" :key="job.id">
                <input type="checkbox" name="" id="">
                {{job.id}} - {{ job.name }}
                <button @click="delJob(index)">删除</button>
            </li>
        </ul>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                jobname: '',
                jobs: [
                    {id: 1, name: "前端工程师"},
                    {id: 2, name: "UI工程师"},
                    {id: 3, name: "后端工程师"}
                ]
            },
            methods: {
                addJob() {
                    // 数组的开头添加一个数据
                    this.jobs.unshift(this.jobname)
                    this.jobname = ''
                },
                delJob(index){
                    this.jobs.splice(index, 1)
                }
            }
        })
    </script>
</body>

晚安.biubiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 的第一天

目录Vue 课程大纲1.什么是 vue2.vue 的特点3.vue 的第一个应用4.Vue第一个数据处理应用5.Vue实例选项6.vue 的基础语法Vue 课程大纲1.什么是 vueVue(读音/vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类...
复制链接

扫一扫