什么是Vue、Vue的特点、Vue的优点及性能优化、应用场景

最新推荐文章于 2024-05-15 08:57:18 发布

做JAVA的小王同学

最新推荐文章于 2024-05-15 08:57:18 发布

阅读量3k

点赞数 2

文章标签： vue.js javascript 前端 ide

本文链接：https://blog.csdn.net/m0_65111484/article/details/130165927

版权

1.Vue的简介

1.1：什么是Vue？

Vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页面应用的Web应用框架，它是一个Javascript框架，作用:简化dom的操作，以及响应式编程。

1.2：Vue的特点和优势

vue两大特点：响应式编程、组件化。

vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

2.在webstorm中创建工程

1.引入vue.js文件

<script type="text/javascript" src="js/vue.js"></script>

2.在body创建一个div标签

在这里插入代码片<body>
    <div id="app">
        {
   {
   msg}}
    </div>
</body>

3.创建自己的js代码

<script>
    let app=new Vue({
   
        el:"#app",
        data:{
   
            msg:"我喜欢睡觉"
        },
        methods:{
   
            fun(){
   
                this.msg="我喜欢玩游戏"
            },
        }
    })
</script>

3.el的属性

把当前vue对象挂载到指定的标签元素上，使其vue生效。

4.Vue的指令介绍

1.设置标签的文本值(textContent)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <span>{
  {msg}}</span><hr>

    <span v-text="msg">你喜欢什么?</span><hr>
    <!--v-text:无法解析html标签  v-html可以解析html标签-->
    <span v-html="msg">你喜欢什么?</span>
</div>
</body>
<script>
    let app=new Vue({
     
        el:"#app",
        data:{
     
            msg:"<font color='red'>我喜欢打麻将</font>",
        }
    })
</script>
</html>

2.v-on基础------为元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <span>{
  {msg}}</span>
    <button @click="fun">点击</button>
    <button @dbclick="fun">点击2</button>
</div>
</body>
<script