Vuejs

最新推荐文章于 2024-05-15 11:56:44 发布
最新推荐文章于 2024-05-15 11:56:44 发布
阅读量582 收藏
点赞数
分类专栏： Vue 文章标签： Vuejs Vue Vue入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cledwyn/article/details/98636595
版权

Vue开发去哪网App

用到的了Vue中的知识点

Axios–Ajax数据的获取
Vue Router–做多页面之间的路由
Vuex–各个组件之间的数据共享
异步组件—代码上线，性能更优
Stylus–编写前端的样式
递归组件–实现组件自身调用自己
slider插件实现轮播图

开始！

Hello Vue

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app1">
    </div>

    <div id="app">
        {{content}}
    </div>
    <script>
        var dom = document.getElementById('app1');
        dom.innerHTML = "Hello Vue"
        setTimeout(function () {
            dom.innerHTML = 'Bye Vue'
        },2000)

        // 创建Vue实例
        var app = new Vue({
            el:'#app',// Vue实例负责管理的区域，接管id="app"的dom标签所有内容
            data:{
                content:'Hello Vue'
            }
        })
        setTimeout(function () {
            app.$data.content = 'Bye Vue'
        },2000)
    </script>
</body>
</html>

TodoList

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model 双向的数据绑定 -->
        <input type="text" v-model="inputValue" />
        <!-- v-on 绑定事件 -->
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <!--循环list数据，循环的每一项放到item里面-->
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // list: ['一','二','三']
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick:function () {
                    // alert('click')
                    // alert(this.inputValue)
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>

</body>
</html>
数据的双向绑定扩展： v-model="inputValue"

在这里插入图片描述

使用组件化的思想修改TodoList 全局组件

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model 双向的数据绑定 -->
        <input type="text" v-model="inputValue" />
        <!-- v-on 绑定事件 -->
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <!-- 使用组件TodoItem -->
            <!-- 循环list数据，list的值赋值给item，再通过v-bind的形式通过content变量传给todo-item -->
            <todo-item
                    v-bind:content="item"
                    v-for="item in list">
            </todo-item>
        </ul>
    </div>
    <script>
        // 创建一个全局组件，名字是TodoItem，内容是<li></li>
        Vue.component("TodoItem",{
            props: ['content'],// props：父组件通过 props 向下传递数据给子组件
            template:  "<li>{{content}}</li>"
        })

        var app = new Vue({
            el: '#app',
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick:function () {
                    // alert(this.inputValue)
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>

</body>
</html>

使用组件化的思想修改TodoList 局部组件

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model 双向的数据绑定 -->
        <input type="text" v-model="inputValue" />
        <!-- v-on 绑定事件 -->
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <!-- 使用组件TodoItem -->
            <!-- 循环list数据，list的值赋值给item，再通过v-bind的形式通过content变量传给todo-item -->
            <todo-item
                    v-bind:content="item"
                    v-for="item in list">
            </todo-item>
        </ul>
    </div>
    <script>
        // 定义一个局部组件
        var TodoItem = {
            props: ['content'],
            template:  "<li>{{content}}</li>"
        }

        var app = new Vue({
            el: '#app',
            // 把局部组件TodoItem注册到Vue实例中,在实例中名字依然是TodoItem
            components: {
                TodoItem: TodoItem
            },
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick:function () {
                    // alert(this.inputValue)
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>

</body>
</html>

字组件向父组件传值 TodoList点击删除案例

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model 双向的数据绑定 -->
        <input type="text" v-model="inputValue" />
        <!-- v-on 绑定事件 -->
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <!-- 使用组件TodoItem -->
            <!-- 循环list数据，list的值赋值给item，再通过v-bind的形式通过content变量传给todo-item -->
            <todo-item
                    v-bind:content="item"
                    v-bind:index="index"
                    v-for="( item , index ) in list"
                    @delete="handleItemDelete" >
            </todo-item>
            <!-- 在父组件模板中，创建子组件的同时监听子组件删除的事件，删除事件触发的时候，执行父组件中handleItemDelete方法 -->
            <!-- 向子组件中传一个下标值index，子组件中要想用index，要在props里声明index,-----父组件传过来的index就会被子组件接收 -->
            <!--  v-bind v-bind:content="item"     :content="item" -->

        </ul>
    </div>
    <script>
        // 定义一个局部组件
        var TodoItem = {
            props: ['content','index'],
            template:  "<li @click='handleItemClick'>{{content}}</li>",
            methods: {
                handleItemClick:function () {
                    // alert("click")
                    // 数据放在父组件中，删除子组件时，点击子组件，子组件把对应的内容传给父组件，父组件去改变数据，父组件的数据改变后--->子组件改变
                    // 子组件向父组件传值，通过$emit方式向外触发事件
                    this.$emit("delete",this.index);
                    // 点击子组件的时候，子组件向外触发delete事件，
                    // 在父组件中创建子组件的同时，监听delete事件，v-on:delete @delete
                    // 子组件被点击的时候,1：触发delete事件，2：同时把this.index作为参数带给父组件
                }
            }
        }

        var app = new Vue({
            el: '#app',
            // 把局部组件TodoItem注册到Vue实例中,在实例中名字依然是TodoItem
            components: {
                TodoItem: TodoItem
            },
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick:function () {
                    // alert(this.inputValue)
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                // 在父组件中定义handleItemDelete方法
                handleItemDelete: function (index) {
                    // alert("delete");
                    // this.list = []
                    // 为了防止点击一下清空list,父组件向子组件传值的时候，v-band传一个index
                    // alert(index)
                    this.list.splice(index,1) // 从传过来的下标开始删除一项
                }
            }
        })
        // 父组件向子组件传值：通过v-bind的方式进行数据的传递，父组件向子组件传值的时候，子组件要接收（props）
        // 子组件向父组件传值：通过$emit方式，通过向上一层触发事件，子组件触发的事件，父组件在监听，监听过后，获取到子组件带的内容，实现子组件向父组件传值
    </script>

</body>
</html>

在这里插入图片描述

Vue实例理解

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Vue实例</title>
    <script src="./js/vue.js"></script>

</head>

<body>
    <div id="root">
        <div @click="handleClick">
            {{message}}
        </div>
        <item></item>
    </div>

    <script>
        // 一个Vue项目中有很多Vue实例组成，每个组件也是一个Vue实例
        // 创建一个组件
        Vue.component('item',{
            template: '<div>Hello item</div>'
        })

        var vm = new Vue({
            el: '#root',
            data: {
                message: 'Hello Vue'
            },
            methods: {
                handleClick: function () {
                    alert("click")
                }
            }
        })
    </script>

</body>

</html>

Vue实例生命周期函数

到了Init Event & Lifecycle结束之后的时间点，beforeCreate就会自动的被执行

调用完beforeCreate函数，Vue会继续处理外部的注入包括双向的绑定的内容，在这部分初始化完成的时候，Vue实例的初始化基本完成

在这个时间点，created函数自动执行

判断Vue实例中是否有el:选项

判断Vue实例中是否有template:选项,
如果有 使用模板进行渲染，
如果没有 把el外层的HTML当做模板进行渲染

在页面渲染之前自动执行beforeMount生命周期函数，（模板和数据相结合，挂载到页面之前执行）

页面挂载之后，mounted函数被执行,mounted函数执行之后，页面被渲染完毕（用console.log(this.$el)验证）

当数据发生改变时，页面还没重新渲染之前，会执行beforeUpdate函数，渲染之后updated函数会被执行

在这里插入图片描述

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Vue实例生命周期函数</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">

    </div>

    <script>
        // Vue生命周期函数就是vue实例在某个时间点会自动执行的函数
        var vm = new Vue({
            el: '#app',
            template:"<div>{{message}}</div>",
            data: {
                message: "Hello World"
            },
            // Vue实例生命周期函数并不放在methods对象里，单独放在Vue实例中
            beforeCreate: function () {
                console.log("beforeCreate")
            },
            created: function () {
                console.log("created")
            },
            beforeMount: function () {
                console.log(this.$el)
                console.log("beforeMount")
            },
            mounted: function () {
                console.log(this.$el)
                console.log("mounted")
            },
            bedoreDestory: function () {
                console.log("bedoreDestory")
            },
            destoryed: function () {
                console.log("destoryed")
            },
            beforeUpdate: function () {
                console.log("beforeUpdate")
            },
            updated: function () {
                console.log("updated")
            }
        })
    </script>

</body>

</html>

beforeUpdate updated函数，数据发生改变时执行
在这里插入图片描述

Vue模板语法

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Vue模板语法</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{name + '----后面可以加js语法'}}</div>
        <div v-text="name2 + '----后面可以加js语法'"></div>
        <div v-html="name3 + '----后面可以加js语法'"></div>
    </div>
    <!-- 差值表达式和v-text作用一样，v-text输出时会进行转义，v-html不解析内容 -->

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: "插值表达式",
                name2: "v-text",
                name3: "<B>v-html</B>",
            }
        })
    </script>


</body>
</html>

在这里插入图片描述

Vue中的计算属性，方法和侦听器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{fullName}}
        {{fullName1()}}
        {{fullName2}}
        {{age}}

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "名字",
                lastName: "姓氏",
                age: 28,
                fullName2: "xxx",
            },
            // 计算属性
            computed: {
                fullName: function () {
                    console.log("计算了一次----computed");
                    return this.lastName + this.firstName
                }
            },
            // 计算属性内置缓存,
            // 这个计算属性fullName有两个依赖变量，依赖的变量不发生改变时，计算属性不重新计算，使用上一次计算的结果。
            // 比如修改vm.age = "27" 重新渲染页面，fullName没有重新计算，修改lastName或irstName，计算属性重新计算一次。

            // 使用方法编写代码不如计算属性有效
            // 修改vm.age = "27" 重新渲染页面，fullName1方法重新执行一次，内部没有缓存机制
            methods: {
                fullName1: function () {
                    console.log("计算了一次----methods");
                    return this.lastName + this.firstName;
                },
            },

            // watch侦听器实现
            watch: {
                //侦听lastName和firstName的改变
                firstName: function () {
                    console.log("计算了一次----watch");
                    this.fullName2 = this.lastName + this.firstName;
                },
                lastName: function () {
                    console.log("计算了一次----watch");
                    this.fullName2 = this.lastName + this.firstName;
                },
            }
            //watch和computed都具备缓存的机制，computed语法简单，推荐优先使用
        })
    </script>


</body>
</html>

计算属性的setter和getter

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{fullName}}
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "名字",
                lastName: "姓氏",
            },
            // 计算属性
            // computed: {
            //     fullName: function () {
            //         return this.lastName + this.firstName
            //     },
            // },

            // 计算属性的另一种写法
            computed: {
                fullName: {
                    get: function () {
                        return this.lastName + this.firstName
                    },// 调用差值表达式读取计算属性的内容时，使用get这个方法
                    set: function (value) {
                        // console.log(value)
                        var arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];

                    },// set方法会接收到外部传过来的一个设置的value，比如vm.fullName = "xxxx"
                    // 当computed依赖的值发生改变时，计算属性重新计算

                }
            }

        })
    </script>
</body>
</html>

在这里插入图片描述

Vue中样式的绑定 class的对象绑定 点击切换颜色

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .activated {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 第一种实现样式和数据绑定的方案：借助class和对象的形式----class的对象绑定 -->
    <!-- class的对象绑定, div元素上有个class,class的名字是activated，class显示不显示取决于数据里isActivated变量-->
    <div id="app">
        <div @click="handleDivClick"
             :class="{activated: isActivated}" >
            Hello World
        </div>

    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isActivated: false
            },// isActivated 默认值为false，默认class不显示
            methods: {
                handleDivClick: function () {
                    // this.isActivated = true
                    this.isActivated = !this.isActivated;// 取反

                }
            }

        })
    </script>

</body>
</html>

Vue中样式的绑定 class和数组绑定

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .activated {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 第二种实现样式和数据绑定的方案：借助class和数组的形式 -->
    <div id="app">
        <div @click="handleDivClick"
             :class="[activated]" >
            Hello World
        </div>

    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                activated: ""
            },// activated初始为空
            methods: {
                handleDivClick: function () {
                    if (this.activated === "activated") {
                        this.activated = ""
                    }else {
                        this.activated = "activated"
                    }// 三元表达式 this.activated = this.activated === "activated" ? "" : "activated"
                }
            },

        })
    </script>

</body>
</html>

Vue中样式的绑定 class和style绑定

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

    <div id="app">
        <div :style="styleObj" @click="handleDivClick">
            Hello World
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                styleObj: {
                    color: "black"
                },
            },
            methods: {
                handleDivClick: function () {
                    this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
                }
            },
        })
    </script>

</body>
</html>

:style=“styleObj” 对象方式绑定
:style="[styleObj]" 数组方式绑定

Vue中的条件渲染

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<!--
v-if和v-show都能够控制模板标签是否在页面上显示
v-if对应的变量值如果是flase,v-if就不存在dom上，v-if每次隐藏显示dom，相当于删除dom再增加dom
而v-show对应的js表达式值为flase,这个标签对应的dom在页面上依然存在，展示形式为display : none   <div style"display : none;"> </div>
在经常进行改变dom元素进行隐藏显示操作时，使用v-show性能更高

v-if可以和v-else嵌套使用
-->

<div id="app">
    <div v-if="show">{{message}}</div>
    <div v-show="show">{{message}}</div>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            show: false,
            message: "Hello World",
            },
    })
</script>

</body>
</html>

Vue中的列表渲染

cledwyn
关注
专栏目录
Vue.js概述
qq_42839746的博客
03-27 691
前端框架Vue入门（一）
vue.js
weixin_62141813的博客
05-11 152
模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数 插值
Vue.js
weixin_69205227的博客
11-27 193
Model(模型):由核心的业务逻辑产生的数据对象，例如从数据库取出并做特定处理后得到的数据View(视图):即用用户界面ViewModel(视图模型):用于链接匹配模型和视图的专用模型。
vuejs
lin54php的博客
12-11 165
vue.js基础语法的学习，实战项目环境搭建，页面简单搭建！
初识vue.js，vue.js入门
ShootingStar_1998的博客
12-02 4029
vue.js入门一、vue.js简介1.1 vue.js是什么1.2 vue.js的特点1.3 vue.js的作者及官网二、vue.js的基础知识2.1 vue.js的安装2.2 el:挂载点2.3 data:数据对象2.4 Vue指令2.4.1 v-text2.4.2 v-html2.4.3 v-on2.4.4 v-show2.4.5 v-if2.4.6 v-bind2.4.7 v-for2.4...
VueJS
02-21
VueJS 是一款轻量级的前端JavaScript框架，它以其易用性、灵活性和高性能而闻名。VueJS的设计理念是让开发更加简单，使得开发者能够快速构建用户界面。它结合了React和Angular的部分特性，但避免了它们的一些复杂性...
vueJS
03-25
VueJS 是一个流行的轻量级前端JavaScript框架，用于构建用户界面。它的核心库专注于视图层，易于学习，同时提供了与现代工具链的良好集成。VueJS 的设计目标是通过简单的API实现灵活的可复用组件，使开发人员能够...
vuejs-loadmore:基于vuejs上拉加载更多控件
05-14
在这个项目“vuejs-loadmore”中，我们关注的是一个基于Vue.js的上拉加载更多组件，它为网页或应用提供了滚动到底部时自动加载新内容的功能，这种功能常见于社交媒体、新闻网站和电商应用。 上拉加载更多（ ...
materio-vuetify-vuejs-admin-template.zip
07-06
"materio-vuetify-vuejs-admin-template.zip" 是一个包含高质量管理界面模板的压缩文件，专为基于Vue.js和Vuetify框架的应用程序设计。这个模板是国外开发的，因此可以预期它包含了国际化的最佳实践和设计趋势。...
idea插件vuejs.zip
10-26
"idea插件vuejs.zip"很可能是这样一个针对Vue.js的IDEA插件包，它包含了提升Vue.js开发体验所需的各种功能。 Vue.js插件在IntelliJ IDEA中的作用主要体现在以下几个方面： 1. **语法高亮与代码提示**：安装Vue.js...
vue.js 源代码最新版
10-14
Vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页面应用的Web应用框架。
前端开发之走进Vue.js
weixin_33881050的博客
10-31 820
Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通过Vue.js来构建一个中大型的前端项目，同时做好相应的部署与优化工作。 文章将以PPT图片附加文字介绍的形式展开，不会涉及知识点的具体代码，点到为止。...
vuejs（1）
Nan 博客
10-25 239
Vue介绍 vue 中文网 vue github Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式JavaScript框架 库和框架的区别 - the difference between a framework and a library - stackoverflow - Framework vs. Toolkit vs. LibraryLibrary 代表
Vuejs入门
程序猿的博客
08-08 604
       想学习vuejs，可以看一下vuejs官方网址的API、教程，网址是：https://cn.vuejs.org，如下是我学习记下的。        Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当...
vuejs（一）
msn131420的博客
03-10 220
一、认识Vuejs Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动 二、Vuejs安装方式--3种 使用一个框架，我们第一步要做什么呢？安装下载它 安装Vue的方式有很多： 方式一：直接CDN引入 你可以选择引入开发环境版本还是生产环境版本 <!-- 开发
vue.js基础
lxh1152808673的博客
03-05 222
初始vue.js MVVM框架：View ViewModel Model, view的变化自动跟新到ViewModel，ViewModel变化自动同步到view，自动同步因为ViewModel中属性实现了Observe，属性变更触发对应操作。 数据绑定 插值：文本插值{{}}，双大括号把里面值当作字符串处理，如果值是HTML片段，用{{{}}}表示。{{}}有闪烁问题，v-cloa...
Vue.js 简介
wang_zhao_的博客
04-13 1993
一、Vue.js 简介1.1 认识 Vue.js1.2 Vue.js 安装1.3 Vue.js 初体验案例一案例二案例三1.4 Vue.js 的 MVVM1.5 Vue 实例的 options1.6 Vue 的生命周期 1.1 认识 Vue.js Vue (读音 /vjuː/，类似于 view) Vue 是一套用于构建用户界面的渐进式框架，什么是渐进式的呢？ 渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中，带来更丰富的交互体验体验。 或者如果你希望将更多的业务逻辑使用使用 Vue 实现，
Vue.js 详细介绍
最新发布
学IT，找陈寒
05-15 1137
Vue.js 是由尤雨溪（Evan You）开发的一款开源 JavaScript 框架。它的设计理念是通过简单易用的 API 和数据绑定机制，让开发者能够高效地构建用户界面。Vue.js 支持自定义指令，用于在 DOM 上执行更复杂的操作。例如，创建一个v-focus// main.jsel.focus();});在模板中使用自定义指令：
Vuejs（基础）
gxll499294075的博客
04-11 852
vue是什么？ 一套用于构建用户界面的渐进式JavaScript框架。 渐进式：Vue可以自底向上逐层的应用。 简单应用：只需一个轻量小巧的核心库。 复杂应用：可以引入各式各样的Vue插件。 Vue的特点 采用组件化模式，提高代码复用率、且让代码更好维护。 声明式编程，让编程人员无需操作DOM，提高开发效率。 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。 地址 Vue官网地址：Vue.js Githup地址：https://github.com...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值