Vue(一)

最新推荐文章于 2024-07-12 14:10:05 发布

罗子涵涵

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量42

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_58200051/article/details/134464547

版权

一.`Vue`

1. `Vue`介绍

Vue是一套构建用户界面的渐进式前端框架
- 渐进式代表的含义是：主张最少
- 渐进式框架的意思就是你可以只用我的一部分，而不是用了我一点就必须用我的全部。
只关注视图层
通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。

2.`Vue`快速入门

2.1`vue`的特性

1.数据驱动视图

2.双向数据绑定

数据驱动视图

在使用了vue的页面中，vue会监听数据的变化，从而自动渲染页面的结构

当页面数据发生变化时，页面会自动渲染

数据驱动视图是单向数据绑定

双向数据绑定

在前端页面更改某个数据或者填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把填写或者更改的数据同步到后端

3.`MVVM`

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理，他把每一个html分为三个部分：

view:表示当前页面所渲染的DOM
model:表示当前页面渲染时所依赖的数据源
viewmodel:表示vue实例，它是MVVM的核心

工作原理：

当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面结构。

当前端页面上的数据发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model数据源中

4.开发步骤

4.1 下载和引入`vue.js`文件

4.2 编写入门程序

视图：负责页面渲染

脚本：负责业务数据模型以及数据的处理逻辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="../static/js/vue.js"></script>
</head>
<body>
<!--创建视图-->
<div id="vueApp">{{message}}</div>

<script>
    const app = {//保存当前vue对象(viewmodel)的数据
        data() {
            return {
                message: "hello vue!"
            }
        }
    }
    //     创建viewmodel
    const vm = Vue.createApp(app)
    //     将创建的viewmodel挂载到视图上
    vm.mount("#vueApp")
</script>
</body>
</html>

二.`Vue`快速入门讲解

1.引入vue.js文件

2.创建视图

3.创建viewmodel对象

4.挂载视图

5.在视图处通过{{message}}取值

Vue核心对象：每一个Vue程序都是从一个Vue核心对象开始的
Vue3中每个Vue应用都是通过createApp函数创建一个新的应用实例开始的
```
const app=Vue.creatApp({/*选项*/})
```
- 选项列表:
  
  data选项：是一个函数，用于保存当前Vue对象中的数据，在视图中声明的变量需要在此处赋值
  
  Vue在创建新组件实例的过程中调用此函数，它应该返回一个对象，然后vue会通过响应性系统将其包裹起来，并以$data的形式存储在组件实例中。

const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
document.write(vm.$data.count) / > 4
document.write("<br>")
document.write(vm.count) / > 4
document.write("<br>")
/
修改 vm.count 的值也会更新 $data.count
vm.count = 5
document.write(vm.$data.count) / > 5
document.write("<br>")
/
反之亦然
vm.$data.count = 6
document.write(vm.count) / > 6

method选项：用于定义方法，方法可以直接通过对象名条用，this代表当前Vue对象

数据绑定：在视图部分获取脚本部分的数据

{{}}:用于输出对象属性和函数返回值

{{变量名}}:对应应用中变量名的值

挂载视图
```
app.mount("#box")
```
createApp 的参数是根组件（box），在挂载应用时，该组件是渲染的起点。

三. `Vue`常用指令

3.1 指令介绍

指令：是带有v-前缀的特殊属性，不同指令有不同的函数
指令通常编写在标签上
指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM

3.2 常用指令

v-html:把文本解析为HTML
v-bind:为HTML绑定属性值
v-if:条件性渲染某一个元素，判定为true时渲染，否则不渲染
v-else
v-else-if
v-show:根据条件展示某元素，区别在于切换display属性的值
v-for:列表渲染，遍历容器的元素的或者对象的属性

v-for 指令需要以 item in items 形式的特殊语法. items是源数据数组并且 item 是数组元素迭代的别名
v-on:为HTML标签绑定事件
v-model：在表单元素上创建双向数据绑定

3.3 指令详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue练习升级版</title>
    <style>
        .item{
            color: aqua;
        }
    </style>
    <script src="../static/js/axios.js"></script>
    <script src="../static/js/vue.js"></script>
</head>
<body>
<div id="app">
    学生姓名：{{student.name}}
    学生性别：{{student.gender}}
    学生年龄：{{student.age}}

<!--    为html绑定属性-->
    <span v-bind:class="id">今天星期四</span>
    <!--    可以解析html标签-->
    <span v-html="address"> 这是一个链接</span>
    <!--    内容是什么输出的就是什么-->
    <span v-text="address">这其实是一个链接，没想到吧</span>

    <!--    绑定事件-->
    <button v-on:click="change()">点击我{{count}}</button>
    <button v-on:click="hi()">自我介绍</button>
    </br>
<!--    v-if/v-else-if/v-else 只要一个是true其他的就不会被渲染 浏览器的检查里面也会只出现true的代码-->
    <span v-if="num % 2==0">num是2的倍数</span>
    <span v-else-if="num % 2 == 0">num不是2的倍数</span>
    <span v-else="num % 3 == 0">num既不是2的倍数也不是3的倍数</span>
<!--    v-show 不管是true还是false 都会展示代码 在浏览器检查里面 改变的是display属性-->
    <span v-show="m % 5 == 0">num是5的倍数</span></br>
<!--    即使你修改了数据，但是页面上不会跟着修改-->
    <button v-once="one">不能改{{one}}</button>
<!--    双向数据绑定，修改前端页面的值，后端数据改变-->
    <input type="text" placeholder="你可以编辑我" v-model="count">
    <input type="text" placeholder="你可以编辑我" v-model="student.name">
    <input type="text" placeholder="你可以编辑我" v-model="student.gender">
    <input type="text" placeholder="你可以编辑我" v-model="student.age">

    <table>
        <tr>
            <td>序号</td>
            <td>id</td>
            <td>name</td>
            <td>price</td>
        </tr>
<!--        遍历集合，item in items items:是要渲染的数组， item是每个元素的别名-->
        <tr v-for="(item, index) in goodsList">
            <td>{{index + 1}}</td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
        </tr>
    </table>

</div>
<script>
    const app = {
        data() {
            return {
                address: '<a href="http://www.baidu.com">这是一个链接</a>',
                student: {
                    name: "张三",
                    gender: "男",
                    age: 19,
                },
                count: 0,
                num: 4,
                m: 25,
                id: 'item',
                one: 7,
                goodsList:[
                    {id: 1, name: '薯片', price: 4.5},
                    {id: 2, name: '煎饼', price: 8.0},
                    {id: 3, name: '圣代', price: 4.0},
                    {id: 4, name: '冰激凌', price: 2.0},
                ]
            }
        },
        methods: {
            hi() {
                alert("我叫" + this.student.name + ",是" + this.student.gender + "生,今年" + this.student.age)
            },
            change() {
                this.count++;
            }
        }
    }
    const vm = Vue.createApp(app)
    vm.mount("#app")


</script>
</body>
</html>

alert(“我叫” + this.student.name + “,是” + this.student.gender + “生,今年” + this.student.age)
},
change() {
this.count++;
}
}
}
const vm = Vue.createApp(app)
vm.mount(“#app”)

```

罗子涵涵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(一)

Vue是一套构建用户界面的渐进式前端框架渐进式代表的含义是：主张最少渐进式框架的意思就是你可以只用我的一部分，而不是用了我一点就必须用我的全部。只关注视图层通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。指令：是带有v-前缀的特殊属性，不同指令有不同的函数指令通常编写在标签上指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
复制链接

扫一扫