学习记录——vue基本使用

最新推荐文章于 2024-07-24 16:11:36 发布

　　　SakuraZr

最新推荐文章于 2024-07-24 16:11:36 发布

阅读量204

点赞数

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/sakura_zr/article/details/111699158

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Vue.js，一个渐进式的JavaScript框架，它使用模板语法和虚拟DOM实现数据驱动视图，并且支持双向绑定。学习Vue.js的基本步骤包括设置数据绑定的标签，引入库文件，利用Vue语法实现功能，以及将数据填充到视图中。文中提供了一个简单的示例，展示如何在Vue中创建一个动态更新的点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue：渐进式javascript框架官网：https://cn.vuejs.org/

通过模板语法来实现dom的渲染操作的是虚拟dom

数据驱动视图（数据改变试图就跟着改变）
摒弃了原始的dom操作
双向绑定

Vue的基本使用步骤：
1. 需要提供标签用于填充数据
2. 引入vue.js库文件
3.可以使用vue的语法做功能了
4. 把vue提供的数据填充到标签里面（指的是第一步提供的标签）

<div id='app'> {{msg}} </div>
{ { } }插值表达式，作用就是把数据填充到html标签里，支持基本的计算操作

let vue = new Vue({
//el用于告诉vue要把数据填充到哪个位置，值可以是css选择器或dom元素
	el:'#app', 
	data:{msg:'hello'}//data用于提供数据，值是一个对象，可以放很对键值对
})

例子：
新建demo1.html文件
引入vue.js文件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

在这里插入图片描述

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

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

<body>
    <div id="app">
        <!-- 模板语法 -->
        {{message}}
        <h1 @click="clickAdd">{{num}}</h1>
    </div>
</body>

</html>
<script>
    let vue = new Vue({
        el: '#app', //绑定的标签
        data: {
            message: 'hello', //内容
            num: 1
        }
    })
</script>

打开浏览器：在这里插入图片描述
如果要添加点击事件的话：

打开浏览器并点击h1标签会成功输出

点击当前标签数字+1：

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

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

<body>
    <div id="app">
        <!-- 模板语法 -->
        {{message}}
        <h1 @click="clickAdd">{{num}}</h1>
    </div>
</body>

</html>
<script>
    //挂载到了window上
    //创建了vue的实例
    let vue = new Vue({
        el: '#app', //绑定的标签
        data: {
            message: 'hello', //内容
            num: 1
        },
        methods: {
            clickAdd() {
                //console.log('h1被点击了');
                //console.log(vue === this);//true  this指向的是vue实例
                this.num++
            }
        }
    })
</script>