Vue基础语法

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量375 收藏
点赞数 1
分类专栏： VUE 文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouqiyuan1233/article/details/116947189
版权

狂神教学视频链接

CSS预处理器

css缺陷：
在这里插入图片描述
解决方法：css预处理器
在这里插入图片描述

VUe特性：
虚拟DOM 计算属性

在这里插入图片描述

1. 第一个Vue项目

引入 Vue.js : https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    {{message}}
</div>


<script>
    var vm = new Vue({
        el: "#app",//绑定标签，el是元素的意思
        data: {
            //数据都是以键值对的方式存在的
            message: "hello Vue!"
        }
    });
</script>

</body>
</html>

注意：程序里Vue这三个字母一定要一字不差的打，不要改大小写，否则会识别不出来。

效果：
在这里插入图片描述

简单实现一下双向绑定：
在这里插入图片描述
直接从控制台更改程序的js代码，界面立即改变。

本程序里的vm就是个Vue实例化对对象，它时刻监听，当数据发送变化立即渲染到前端，不需要刷新界面。
Vue不改变Dom元素（使用虚拟Dom），只是更改了里面的值。
即时运行即时编译

Vue核心，实现了Dom监听和数据绑定

2.Vue基本语法

v-bind：用于绑定数据和元素属性

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
   <span v-bind:title="message">
       鼠标悬停几秒查看此处绑定的信息
   </span>
</div>


<script>
    var vm = new Vue({
        el: "#app",//绑定标签，el是元素的意思
        data: {
            //数据都是以键值对的方式存在的
            message: "hello Vue!"
        }
    });
</script>

</body>
</html>

效果：
在这里插入图片描述

v-if

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if-else</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>


<script>
    var vm = new Vue({
        el: "#app",
        data: {
            type: "A"
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

v-for

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    <li v-for=" item in items">
        {{item.message}}
    </li>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {message: '今天是个好日子'},
                {message: '今夜阳光明媚'},
                {message: '今夜多云转晴'}
            ]
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

循环还能打印下标：

    <li v-for=" (item,index) in items">
        {{item.message}}-----{{index}}
    </li>

在这里插入图片描述

动态向数组中添加数据：
vm.items.push({message: ‘今夜多云转晴’});
在这里插入图片描述

v-on 绑定事件

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
<button v-on:click="sayHi">点我</button>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "针不戳"
        },
        methods: {
        定义的方法必须写在这里,event是传入事件
            sayHi: function (event) {
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

3.Vue双向绑定

数据变，视图跟着变，视图变，数据也跟着变

使用v-model 指令
在这里插入图片描述

先试一下 input 和 textarea 标签：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-mode</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
   输入文本：<input type="text" v-model="message">{{message}}<br>

   输入文本：<textarea  cols="30" rows="10" v-model="message"></textarea>{{message}}
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "针不戳"
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述
就很牛

再来搞搞单选框：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    选择性别：
    <input type="radio" name="sex" value="男" v-model="zqy">男
    <input type="radio" name="sex" value="女" v-model="zqy">女
    <input type="radio" name="sex" value="男儿身女儿心" v-model="zqy">男儿身女儿心

    <p>
        你的性别为：{{zqy}}
    </p>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            zqy: ""
        }

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

效果：
在这里插入图片描述

下拉框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    <select v-model="zqy">
        <option value="" disabled>请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>


    <p>
        你的选择：{{zqy}}
    </p>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            zqy: ""
        }

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

效果：
在这里插入图片描述

Vue组件（就是自定义一个标签）

 Vue.component("自定义组件的名",{
        props:['要接收的数据'],
        template: '模板'
    });

先简单实现一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">

    <zqy></zqy>

</div>

<script>
    
    //自定义了一个组件 "zqy"  ，template 里面表示这个自定义组件的模板
    Vue.component("zqy",{
        template: '<li>牛啊</li>'
    });

    var vm = new Vue({
        el: "#app"
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

–

给自定义绑定上Vue数据

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">

    <zqy v-for="item in items" v-bind:zhou="item"></zqy>

</div>

<script>

    //自定义了一个组件 "zqy"  ，template 里面表示这个自定义组件的模板
    Vue.component("zqy",{
        props:['zhou'],
        template: '<li>{{zhou}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data:{
            items:["好","牛","针不戳"]
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

–
实现原理：

第一步，在Vue中定义了数据：

    var vm = new Vue({
        el: "#app",
        data:{
            items:["好","牛","针不戳"]
        }
    });

第二步，在自定义组件内使用 v-for 遍历数组中的数据，并将遍历出来的数据与 “zhou” 绑定：
在这里v-for中的 item 是可以随意写的，在这里为了便是度更改一些使用了 item

    <zqy v-for="item in items" v-bind:zhou="item"></zqy>

这样也可以：（v-bind后的也是能自定义）

    <zqy v-for="niu in items" v-bind:zhou="niu"></zqy>

第三步，组件接收数据并显示：
使用 props:[‘zhou’] 接收上一步绑定数据的 “zhou”

 Vue.component("zqy",{
        props:['zhou'],
        template: '<li>{{zhou}}</li>'
    });

4.Axios异步通信

在这里插入图片描述

浏览器版本过低会不支持，设置到6或者以上：
在这里插入图片描述

在这里插入图片描述

因为接口大都是json格式，所以先写一段json数据：

{
  "name":"狂神说java",
  "url": "http://baidu.com",
  "page": 1,
  "isNonProfit":true,
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": 4399, 
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

导入Axios包 ：https://unpkg.com/axios/dist/axios.min.js

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address.country}}</div>
    <a v-bind:href="info.url">点击</a>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                //请求的返回参数格式，必须和json格式一样（可以不都写，但是写了的格式必须相同）
                info: {
                    name: null,
                    address: {
                        street:null,
                        city:null,
                        country:null
                    },
                    url:null
                }
            }
        },
        mounted() {
            //钩子函数 链式编程  ES6特性
            axios.get('../data.json').then(response => (this.info=response.data))
        }
    });
</script>
</body>
</html>

–

钩子函数：就是在加载过程中到了一定时期会自动触发的函数。“钩子”就是在某个阶段给你一个做某些处理的机会。

    mounted() {
     //钩子函数 链式编程  ES6特性
    axios.get('../data.json').then(response => (this.info=response.data))
        }
    });

上一段代码中的 then() 是表示当上一步获取到资源后摇进行的操作。

5.计算属性

能将计算结果缓存为一个静态的属性，将不变化的结果存入缓存，每次调用时不执行函数，直接返回缓存中的数据。
先上个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    <p>普通函数：{{currentTime1()}}</p>
    <p>计算属性：{{currentTime2}}</p>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "好"
        },
        methods: {
            currentTime1: function () {
                return Date.now();//返回当前时间
            }
        },
        computed: {//计算属性
            //这里的方法与 methods 里的方法不能重名，否则只会调用 methods 中的同名方法
            currentTime2: function () {
                return Date.now();//返回当前时间
            }
        }
    });
</script>
</body>
</html>

–

如果刷新界面，两个值都跟着改变，计算属性刷新界面后就将之前的缓存删除导入新的缓存：
在这里插入图片描述

通过控制台调用函数和计算属性：

1.普通函数每次调用都会重新执行函数中的代码，锁以时间戳也会跟着改变：
在这里插入图片描述

2.控制台调用计算属性，每次获得的值都相同，是因为计算属性在第一次执行的时候，已经将结构保存到缓存中，每次调用这个计算属性就会直接将缓存中的数据显示出来，减少了资源的占用：
在这里插入图片描述

3.当界面不刷新的时候怎么才会改变计算属性缓存的数据呢？

        computed: {
            currentTime2: function () {
                this.message;//加入这行代码
                return Date.now();
            }
        }

让计算属性访问 data() 中的数据，当 data() 中对应的属性发生改变，计算属性缓存就会重新加载，之久会发生改变
在这里插入图片描述

6.插槽slot

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

–

使用插槽实现这个界面（因为一般情况下，这种数据都是从数据库中获取的，所以比较适合使用插槽）：
在这里插入图片描述

第一步，先定义一个含有的组件，命名为 ‘todo’ ：

    Vue.component('todo',{
       template:
           '<div>' +
             '<slot></slot>' +
            '<ul>' +
                  '<slot></slot>' +
             '</ul>' +
           '</div>'
    });

为了美观还有另外一种写法（用 ‘ \ ’代替 ’ + '）：

    Vue.component('todo',{
       template:
           '<div>\
                <slot></slot>\
                <ul>\
                    <slot></slot>\
                </ul>\
           </div>'
    });

第二步，在定义两个组件，用于链接数据，并且便于插入插槽中（咱先把里面的数据写死，一会再动态获取数据）：

    Vue.component('todo-title', {
        template: '<div>用于显示标题</div>'
    });
    
    Vue.component('todo-items', {
        template: '<li>Java</li>'
    });

第三步，将最后定义的两个组件与Vue中的data数据链接（还没连接，这里是准备工作），将这两个自定义组件与插件slot绑定：

    Vue.component('todo', {
        template:
        //使用 name 绑定自定义组件和插槽 slot
            '<div>\
                 <slot name="todo-title"></slot>\
                 <ul>\
                     <slot name="todo-items"></slot>\
                 </ul>\
            </div>'
    });


    Vue.component('todo-title', {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    
    Vue.component('todo-items', {
        props: ['todoItems'],
        template: '<li>{{todoItems}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data:{
            title:'学点啥',
            todoItems:['Java','Vue','MySql']
        }
    });

第四步，将div中的自定义标签与solt绑定，并且绑定data中的数据（第一次学，有点不太懂了，为啥下面绑完了上面还要绑）：
注意：v-bind 能简写为一个冒号 ‘ ： ’

<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:Ctitle="title"></todo-title>
        <todo-items slot="todo-items"  v-for="item in todoItems"  :Zitems="item"></todo-items>
    </todo>
</div>

总体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>solt插槽</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:Ctitle="title"></todo-title>
        <todo-items slot="todo-items"  v-for="item in todoItems"  :Zitems="item"></todo-items>
    </todo>
</div>

<script>
    Vue.component('todo', {
        template:
            '<div>\
                 <slot name="todo-title"></slot>\
                 <ul>\
                     <slot name="todo-items"></slot>\
                 </ul>\
            </div>'
    });

    Vue.component('todo-title', {
        props: ['Ctitle'],
        template: '<div>{{Ctitle}}</div>'
    });
    Vue.component('todo-items', {
        props: ['Zitems'],
        template: '<li>{{Zitems}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data:{
            title:'学点啥',
            todoItems:['Java','Vue','MySql']
        }
    });
</script>
</body>
</html>

7.自定义事件分发

以第6部分代码为基础，如何实现点击删除一条数据呢？

–

第一步，先把界面实现一下：
修改了这部分代码

    Vue.component('todo-items', {
        props: ['Zitems'],
        template: '<li>{{Zitems}} <button>删除</button> </li>'
    });

效果：
在这里插入图片描述
第二步，明白如何删除数组中指定的元素，这里使用到了js中的 splice( ) 函数：
在这里插入图片描述
先测试一下这个函数行不行，直接在Vue实例中写：

    var vm = new Vue({
        el: "#app",
        data:{
            title:'学点啥',
            todoItems:['Java','Vue','MySql']
        },
        methods:{
            removeItems:function (index){
                console.log("删除下标为"+index+"的元素"+this.todoItems[index]+" 成功~")
                //从下标为index的开始删除，删除一个元素
                this.todoItems.splice(index,1);
            }
        }
    });

效果（跳出了些警告，不用管它）：
在这里插入图片描述

问题来了，如何通过一个自定义组件的按钮来触发这里面的函数事件呢，反正直接调用是不行的（只能调用自己组件内的方法），那样用直接报错，就不截图了
新概念来了：
在这里插入图片描述

–

先做好准备工作，数组遍历的时候顺便比那里出下标，并且传递到自定义组件中：
修改的两处代码：

    <todo>
        <todo-title slot="todo-title" v-bind:Ctitle="title"></todo-title>
        <todo-items slot="todo-items"  v-for="(item,index) in todoItems"  :Zitems="item" :index="index"></todo-items>
    </todo>

    Vue.component('todo-items', {
        props: ['Zitems','index'],
        template: '<li>{{index}}---{{Zitems}} <button @click="removeItems(index)">删除</button> </li>'
    });

在这里插入图片描述
开始操作：
自定义事件并绑定Vue中的 removeItems( ) 事件：

    <todo>
        <todo-title slot="todo-title" v-bind:Ctitle="title"></todo-title>
        <todo-items slot="todo-items"  v-for="(item,index) in todoItems"
                    :Zitems="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>

    Vue.component('todo-items', {
        props: ['Zitems','index'],
        template: '<li>{{index}}---{{Zitems}} <button @click="remove">删除</button> </li>',
        methods:{
            remove:function (index){
                this.$emit('remove',index)
            }
        }
    });

在这里插入图片描述
总体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件分发</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:Ctitle="title"></todo-title>
        <todo-items slot="todo-items"  v-for="(item,index) in todoItems"
                    :Zitems="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>

<script>
    Vue.component('todo', {
        template:
            '<div>\
                 <slot name="todo-title"></slot>\
                 <ul>\
                     <slot name="todo-items"></slot>\
                 </ul>\
            </div>'
    });


    Vue.component('todo-title', {
        props: ['Ctitle'],
        template: '<div>{{Ctitle}}</div>'
    });


    Vue.component('todo-items', {
        props: ['Zitems','index'],
        template: '<li>{{index}}---{{Zitems}} <button @click="remove">删除</button> </li>',
        methods:{
            remove:function (index){
                //$emit的两个参数，第一个参数是自定义函数的函数名，第二个参数是传递的参数
                this.$emit('remove',index)
            }
        }
    });


    var vm = new Vue({
        el: "#app",
        data:{
            title:'学点啥',
            todoItems:['Java','Vue','MySql']
        },
        methods:{
            removeItems:function (index){
                console.log("删除下标为"+index+"的元素"+this.todoItems[index]+" 成功~")
                //从下标为index的开始删除，删除一个元素
                this.todoItems.splice(index,1);
            }
        }
    });
</script>
</body>
</html>

效果：
在这里插入图片描述
黄色警告看着难受，不过不影响使用，就不管了。

小结：在前端组件中能直接调用Vue中的函数，但是自定义组件不能直接调用，这时候就要使用一个桥梁，自定义函数，先在前端使用自定义函数绑定Vue中的函数，然后再自定义组件中与自定义事件绑定，自定义函数就是这个桥梁：

在这里插入图片描述

这节课的视频教程

拓展：JS数组操作：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

完

覅乆
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
记录vue的一些踩坑日记
m0_55546349的博客
07-29 544
记录vue的一些踩坑日记
vue 时间戳格式化
qq_39679438的博客
07-12 2419
公用方法在src目录下新建公用的js文件,如common.js//日期格式化 export const formatDate = (date, fmt) =&gt; { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } ...
vue日期显示格式化_Vue.js filter格式化时间戳时间成标准日期格式的方法
weixin_35968523的博客
01-30 1112
Vue.js filter格式化时间戳时间成标准日期格式的方法发布于 2020-2-27|复制链接分享一篇关于Vue filter格式化时间戳时间成标准日期格式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小妖过来看看吧调用实例：yyyy-MM-dd或者yyyy-MM-dd hh:mm:ss进行格式```javascript{{data | dataFormat('yyyy-MM-dd ...
vue 时间格式总结及转换
热门推荐
EvaY_Yang的博客
08-16 1万+
vue框架中我们常常用el-date-picker标签来显示和选择时间，那么，常见的时间的格式包含年-月-日（yyyy-MM-dd）、年-月-日 时-分-秒（yyyy-MM-dd HH-mm-ss）、标准时间格式以及时间戳。
海创软件组--20200809--js如何获取当天00:00:00的时间对象--Vue使用element-ui图片地址失效两种处理（替换和隐藏）
m0_46627730的博客
08-07 603
文章目录js如何获取当天00:00:00的时间对象前言：解决方法：Vue使用element-ui图片地址失效两种处理（替换和隐藏）前言：处理方式：一：替换二：隐藏三：继续思考 js如何获取当天00:00:00的时间对象 前言： 最近在做一个酒店后台管理系统，其中一个接口参数是起止时间，需要传起止两天00:00:00，所以按以往单纯的new Date()肯定是无法实现的。 解决方法： new Date(“2020/10/10”),“2020/10/10"相当于"2020/10/10 00:00:00”。 va
vue基础语法
日常学习总结
07-04 951
内容渲染指令，属性绑定指令，事件绑定，事件修饰符，按键修饰符，双向绑定，列表渲染，v-for语法
Vue基础语法知识（自用，完整版）
m0_62068678的博客
09-12 9388
vue基础语法、尚硅谷、欢迎交流
Vue 基础语法
qq_41775769的博客
03-13 1558
Vue 基础语法 1. Vue 项目结构 使用 Vue Cli 创建出来的项目内容比较多，重点关注 src 目录下的文件： public favicon.ico：图标 index.html：唯一页面 src： assert logo.png：图片 components HelloWorld.vue 组件。所有可复用的页面都可以做成组件。一般用于开发控制逻辑 views XxxView.vue：视图组件。用于开发存储的视图逻辑。 App.vue 主组件。SPA 项目中所有内容都
VUE基础语法
qq_46381044的博客
03-10 1165
Vue 什么是vue? Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架. 与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心 库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端 三大主流框架！ 网址：https://cn.vuejs.org/ Vue.js 优点 体积小 压缩后 33K 更高的运行效率 用 JQuery 或者原生的 Ja
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
Vue 基础语法 实例演示 示例代码
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
前端框架Vue基础语法笔记
01-20
Vue基础语法笔记 本笔记主要涵盖了Vue基础语法的知识点，包括创建Vue实例、数据绑定、事件绑定、循环和数据双向绑定、组件化等方面的内容。 一、创建Vue实例 在Vue中，创建一个实例需要使用Vue.createApp()方法，...
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 364
npm。
2024前端面试题-js篇
FormAda的博客
08-22 809
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 353
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 1002
用于在Vue应用程序或API路由中进行HTTP请求，详见。
Vue基础语法详解及项目构建规范介绍
Vue是一种流行的JavaScript框架，它具有简单易用的语法和强大的功能，使得构建单页面应用程序变得更加容易。在Vue的项目中，有一些重要的概念需要理解和掌握。 首先，Vue中使用的一些重要概念包括单页面应用程序、...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

覅乆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值